Блог

Я работал над включением жестов поворота в свое приложение, следуя руководству, приведенному на https://konvajs.org/docs/sandbox/Gestures.html . Но в моем приложении я также подключил прослушиватель событий ‘tap’, поэтому всякий раз, когда я пытался повернуть фигуру с помощью жеста, также генерируется событие ‘tap’, и при записи фигуры на один раз событие ‘tap’ генерируется дважды. Есть ли какой-либо способ, чтобы я мог предотвратить это, означает, что при вращении с помощью жеста поворота 2 пальца событие ‘tap’ не должно генерироваться? есть ли какой-либо способ использовать 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/

tap событие является «родным» событием konva. Это означает Konva , что поддерживает его по умолчанию. Так 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")
});