LeaferJS 画布缩放与画笔坐标转换问题解析

在 LeaferJS 项目中，开发者经常会遇到一个典型问题：当画布视图缩放后，画笔绘制的线条位置与实际鼠标位置出现偏差。这种现象通常是由于视图变换后坐标系统未正确转换导致的。

问题现象

当用户缩放画布视图后，使用画笔工具绘制时，线条出现的位置与鼠标实际位置不符。具体表现为：

1. 视图缩小后，画笔线条出现在与预期不同的位置
2. 线条坐标似乎没有跟随画布的缩放比例进行调整
3. 绘制路径与实际鼠标移动轨迹不一致

核心原因

这个问题的根本原因在于视图变换（如缩放、平移）后，鼠标事件的坐标仍然是基于屏幕坐标系的，而画笔绘制需要的是基于画布内部坐标系的坐标。两者之间需要进行正确的转换。

解决方案

要解决这个问题，关键在于正确处理坐标转换。LeaferJS 提供了完善的坐标转换机制，开发者需要：

1. 获取鼠标事件的原始坐标
2. 将屏幕坐标转换为画布内部坐标
3. 使用转换后的坐标进行绘制

实现代码示例

const startDrawing = (e) => {
  // 获取转换后的画布内部坐标
  const { x, y } = e.getInnerPoint()
  
  starting.x = x
  starting.y = y
  
  pen.value = new Pen({
    id: "brushTool",
    x,
    y,
  });
  
  pen.value.setStyle({
    stroke: 'red',
    strokeWidth: 10,
    strokeCap: "round",
    strokeJoin: "round",
  });
  
  app.value.tree.add(pen.value)
}

const drawIng = (e) => {
  // 获取转换后的画布内部坐标
  const { x, y } = e.getInnerPoint()
  const [width, height] = [x - starting.x, y - starting.y];
  
  pen.value.lineTo(width, height);
};

关键点解析

1. getInnerPoint() 方法：这是 LeaferJS 提供的一个实用方法，它会自动将屏幕坐标转换为当前画布的内部坐标，考虑了所有视图变换（缩放、平移等）

2. 坐标系统一致性：确保所有绘图操作都使用同一坐标系统，避免混合使用屏幕坐标和画布坐标

3. 视图状态感知：绘图工具需要感知当前的视图状态（缩放比例、偏移量等）

进阶建议

1. 性能优化：对于复杂的绘图操作，可以考虑批量处理坐标点，减少频繁的坐标转换调用

2. 多设备适配：考虑不同设备的DPI差异，确保在高分辨率设备上也能准确定位

3. 撤销/重做功能：实现绘图历史记录时，存储的应该是画布内部坐标，而非屏幕坐标

通过正确处理坐标转换，可以确保在各种视图变换状态下，绘图工具都能准确地跟随用户操作，提供流畅自然的绘图体验。