根据触摸事件旋转元素

Question

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

我发现很多关于旋转的教程：

• http://www.williammalone.com/briefs/how-to-rotate-html5-canvas-around-center/
• http://www.switchonthecode.com/tutorials/html-5-canvas-tutorial-rotation

我只需要合并触摸部分。

有人以前做过这个或者可以透露一些信息吗？

Answer 1

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