Issues when drawing using scale

问题

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.

回答1:

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

Demo: http://jsbin.com/gaqepodivu/1/edit?js,output

来源：https://stackoverflow.com/questions/52615553/issues-when-drawing-using-scale