javascript - 如何合并 fabrcjs 中的触摸路径？

Question

我正在开发一个用于绘图的移动应用程序，当路径相互接触时我需要合并路径，但它们目前彼此重叠。还有其他方法吗？

在下图中，我想要实现右侧，而不是左侧。

我该怎么办？下面是我的fabric.js 代码。

 setCanvasBackground(imagePath) {
      fabric.Image.fromURL(imagePath, (img)=>  {
         this.scaleAndPositionImage(img);
      });
      this.canvas.freeDrawingBrush.color = this.brushColors[0];
      this.canvas.on('path:created', (opt) => {
        // opt.path.globalCompositeOperation = 'lighter';
        this.canvas.renderAll(this.canvas);
      });
  }

Answer 1

Fabric.js 目前没有用于路径 bool 操作(如加/减)的内置功能。<​​/p>

https://github.com/fabricjs/fabric.js/issues/4977

然而，paper.js 库中内置了对 bool 运算的出色支持，因此您可以依靠 paper.js 进行路径计算，然后将新的路径数据带回到结构 Canvas 中。

http://paperjs.org/examples/boolean-operations/