как прикрепить слушателей событий поворота и касания к фигурам в konvajs?

Question

Я работал над включением жестов поворота в свое приложение, следуя руководству по https://konvajs.org/docs/sandbox/Gestures.html. Но в своем приложении я также прикрепил прослушиватель событий "касания", поэтому всякий раз, когда я пытался повернуть фигуру с помощью жеста, событие "касание" также генерируется, а при записи формы на один раз событие "касания" генерируется дважды. Есть ли способ, чтобы я мог предотвратить это, означает, что при вращении с помощью жеста поворота двумя пальцами событие "касание" не должно генерироваться? есть ли способ использовать stopImmediatePropagation() в konvajs?

  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ничего не знает о событиях поворота. Даже если вы вращаете фигуру, для конвы все равно кажется, что вы нажимаете на нее (у нее touchdown и touchmove События).

Но hammerjs обрабатывает такие ситуации автоматически. Поэтому вместо прослушивания событий на узле Konva вы можете прослушивать их в экземпляре Hammertime:

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")
});