时间戳

首页 > 解决方案 > fabric.js：在用户绘图时填充自由绘图路径（套索工具）

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

问题描述

在fabric.js中，我们可以绘制徒手路径（http://fabricjs.com/freedrawing）（http://fabricjs.com/fabric-intro-part-4#free_drawing）

（是的，我已经看过这篇文章，但它并没有解决或引用我的问题）

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

我的问题是，“如何在用户使用 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>

标签： javascriptfabricjsfabricjs2

解决方案

我解决了我的问题。

解决方案的简要简化说明：
我创建了一个名为 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正是我在这里所描述的，但更加复杂。

推荐阅读