Kineticjs：用兩個手指觸摸手勢旋轉圖像？

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

可以爲手勢事件使用HammerJS與KineticJS（從動力學V5.1.0）：

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