Question

尝试将多点触控我的当前kineticJs 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。

查看getting started guide。＆＃34;默认情况下禁用捏合和旋转手势，通过＆＃34;

启用它

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

这是一个更新的 ~~jsfiddle~~ 。我无法测试它，我无法做出旋转手势，希望它有效。

修改：

问题是，Hammer(imageObj, options); api期望imageObj是一个html元素，在你的情况下，它是一个动态形状。我不知道你是否可以获得每种动力学形状的html元素。如果没有，您可以在.kinetic-container canvas元素上听取旋转。因此，旋转手势在整个画布上执行，您必须跟踪最后触摸的动态形状，以便您可以旋转它。

我已经设置了重构的jsfiddle，显示了我提到的想法，但是我无法使用动能来旋转形状，我希望这会解决您的问题，我再也无法＃ 39; t为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/

注意：我认为最好通过center为形状设置另一个offset。

kineticJs形状与hammerjs多点触控旋转

2 个答案: