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

请参阅此小提琴以获取工作示例：http://jsfiddle.net/o9f4dqjn/1/

然而，我无法使用图像。这可能吗？

Answer 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

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

1 个答案: