0

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

4

1 回答 1

1

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")
});
于 2020-10-19T22:08:49.910 回答