以图像或 SVG 作为画布边界的 FabricJS ClipTo

【问题标题】：FabricJS ClipTo with Image or SVG As Canvas Boundary以图像或 SVG 作为画布边界的 FabricJS ClipTo
【发布时间】：2015-09-17 19:28:42
【问题描述】：

如何将 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);
        };

查看这个小提琴的工作示例：http://jsfiddle.net/o9f4dqjn/1/

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

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

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

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

还有我修改后的工作小提琴：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

【讨论】：