Javascript fabricjs中的填充图案使渲染变慢

我试图在一张大图上制作一个剪辑遮罩效果 我所做的是使用picture作为模式，并将其设置为支持该形状的

svg

路径

检查这里的JSFIDLE（可能有点慢）

请检查上面的代码

结果是好的，但是当你拖动形状时，你会发现它不是平滑的，为什么

---

如果图案不是最佳解决方案，那么如何制作不规则剪辑遮罩效果？

使用较小的图案将使其速度更快。如果在代码中更改此选项：

     patternSourceCanvas.setDimensions({
         width: img.getWidth()*0.6,
         height: img.getHeight()*0.6
     });

你会发现它更平滑。

1使用更小的图案 检查更新的小提琴。

一件事是将用于创建模式的staticCanvas的形状设置为要填充的对象的尺寸。 如您所见，画布上有一个“plus something”。 这是因为填充图案会移动到路径的一半宽度，然后再向后移动（这是为了适应居中变换），因此如果没有这些额外的宽度，您将看到白色

使用这种解决方案，它更平滑，不是超级平滑，只是更平滑

var canvas=newfabric.canvas（'canvas'）；
fabric.loadSVGFromURL（'http://sharepage.lunastudio.cn/flower.svg，函数（对象、选项）{
var obj=fabric.util.GroupsGelements（对象、选项）；
fabric.Image.fromURL（'http://sharepage.lunastudio.cn/Penguins.jpg，函数（img）{
var patternSourceCanvas=new fabric.StaticCanvas（）；
patternSourceCanvas.setDimensions({
宽度：对象宽度+55，
高度：物体高度+55
});
patternSourceCanvas.add（img）；
var s=patternSourceCanvas.getElement（）；
var图案=新织物。图案({
资料来源：s，
重复：“不重复”
});
对象路径forEach（函数（项）{
item.fill=模式；
});
canvas.add（obj）；
});
});

谢谢Andrea，我更喜欢将svg路径组合到一个路径组中，就像第二个示例一样。我要做的是制作一个相框，svg路径与相框一样，所以我不能使用剪辑方式，因为将svg路径设置为img的clipto属性无法将其裁剪为正确的大小。我将进一步检查“globalCompositeOperation”方法，看起来这是一种聪明的方法。再次感谢，globalCompositeOperation无法支持将画布作为目标。当我尝试使用drawimage（画布，0,0）时，它就是不起作用。看起来这是一个已知的错误。你能给我解释清楚吗？将drawImage原语与画布一起用作图像源失败是否globalCompositeOperation与“source over”不同？
 patternSourceCanvas.setDimensions({
     width: obj.width + 55,
     height: obj.height + 55
 });