通过鼠标拖动旋转元素

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

的操作

看起来效果很好。

Answer 2

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)`;
  }
});

你输入“90”的度数应该是“45”