Javascript FabricJS：将带有ClipPath的徒手画添加到对象组

我正在使用Fabricjs，我想画一个圆的内部，并将路径约束到圆。这包括组的选择区域

**更新： 似乎已经解决了第一点

然而，选择太多了。无论如何，减少它，使它是圆的边，而不是路径**

是否可以截断路径以仅包含圆内的点

我在移动物体时看到了奇怪的人工制品

移动时，可以在圆圈外的画布上看到手绘图形

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

这里有明显的修正吗

---

有什么建议吗？

您可以使用

globalCompositeOperation

在博客帖子的剪辑画布中签出此内容

您可能需要复制路径并通过它剪切圆，然后再次通过原始路径进行剪切

    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)
    });