Konva 阶段不会在使用合成 MouseEvent 的点击时触发

Question

我正在使用 MouseEvent 点击 Konva 舞台。用户不会直接点击 Konva 的 canvas，而是用户点击其他内容，并且根据一些计算，该点击会转换为 Konva canvas。

我有一个用 Babylonjs 编写的 3D 平台，它使用 Konva 的 canvas 作为动态纹理。然后将纹理应用于网格。单击网格时，它会告诉我单击了纹理的哪个区域 (x,y)。现在，我将不得不以编程方式触发对纹理的单击（Konva 的 canvas），以便选择 Konva 的形状，然后他们可以将其拖动到纹理周围，这将在网格上实时更新 (3d)。

问题是

无法识别我的自定义鼠标事件

stage.on('click'.

请检查下面的例子。

https://jsbin.com/sayiwajega/1/edit?html,js,console,output

使用 fabricjs 的工作解决方案。

https://www.babylonjs-playground.com/#9U086#238

我知道有一个

this.stage.fire('click', { posX, posY });

但这里的限制是你不能传递实际的点击或拖动事件。因此，您不能将动作从 3d Canvas 转移到 Konva 的 canvas.

Answer 1

Konva 不监听 canvas 上的 click 事件来触发它自己的 click 事件。

相反，它正在收听

鼠标按下/触摸启动/指针按下
鼠标移动/触摸移动/指针移动
mouseup/touchend/pointerup

因此，要复制大部分 Konva 事件，您需要将这些事件代理到容器中。

stage.on('click',  (evt) => {
  console.log('you clicked on the circle!');
});


customMouseEvent = () =>  {
  const cb = document.getElementById('container').getElementsByTagName('canvas')[0];
  let evt = new MouseEvent("mousedown", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  cb.dispatchEvent(evt);
  evt = new MouseEvent("mouseup", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  cb.dispatchEvent(evt);
}

Konva 阶段不会在使用合成 MouseEvent 的点击时触发

Konva stage does not trigger on click using synthetic MouseEvent

mouseevent

konvajs