Question

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

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

我只需要将触控部件合并。

以前做过这件事的人还是可以解决这个问题？

Answer 1

您可以简单地将触摸的旋转映射到元素的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)":
});

如果您希望用户能够多次旋转它，您还需要存储之前的旋转值并根据它调整此旋转值。：）

Answer 2

您需要查看在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来完成大部分工作，因为它有许多更简洁的事件处理方法。

Answer 3

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

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

存储起始角度，即坐标处的相对角度减去当前角度。
旋转鼠标移动 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">

根据触摸事件旋转元素

3 个答案:

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