kineticJs shape with hammerjs multitouch rotation

试图将hammerJs多点触控融入到我目前的kineticJs 5.1代码中，找到了技巧，但是我的拼图根本不旋转，而且我的棋子是动态形状，为什么？kineticJs shape with hammerjs multitouch rotation

  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/

来源

2014-09-01 user3709279

这个例子是KineticJS V5.1.0和HammerJS v1.0.7

你必须对Kinetic.Node实例应用Hammer实例，而不是在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的形状。

来源

2014-09-02 10:51:40 lavrton

谢谢谢谢:)你是什么意思由另一个偏移中心？我可以设置2次偏移？ – user3709279 2014-09-03 06:05:50

在我的示例http://jsfiddle.net/e70n2693/30/形状相对于其中一个边缘旋转时，我认为围绕中心旋转会更好。最简单的方法 - 配置'offset'属性。 – lavrton 2014-09-03 06:12:33

目前，我在我的代码中添加了预览图片，我现在可以旋转我的拼图，但问题是预览图片的敏感度太敏感了，有什么方法可以解决这个问题？这里是jsfiddle：http://jsfiddle.net/e70n2693/34/ – user3709279 2014-09-08 03:05:36

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

查看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，显示了我提到的想法，但是我无法设法使用动力学来旋转形状，我希望这会解决您的问题，再次我无法测试它的rotate，但它适用于tap。

来源

2014-09-01 03:37:01 user3995789

不行，它不工作，任何其他的想法？我实际上不需要捏。谢谢:) – user3709279 2014-09-01 03:50:40

@ user3709279请参阅我的编辑。 – user3995789 2014-09-01 05:19:24

对不起，我试过了，它也不适用于旋转，我不知道我还能做什么，以及它是什么意思，它适用于水龙头？谢谢:) – user3709279 2014-09-01 07:48:30

kineticJs shape with hammerjs multitouch rotation

回答

相关问题