javascript - 根据触摸事件旋转元素

Question

我正在寻找一些指导和/或示例来创建一种触摸对象并旋转它的方法。假设我们有一个圆圈的图像，我希望能够触摸一个点，围绕该圆圈拖动并在我的手指移动时操纵它旋转。

我找到了很多关于旋转的教程：

我只需要合并触摸部分。

任何人以前做过这个或可以阐明一些？

score 2 · Accepted Answer

您可以简单地将触摸的旋转映射到元素的transform: rotate(Ndeg)CSS。

并非所有支持触摸的浏览器都提供对象的rotate属性event，因此您可以通过数学计算得出值。

document
.getElementById("some-element")
.addEventListener("touchmove", function(event) {
    var rotation = event.rotation;

    // This isn't a fun browser!
    if ( ! rotation) {
         rotation = Math.arctan2(event.touches[0].pageY - event.touches[1].pageY,
               event.touches[0].pageX - event.touches[1].pageX) * 180 / Math.PI;
    }

    // Take into account vendor prefixes, which I haven't done.
    this.style.transform = "rotate(" + rotation + "deg)":
});

如果您希望用户能够多次旋转它，您还需要存储先前的旋转值并根据它调整这个值。:)

score 1 · Accepted Answer

在鼠标/触摸拖动时旋转元素

这是一个关于如何拖动旋转元素的完整示例：

存储起始角度，即坐标处的相对角度减去当前角度。以 mousemove XY 坐标角度从中心减去起始角度
的差值 (delta) 旋转。

const rotate = (EL) => {
  
  let ang = 0; // All angles are expressed in radians
  let angStart = 0;
  let isStart = false;

  const angXY = (ev) => {
    const bcr = EL.getBoundingClientRect();
    const radius = bcr.width / 2;
    const { clientX, clientY } = ev.touches ? ev.touches[0] : ev;
    const y = clientY - bcr.top - radius;  // y from center
    const x = clientX - bcr.left - radius; // x from center
    return Math.atan2(y, x);
  };

  const mousedown = (ev) => {
    isStart = true;
    angStart = angXY(ev) - ang;
  };

  const mousemove = (ev) => {
    if (!isStart) return;
    ev.preventDefault();
    ang = angXY(ev) - angStart;
    EL.style.transform = `rotateZ(${ang}rad)`;
  };

  const mouseup = () => {
    isStart = false; 
  };

  EL.addEventListener("mousedown", mousedown);
  document.addEventListener("mousemove", mousemove);
  document.addEventListener("mouseup", mouseup);
};

document.querySelectorAll(".rotate").forEach(rotate);

.rotate {
  border-radius: 50%;
  width: 180px;
  cursor: ns-resize;
}

<img class="rotate" src="https://www.gravatar.com/avatar/1771ce957b38fbb7f9bb01f58b89fd3f?s=328&d=identicon&r=PG" alt="Wheel image">
<img class="rotate" src="https://i.stack.imgur.com/qCWYU.jpg?s=328&g=1" alt="Wheel image">

score 0 · Accepted Answer

您将希望查看在您的上实现MouseDown、MouseUp和MouseMove事件侦听canvas器，因为与触摸屏的“触摸”交互只不过是一种花哨的鼠标移动。

MouseDown并且MouseUp对于查找用户是否正在拖动非常有用canvas。MouseMove是您需要放置旋转处理逻辑的地方。剩下的就是实现了：

/* Borrowed from http://www.marceloduende.com/blog/?p=25 */
function addCrossBrowseEventListener(myElement, myEvent, myFunction) {  
    if(myElement.addEventListener){  
        myElement.addEventListener(myEvent, myFunction, false);  
        return true;  
    } else {  
        myElement.attachEvent('on'+myEvent, myFunction);  
        return true;  
}

myElement画布的 DOM 元素在哪里，myEvent要为其添加侦听器的事件的名称，以及myFunction负责处理事件逻辑的函数的名称。

或者，您可以使用 jQuery 来完成大部分工作，因为它有许多更简洁的事件处理方法。

javascript - 根据触摸事件旋转元素

3 回答 3

在鼠标/触摸拖动时旋转元素

Related

Reference