i'm using MouseEvent to click on Konva stage. The user does not click on the Konva's canvas, directly, instead, the user clicks on something else and that click is translated to Konva canvas based on some calculations.
I have a 3D platform written in Babylonjs that uses Konva's canvas as the dynamic texture. The texture is then applied to the mesh. When there is a click on the mesh, it will tell me which area (x,y) of the texture was clicked. Now I will have to programmatically trigger a click on the texture (Konva's canvas) so that Konva's shape gets selected and they can drag it around the texture and this will be updated real-time on the mesh (3d).
The problem is that my custom mouse event is not recognized by
stage.on('click'.
Please check the below example.
https://jsbin.com/sayiwajega/1/edit?html,js,console,output
Working solution using fabricjs.
https://www.babylonjs-playground.com/#9U086#238
I know that there is an
this.stage.fire('click', { posX, posY });
But the limitation here is that you cant pass an actual click or a drag event. as a result, you cant just transfer the action from the 3d Canvas to Konva's canvas.
Konva doesn't listen to click event on the canvas to trigger its own click event.
Instead, it is listening to
So to replicate most of Konva events you need to proxy these events into container.
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);
}