用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 。