javascript - 织物.js : Fill free drawing path as user is drawing (lasso tool)

Question

在fabric.js 中，我们可以绘制自由路径(http://fabricjs.com/freedrawing)(http://fabricjs.com/fabric-intro-part-4#free_drawing)
(是的，我已经看过 this 帖子，但它并没有解决或引用我的问题)
我想要实现的是在用户绘制时显示填充。不仅在创建路径时(如下面的演示所示)，它还为我不想要的所有其他绘制路径设置填充。我只希望填充仅应用于正在绘制的路径并在绘制时显示填充。
我的问题是，“如何在用户使用 fabric.js 中的免费绘图进行绘图时显示填充？”

var canvas = new fabric.Canvas('c', {
  isDrawingMode: true
});
 
 canvas.on('path:created', function() {
  canvas.getObjects().forEach(o => {
    o.fill = '#000'
  });
  canvas.renderAll();
});

canvas {
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>

<canvas id="c" width="600" height="400"></canvas>

Answer 1

I solved my problem .
解决方案的简要简化说明:
我创建了一个名为 LassoBrush 的新类(与 PencilBrush 类非常相似，除了笔画宽度值为 0，笔画颜色 = null 和填充我从 null 更改为 this.color(用户设置的任何内容)，然后像这样调用..

  canvas.freeDrawingBrush = new fabric.LassoBrush(canvas);
  canvas.freeDrawingBrush.color = '#000';
  canvas.isDrawingMode = true;

对于任何想知道如何解决这个问题的人......
您正在寻找的是自定义画笔。
看看 PencilBrush and BaseBrush .
它相对直接地扩展 PencilBrush 并在上下文中为 closePath 添加一些逻辑。
要点:
当用户绘制时，画笔负责渲染您看到的内容。
画笔使用顶部上下文，底部上下文由 fabric.Canvas 使用。
绘制完成后，将创建路径并将其添加到 Canvas 。
顶部上下文被清除。
这样做是出于性能原因。出于这个原因，存在顶级上下文。
顺便说一句， EraserBrush正是我在这里描述的，但更加复杂。