[英]Fabricjs: fill svg with image pattern
我想加载我的SVG文件,并用从我的图像文件创建的图案填充它。
这是我目前的方法:
canvas = new fabric.Canvas('mainCanvas')
# image = new fabric.Image(img[0])
# console.log image
fabric.loadSVGFromURL '/assets/my.svg',
(objects) ->
fabric.util.loadImage "url/to/my/image", (image) ->
console.log image
svg = fabric.util.groupSVGElements(objects)
svg = svg.scale(0.04).set(fill: "black", opacity: 0.5 )
svg.fill = new fabric.Pattern
source: image
repeat: "no-repeat"
canvas.add(svg)
canvas.renderAll()
最初,我尝试使用fabric.Image实例(img是jQuery图像元素,因此我将原始htmlelement传递给构造函数),但是为了确保并使用与模式教程更相似的代码,我正在使用loadImage方法。
不幸的是,这段代码似乎不起作用(已加载svg,但上面没有任何模式)。 可以用样式填充svg吗? 如果是这样,我该如何实现?
问题可能是您的SVG形状被解析为fabric.PathGroup
而不是fabric.Path
。 由于fabric.PathGroup
由多个fabric.Path
对象组成,因此您需要设置其填充值,而不是PathGroup实例本身的填充值。
if (obj instanceof fabric.PathGroup) {
obj.getObjects().forEach(function(o) { o.fill = pattern; });
}
else {
obj.fill = pattern;
}
如果您去厨房洗碗池并使用“图案化”按钮,则可以看到它适用于更复杂的形状(这正是我们在此处使用的代码):
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.