FabricJS：将带有 ClipPath 的手绘添加到对象组答案

【问题标题】：FabricJS: Adding Freehand with ClipPath to Object GroupFabricJS：将带有 ClipPath 的手绘添加到对象组
【发布时间】：2021-06-21 21:33:42
【问题描述】：

我正在使用 Fabricjs，我想在一个圆圈内绘制并将路径限制在圆圈内。这包括组的选择区域。

**更新：似乎解决了第一点 http://jsfiddle.net/42snph1d/14/

但是，选择太大。无论如何要减少它，所以它是圆的一侧而不是路径？**

是否可以截断 PATH 以仅包含圆内的点？

http://jsfiddle.net/42snph1d/12/

    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    canvas.isDrawingMode= 1;
    canvas.freeDrawingBrush.color = "purple";
    canvas.freeDrawingBrush.width = 10;
    var circle = new fabric.Circle({ radius: 50, top: 50, left: 50, absolutePositioned:true })
    var group = new fabric.Group([circle]);
    canvas.add(group)
    canvas.renderAll();

    canvas.on("path:created", (e) => {
      var clipPath = new fabric.Circle({ radius: 50, top: 50, left: 50, absolutePositioned:true });
      var path = e.path;
      path.set({selectable:false})
      path.clipPath = clipPath;
      group.addWithUpdate(path)
    });

我在移动对象时看到了奇怪的人工制品。

在画布中移动时可以看到手绘图

组选择非常大，包括整个手绘图（甚至是剪裁的部分）。我希望选择区域只包含圆圈。

这里有什么明显的修复吗？

有什么建议吗？

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

您可以使用globalCompositeOperation 来创建解决该边界框之外的问题

在博文中的 Clip Canvas 中查看此内容 https://alimozdemir.com/posts/fabric-js-history-operations-undo-redo-and-useful-tips/

您可能需要复制路径并通过它剪辑圆圈，然后通过原始路径再次剪辑。

【讨论】：