如何将rotva和tap事件侦听器都附加到konvajs中的形状上？

问题描述

我正在按照https://konvajs.org/docs/sandbox/Gestures.html上给出的教程，在我的应用程序中包括旋转手势。但是在我的应用程序中，我还附加了“ tap”事件侦听器，因此，每当我尝试使用手势旋转形状时，都会同时发出“ tap”事件，并在一次敲击形状时发出“ tap”事件两次。 有什么方法可以防止在通过两根手指旋转手势进行旋转的同时发生“敲击”事件的现象吗？ 有什么办法可以在konvajs中使用stopImmediatePropagation（）？

  group.on('tap',function(ev) {
    console.log("tap event")
  });

  group.on('rotatestart',function(ev) {
    oldRotation = ev.evt.gesture.rotation;
    startScale = rect.scaleX();
    group.stopDrag();
    group.draggable(false);
    text.text('rotating...');
  });

  group.on('rotate',function(ev) {
    var delta = oldRotation - ev.evt.gesture.rotation;
    group.rotate(-delta);
    oldRotation = ev.evt.gesture.rotation;
    group.scaleX(startScale * ev.evt.gesture.scale);
    group.scaleY(startScale * ev.evt.gesture.scale);
    layer.batchDraw();
  });

  group.on('rotateend rotatecancel',function(ev) {
    text.text(defaultText);
    group.draggable(true);
    layer.batchDraw();
  });

https://jsfiddle.net/pudio/z68nc5p3/2/

解决方法

tap事件是“本地” konva事件。这意味着Konva默认支持。因此Konva对旋转事件一无所知。即使旋转形状，对于konva来说，它仍然看起来像是在点击它（它具有touchdown和touchmove个事件）。

但是Hammerjs会自动处理这种情况。因此，您可以在Hammertime实例上监听事件，而不是在Konva节点上监听事件：

hammertime.on('tap',function(ev) {
  console.log("tap event")
});

演示：https://jsfiddle.net/hj84aLys/

这还将部分解决注释中提到的双重tap触发器问题。

另一个解决方法是，如果最近发生旋转，则仅签入tap事件。如果不是，那么您可以继续：

var rotated = false;
group.on('touchstart',function(ev) {
  rotated = false;
});

group.on('rotate',function(ev) {
  rotated = true;
});

group.on('tap',function(ev) {
  // do nothing on rotate.
  if (rotated) {
     return;
  }
  console.log("tap event")
});