I have a KonvaJS application and I'm dealing with an issue using the scale option.
You can see the problem here: Issue example
I use the KonvaJS Line class to draw and it's working fine. But when I change the Stage scale then the problem comes up. It's like the cursor is in a different position.
I tried different solutions without luck.
Any ideas on how to solve this issue?
Thanks in advance.
You just need to adapt mouse position to stage transform. You can do this:
const pos = stage.getPointerPosition();
const stageTransform = stage.getAbsoluteTransform().copy();
const position = stageTransform.invert().point(pos);
layer.add(new Konva.Circle({
x: position.x,
y: position.y,
radius: 10,
fill: 'red'
}));