以图像或 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

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

FabricJS ClipTo with Image or SVG As Canvas Boundary

javascript

canvas

fabricjs