fabric.js：在用户绘图时填充自由绘图路径（套索工具）

Question

在fabric.js中，我们可以自由绘制路径(http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing)

（是的，我已经看到 post 但它没有解决或引用我的问题）

我想要实现的是在用户绘图时显示填充。不仅在创建路径时（如下面的演示所示），它还设置了填充我不想要的所有其他绘制路径。我只希望填充仅应用于正在绘制的路径并在绘制时显示填充。

我的问题是，“在 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 的新 class（与 PencilBrush class 非常相似，除了笔划宽度值为 0，笔划颜色 = null 并且填充我从 null 更改为 this.color（无论是什么用户设置）然后像这样调用..

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

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

您要找的是自定义画笔。
看看PencilBrush and BaseBrush.
它相对直接地扩展了 PencilBrush 并在上下文中向 closePath 添加了一些逻辑。

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

fabric.js：在用户绘图时填充自由绘图路径（套索工具）

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

javascript

fabricjs

fabricjs2