如何在Fabric.js中填充两个对象的交集？

Question

我正在使用 Fabric.js 创建一个简单的绘画应用程序。我在实现时遇到问题的功能之一是存储桶工具。

可以使用 Fabric.js 为对象填充颜色，canvas.item(0).fill = "red" 但是我希望能够填充两个对象 [A，B] 的交集 [C]。

有谁知道如何实现这一目标？我一直在寻找有关如何实现这一点的示例和教程，其中许多都指向“洪水填充”，但我认为它不能用 Fabric.js 来实现

任何帮助将不胜感激！

Answer 1

当您可以获得整个画布的像素化光栅对象时，应该可以实现洪水填充。但是，如果您想留在矢量世界中，则需要布尔运算来获取水桶悬停在其上方的所有形状的所有相交形状。之后，您只需设置该相交表面的背景颜色即可。

我不是 Fabricjs 专家，所以我不知道它是否支持其中任何一个。对于具有布尔运算的 javascript 绘图库，请查看此问题。