freeDrawingBrush固定x或y绘制直线时旧线粘连问题求助

问题根因 #

你自定义的鼠标抬起逻辑跳过了Fabric.js内置的路径归档、画笔缓存清空流程，freeDrawingBrush内部维护的路径点数组没有被重置，下次开启绘制模式时就会把旧路径点和新路径点拼接在一起。

修复代码 #

1. 基础绘制配置 #

canvas.isDrawingMode = 1;
canvas.freeDrawingBrush.color = "purple";
canvas.freeDrawingBrush.width = 10; 
const fixedX = 100; // 可自行修改需要固定的x坐标

2. 重写鼠标移动逻辑（保留框架原有处理流程） #

不要直接替换原有方法，先绑定原方法引用，修改坐标后再调用原逻辑，避免手动处理路径创建的底层细节：

const originalMouseMove = canvas._onMouseMoveInDrawingMode.bind(canvas);
canvas._onMouseMoveInDrawingMode = function (e) {
  const pointer = canvas.getPointer(e);
  pointer.x = fixedX;
  originalMouseMove(e, pointer);
}

3. 重写鼠标抬起逻辑（先执行框架内置清空逻辑再做自定义操作） #

const originalMouseUp = canvas._onMouseUpInDrawingMode.bind(canvas);
canvas._onMouseUpInDrawingMode = function (e) {
  // 先调用原方法完成路径保存、缓存清空的内置流程
  originalMouseUp(e);
  // 自定义操作
  this._isCurrentlyDrawing = false;
  canvas.isDrawingMode = 0; // 如果不需要绘制完自动退出绘制模式可删除这行
}

可选兜底方案 #

如果仍出现路径拼接问题，每次开启绘制模式时手动清空画笔的路径点缓存即可：

// 开启绘制模式时执行
canvas.isDrawingMode = 1;
canvas.freeDrawingBrush._points = [];

内容的提问来源于stack exchange，提问作者upendra kolte