用HammerJS多點觸控旋轉的dynamicJs形狀

Question

嘗試將HamsJs的多點觸控綁定到當前的dynamicJs 5.1代碼中，找到了提示，但是我的拼圖塊根本不旋轉，並且我的拼圖塊是動力學形狀，為什么？

            var startRotate = 0;
            var hammertime = Hammer(piecesArray[i][j].shape);
            hammertime.on("transformstart", function(e) {
            startRotate = piecesArray[i][j].shape.rotation();
            }).on("transformstart", function(e) {
               piecesArray[i][j].shape.rotation(startRotate + e.gesture.rotation);
               layer.draw();
            }); 

我的小提琴： http : //jsfiddle.net/e70n2693/20/

Answer 1

使用最新版本的Hammer.js v2.0。

查看入門指南 。 “默認情況下，禁用捏和旋轉手勢，請啟用它”

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

這是更新的 jsfiddle 。 我無法測試，但無法做出旋轉手勢，希望它能正常工作。

編輯 ：

問題是Hammer(imageObj, options); api希望imageObj是html元素，在您的情況下，它是動態形狀。 我不知道您是否可以獲得每種動力學形狀的html元素。 如果沒有，您可以在.kinetic-container canvas元素上收聽旋轉。 因此，旋轉手勢是在整個畫布上執行的，因此您必須跟蹤最后觸摸的動力學形狀，才能旋轉它。

我已經設置了一個重構的jsfiddle ，顯示了我提到的想法，但是我無法通過動力學來旋轉形狀，我希望這可以解決您的問題，同樣我無法對其進行rotate測試，但可以用於tap 。

Answer 2

本示例適用於KineticJS v5.1.0和HammerJS v1.0.7

您必須將Hammer實例應用於Kinetic.Node實例，而不是Image對象。

var hammertime = Hammer(piecesArray[i][j].shape);
hammertime.on("transformstart", function(e) {
    this.startRatation = this.rotation();
}).on("transform", function(e) {
    this.rotation((this.startRatation || 0) + e.gesture.rotation);
    this.getLayer().draw();
});

http://jsfiddle.net/e70n2693/30/

注意：我認為最好通過offset設置形狀的另一個center 。