Fabric.js调整画笔宽度后绘制偏移问题求助

API 探路者

2026-7-18

解决Fabric.js调整画笔宽度后绘制路径偏移的问题

原因分析

这个问题源于Fabric.js的freeDrawingBrush在修改宽度后，未正确更新画笔的偏移计算原点。初始宽度下的原点校准逻辑，在宽度变更后没有同步调整，导致绘制完成后路径位置出现偏差。

具体解决方法

方法1：修改宽度时重置画笔原点与样式

设置新画笔宽度后，手动强制更新画笔的原点设置和样式计算，确保偏移逻辑同步：

function resizeBrush(newWidth) {
  canvas.freeDrawingBrush.width = newWidth;
  // 重置画笔原点为中心，匹配宽度变更后的绘制基准
  canvas.freeDrawingBrush.originX = 'center';
  canvas.freeDrawingBrush.originY = 'center';
  // 强制刷新画笔样式计算
  canvas.freeDrawingBrush._setBrushStyles();
}

方法2：绘制完成后修正路径偏移

如果方法1无效，可通过监听路径创建事件，手动修正偏移量：

canvas.on('path:created', function(e) {
  const path = e.path;
  const currentWidth = canvas.freeDrawingBrush.width;
  const initialWidth = 10; // 替换为你的初始画笔宽度
  // 计算偏移补偿值：宽度差的一半，抵消向左上的偏移
  const offset = (currentWidth - initialWidth) / 2;
  path.set({
    left: path.left + offset,
    top: path.top + offset
  });
  canvas.renderAll();
});