fabric.js用PNG模式填充SVG或PNG

Question

我目前正在嘗試使用fabric.js庫用模式填充PNG或SVG。 我試圖從得到一些啟示那里 ，但不能做，因為它是解釋它的工作。

這是我的模式：

這是我的PNG模板（無法上傳SVG，但是在這里 。並且SVG是白色的）：

// GET AND INIT CANVAS (400x400)
canvas = new fabric.Canvas('canvas');

// MY PATHS
let patternURL = "../images/background1.jpg";
let SVGURL = "../svg/test.svg";

// CREATE MY SVG ELEMENT
fabric.loadSVGFromURL(SVGURL, function(objects, options) {
    // CREATE MY PATTERN IMAGE
    fabric.Image.fromURL(patternURL, function(patternImage) {
        svg = fabric.util.groupSVGElements(objects, options);
        svg = svg.set({"opacity": 1});
        svg.getObjects().forEach(function(e) {
            // IF I DON'T USE THIS LINE, THE SVG REMAIN WHITE
            e.fill = patternImage
        });

        canvas.add(svg);
    });
});

這是我執行代碼后的內容：

注意：我可以移動PNG，如果我添加canvas.add(patternImage); 在添加SVG之前，我得到以下結果：

（因此該模式會按預期加載）。

我想我已經很接近了，必須在代碼中缺少KEY行。 您是否有任何有用的信息，或者可以將我重定向到正確的位置？

編輯：這是我希望獲得的（某種程度上，我剛在油漆上做過）背景：

Answer 1

您需要為圖案創建另一個畫布。 並在fabric.Pattern中使用該樣式，然后使用該樣式對象進行填充。

fabric.loadSVGFromURL(SVGURL, function(objects, options) {
  fabric.Image.fromURL(patternURL, function(patternImage) {
    svg = fabric.util.groupSVGElements(objects, options);
    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(patternImage);
    patternSourceCanvas.setDimensions({
      width: patternImage.getScaledWidth(),
      height: patternImage.getScaledHeight()
    });
    patternSourceCanvas.renderAll();
    var pattern = new fabric.Pattern({
        source: patternSourceCanvas.getElement()
      },
      function(patternObj) {
        svg.getObjects().forEach(function(e) {
          e.fill = patternObj
        });
        canvas.add(svg);
      });
  })
})