使用比例绘图时的问题

Question

我有一个 KonvaJS 应用程序，我正在使用缩放选项处理问题。

您可以在这里看到问题：

我使用 KonvaJS Line 类进行绘制，并且工作正常。但是当我改变舞台比例时，问题就出现了。就像光标处于不同的位置。

我尝试了不同的解决方案，但没有运气。

关于如何解决这个问题有什么想法吗？

提前致谢。

Answer 1

您只需调整鼠标位置以适应舞台变换。你可以这样做：

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

演示：http://jsbin.com/gaqepodivu/1/edit?js,output

Answer 2

要根据舞台比例调整鼠标位置，应将鼠标坐标除以比例因子。如果scaleX和scaleY的比例因子都是4，那么校正后的坐标将是：

const CorrectedX = 位置.x / 4; const CorrectedY = 位置.y / 4;

此计算假设position.x和position.y代表当前鼠标坐标。根据scaleX和scaleY的实际比例因子调整分割因子。