Как поддерживать стабильный преобразование во время масштабных преобразований с положением курсора? ⇐ CSS

[Anonymous]

У меня есть компонент холста, который масштабирует элементы вокруг положения курсора, используя преобразование. Проблема заключается в том, что при масштабе> 1, просто перемещение курсора (без какого -либо другого взаимодействия) приводит к непреднамеренному движению элементов. < /P>
Вот моя текущая реализация: < /p>


const canvas = document.querySelector('.canvas');
const cursor = document.querySelector('.cursor');
const box = document.querySelector('.box');
const info = document.querySelector('.info');
const scaleInput = document.querySelector('input');

let scale = 1;
let transformOrigin = '0% 0%';

// Box's initial position and dimensions
const boxRect = {
left: 100,
top: 100,
width: 128,
height: 128
};

canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;

// Update cursor position
cursor.style.left = mouseX + 'px';
cursor.style.top = mouseY + 'px';

// Calculate relative position from box's top-left corner
const relativeX = ((mouseX - boxRect.left) / boxRect.width) * 100;
const relativeY = ((mouseY - boxRect.top) / boxRect.height) * 100;

// Set transform origin as percentage values
transformOrigin = `${relativeX}% ${relativeY}%`;

// Apply transform origin
box.style.transformOrigin = transformOrigin;

// Update info display
info.textContent = `Transform Origin: (${Math.round(relativeX)}%, ${Math.round(relativeY)}%)`;
});

scaleInput.addEventListener('input', (e) => {
scale = Number(e.target.value);
box.style.transform = `scale(${scale})`;
});< /code>
.canvas {
position: relative;
width: 400px;
height: 400px;
border: 2px solid #ccc;
background: #f8f8f8;
margin: 20px;
}
.cursor {
position: absolute;
width: 8px;
height: 8px;
background: red;
border-radius: 50%;
pointer-events: none;
margin: -4px;
z-index: 2;
}
.box {
position: absolute;
left: 100px;
top: 100px;
width: 128px;
height: 128px;
background: rgba(59, 130, 246, 0.5);
border: 2px solid rgb(37, 99, 235);
will-change: transform;
}
.info {
position: absolute;
bottom: 8px;
left: 8px;
font-size: 14px;
color: #666;
}< /code>




< /code>
< /div>
< /div>
< /p>
Проблема: когда масштаб> 1, просто перемещение курсора приводит к тому, что элемент вызывает элемент смену позицию непреднамеренно. Я хочу, чтобы элемент масштабировал положением курсора только при изменении масштаба.
Цель состоит в>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ursor-posi