2

我想加载我的 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？如果是这样，我该如何实现？

4

1 回答 1

4

问题可能是您的 SVG 形状被解析为 afabric.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;
}

如果你去kitchensink并使用“Patternify”按钮，你会看到它适用于更复杂的形状（这正是我们在那里使用的代码）：

在此处输入图像描述

于 2013-09-04T14:04:33.340 回答