javascript 使用鼠标拖动旋转元素

sczxawaw 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(246)

我正在做一个Map功能，它应该允许用户用鼠标拖动旋转Map。
这是我的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/ .
正如你所看到的，它正在工作。问题是，如果你开始在左上角拖动，元素会旋转（在这之后，它看起来像它应该工作的那样）。理想情况下，我希望它从我用鼠标选择的点开始旋转，而不是在开始时让它四处滑动。
我错过了什么？
我很乐意听听你的想法。
谢谢

JavaScript

来源：https://stackoverflow.com/questions/64877275/rotate-element-with-mouse-drag

1条答案

按热度按时间

8cdiaqws1#

所以这是我的解决方案后，一些拨弄。
在拖动开始时，我保存元素的原始旋转Angular 。检查this link以了解如何解析它。我还保存了我们拖动的原点。一旦我们开始移动，这将有助于计算拖动的方向。

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的操作
看起来效果不错。

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 使用鼠标拖动旋转元素

1条答案

相关问题

热门标签

最新问答