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);
      });
  })
})