키 네틱 : 두 손가락 터치 제스처로 이미지 회전?

Question

모바일 장치에서 손가락 두 개로 이미지를 회전하려면 Kineticjs을 사용하고 싶습니다.

이미지 표시는 here입니다. 어느 기본적으로 이것이다 :

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
<script defer="defer"> 
    var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 
    var layer = new Kinetic.Layer(); 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
    var yoda = new Kinetic.Image({ 
     x: 200, 
     y: 50, 
     image: imageObj, 
     width: 106, 
     height: 118 
    }); 

    // add the shape to the layer 
    layer.add(yoda); 

    // add the layer to the stage 
    stage.add(layer); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; 

</script> 

이 터치 이벤트가 나는 이미지의 중심을 두 손가락 터치 제스처로 이미지를 회전 할 수있는 방법

imageObj.on('touchmove', function() { 
     // do something 
}); 

수행 할 수 있습니다 추가?

Answer 1

당신은 제스처 이벤트 (운동 v5.1.0에서) KineticJS와 HammerJS를 사용할 수 있습니다

var startRotate = 0; 
    var hammertime = Hammer(image); 
    hammertime.on("transformstart", function(e) { 
    startRotate = image.rotation(); 
    }).on("transform", function(e) { 
    image.rotation(startRotate + e.gesture.rotation); 
    layer.draw(); 
    }); 

Demo