fabric.js: Fill free drawing path as user is drawing (lasso tool)

Question

In fabric.js, we can draw free hand paths (http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing)

(Yes I've already seen this post and it doesn't solve or reference my problem)

What I'm trying to achieve is showing the fill as the user is drawing. Not just when the path is created (as seen in the demo below) which it also sets that fill for all the other paths drawn which I don't want. I ONLY want the fill to apply only to the path that's being drawn and show the fill as it's being drawn.

My question is, "How can I showing the fill as the user is drawing using free drawing in 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

我解决了我的问题。

解决方案的简要简化解释：
我创建了一个名为 LassoBrush 的新类（与 PencilBrush 类非常相似，除了描边宽度值为 0，描边颜色 = null 和填充，我从 null 更改为 this.color （用户设置的任何颜色） ）然后像这样调用..

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

对于任何想知道如何解决这个问题的人......

您正在寻找的是定制画笔。
看一下PencilBrush 和 BaseBrush。
扩展 PencilBrush 并向上下文中的 closePath 添加一些逻辑是相对直接的。

要点：
当用户绘图时，画笔负责渲染您所看到的内容。画笔使用顶部上下文，底部上下文由fabric.Canvas使用。绘制完成后，将创建一条路径并将其添加到画布中。
顶部上下文已清除。
这样做是出于性能原因。出于这个原因，顶级上下文就存在了。顺便说一句，EraserBrush正是我在这里所描述的，但更加复杂。