用鼠标拖动旋转元素

Question

我正在开发一个地图功能，它应该允许用户用鼠标拖动和旋转地图。

这是我的mousedown事件的代码：

rotate.addEventListener('mousemove', (e) => {
const elem = e.target;
if (mouseDown) {
const boundingRect = elem.getBoundingClientRect();
const center_x = boundingRect.left + boundingRect.width / 2;
const center_y = boundingRect.top + boundingRect.height / 2;
const mouse_x = e.pageX;
const mouse_y = e.pageY;
const radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
const degree = radians * (180 / Math.PI) * -1 + 90;
rotate.style.transform = `rotate(${degree}deg)`;
}
});

下面是这个例子的小提琴：https://jsfiddle.net/8uexv2cp/3/.

正如你所看到的，这是一种工作。问题是，如果你开始在左上角拖动，元素就会旋转(发生这种情况后，它似乎正常工作(。理想情况下，我希望它只是从我用鼠标选择的点开始旋转，而不是让它在一开始就弹来弹去。

我在这里错过了什么？

我很高兴听到你对此的看法。

感谢

Answer 1

所以这是我经过一些修改后的解决方案。

在拖动开始时，我保存到元素的原始旋转角度。查看此链接了解如何解析它。我还存储了原始点，我们从中拖动。一旦我们开始移动，这将有助于计算拖动的方向。

let currentDegree: number = 0;
let center: {x: number, y: number}; 
function rotationStart(event: MouseEvent) {
currentDegree = getCurrentRotation(element);
center = {x: event.pageX, y: event.pageY}
}

现在是施展移动魔法的时候了。我计算运动的方向，并将其存储在弧度中。这很方便，因为正值意味着我必须增加度数(顺时针旋转(，负值意味着减少度数(逆时针旋转(。我只是简单地将新的度数应用于元素，并存储新的中心元素，以便下次重新计算向量。

function rotation(event: MouseEvent) {
let radians = Math.atan2(event.pageX - center.x, event.pageY - center.y);
if (radians > 0) {
++currentDegree;
} else {
--currentDegree;
} 
el.style.transform = `rotate(${currentDegree}deg)`;
center = {x: pageX, y: pageY};
}

您可以不仅通过执行++currentDegree，还可以执行类似currentDegree=currentDegree+3的操作来控制旋转速度

看起来工作得很好。