javascript - 以图像或 SVG 作为 Canvas 边界的 FabricJS ClipTo

Question

如何将 clipTo 用于图像或 SVG？我想限制任何对象超出 SVG 形状轮廓/图像轮廓。

我正在尝试完成类似于 this OP 的事情，但是我似乎并不清楚如何实现这一目标。

我可以将 clipTo 与常规形状一起使用，例如:

        var circle = new fabric.Circle({
            radius: 150,
            stroke: '#f55',
            fill: "transparent",
            top: 50,
            left: 50
        });
        circle.selectable = false;
        canvas.add(circle); 
        canvas.clipTo = function (ctx) {
            circle.render(ctx);
        };

有关工作示例，请参阅此 fiddle :http://jsfiddle.net/o9f4dqjn/1/

但是我无法让它与图像一起使用。这可能吗？

Answer 1

虽然这个解决方案不使用 clipTo，但它可以工作。

发件人:https://github.com/kangax/fabric.js/issues/2313

还有我修改过的工作 fiddle :http://jsfiddle.net/w396uhnv/

基本上您需要设置背景图像，然后在对象上设置 yourobject.globalCompositeOperation = 'source-atop';。

注意，背景图片需要有透明背景，但非透明填充。

---

我可以让 clipTo 方法只处理 SVG(不是图像):

        fabric.loadSVGFromURL('http://fabricjs.com/assets/23.svg', function (objects, options) {
            var shape = fabric.util.groupSVGElements(objects, options); 
            canvas.clipTo = function (ctx) {
                shape.render(ctx);
            };
            canvas.renderAll();
        });

Fabric.js Clip Canvas (or object group) To Polygon