如何将旋转和点击事件侦听器附加到 konvajs 中的形状？

Question

我正在按照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/

Answer 1

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

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

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

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

这也将部分解决 cmets 中提到的双重 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")
});