根据触摸事件旋转元素-Java 学习之路

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

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

我只需要将触摸部件合并到一起 .

任何人之前做过这个或者可以解决一些问题？

2 回答

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

并非所有支持触控的浏览器都会在 event 对象上提供 rotate 属性，因此您可以通过数学运算来计算出该值 .

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)":
});

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

回复于 2024-05-05T03:25:03+08:00

0
您将需要查看 canvas 上实现 MouseDown ， MouseUp 和 MouseMove 事件侦听器，因为"touch"与触摸屏的交互只不过是花哨的鼠标移动 .

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来完成大部分工作，因为它有许多更简洁的事件处理方法 .
回复于 2024-05-05T03:25:03+08:00

根据触摸事件旋转元素

2 回答

相关问题