fabric.js：在用戶繪圖時填充自由繪圖路徑（套索工具）

Question

賞金將在 5 天后到期。 此問題的答案有資格獲得+100聲望獎勵。 Michael Schwartz想引起更多人對這個問題的關注。

在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>

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正是我在這里描述的，但更加復雜。