터치 이벤트를 기반으로 요소 회전

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

당신은 터치 스크린이있는 "터치"상호 작용을하기 때문에, 당신의 canvas에 MouseDown, MouseUp 및 MouseMove 이벤트 리스너를 구현보고 싶을 것

는 멋진 마우스 움직임에 불과하다.

MouseDown 및 MouseUp은 사용자가 canvas을 통해 드래그하는지 여부를 찾는 데 유용합니다. MouseMove은 회전 처리 로직을 배치해야하는 곳입니다.

myElement는 캔버스의 DOM 요소입니다

 
/* 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; 
} 

, myEvent이 청취자를 추가 할 수있는 이벤트의 이름이며, myFunction는 논리에 대한 역할을 수행합니다 함수의 이름입니다 나머지는 구현 그 사건.

또는 jQuery를 사용하면 대부분의 작업을 처리 할 수 ​​있습니다. 이벤트 처리를위한 여러 가지 더 깨끗한 메소드가 있으므로 사용할 수 있습니다.

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

당신은 또한 사용자가 한 번 이상 더 회전 할 수 있도록하려면 해제를 기반으로이 일을 이전 회전 값을 저장하고 조정해야합니다. :)