带有hammerjs多点触控旋转的kineticJs形状

Question

尝试将hammerJs 多点触控合并到我当前的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

此示例适用于 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。

Answer 2

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

查看getting started guide。 "捏合和旋转手势默认禁用，通过"启用它

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

这是一个更新的 jsfiddle。不过我无法测试它，我无法做出旋转手势，希望它可以工作。

编辑：

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

我已经设置了一个重构的jsfiddle，显示了我提到的想法，但是我无法使用动力学来旋转形状，我希望这能解决你的问题，我再次无法为@987654327 测试它@ 但它适用于 tap。