javascript - FabricJS:将带有 ClipPath 的 Freehand 添加到对象组

Question

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

**更新: 好像解决了第一点 http://jsfiddle.net/42snph1d/14/

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

是否可以 chop 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)
    });

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

移动时可以在圆圈外的 Canvas 中看到徒手画

组选非常多，包括整个徒手画(甚至包括剪裁的部分)。我希望选择区域只包含圆圈。

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

有什么建议吗？

Answer 1

您可以使用 globalCompositeOperation

在边界框之外创建边界框

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

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