fabric.js自由绘制路径时如何实时显示当前路径填充效果（套索工具）

要实现自由绘制过程中实时显示当前路径填充，核心是直接操作绘制过程中临时存在的路径对象，不需要等绘制完成的回调。

关键调整点 #

• 不要在path:created事件中遍历所有对象设置填充，仅对当前新创建的路径生效即可，避免修改历史绘制内容
• 监听画布的mouse:move事件，判断当前处于绘制状态时，直接给临时路径对象设置填充属性，实时渲染

完整可运行代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<canvas id="c" width="600" height="400"></canvas>

CSS

canvas {
  border: 1px solid #ccc;
}

JavaScript

var canvas = new fabric.Canvas('c', {
  isDrawingMode: true
});

// 配置自由绘制的填充色
const drawFillColor = '#000';

// 监听鼠标移动事件，绘制过程中实时设置当前路径填充
canvas.on('mouse:move', function() {
  // 判断是否正在绘制路径
  if (canvas.isDrawingMode && canvas.freeDrawingBrush._path) {
    canvas.freeDrawingBrush._path.fill = drawFillColor;
    canvas.renderAll();
  }
});

// 绘制完成后仅给当前新生成的路径设置填充，不修改历史内容
canvas.on('path:created', function(e) {
  e.path.fill = drawFillColor;
  canvas.renderAll();
});

以上方案只会给当前正在绘制的路径应用填充效果，不会影响已经绘制完成的其他路径，绘制过程中移动鼠标就能实时看到填充效果，不需要等绘制结束松开鼠标才显示。

内容的提问来源于stack exchange，提问作者Michael Schwartz