Fabric.js：用圖像圖案填充SVG

Question

我想加載我的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嗎？ 如果是這樣，我該如何實現？

Answer 1

問題可能是您的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;
}

如果您去廚房洗碗池並使用“圖案化”按鈕，則可以看到它適用於更復雜的形狀（這正是我們在此處使用的代碼）：