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

【问题标题】：fabric.js fill a SVG or a PNG with a PNG patternfabric.js 用 PNG 模式填充 SVG 或 PNG
【发布时间】：2018-07-20 02:46:27
【问题描述】：

我目前正在尝试使用fabric.js 库来为 PNG 或 SVG 填充图案。我试图从there 获得一些灵感，但无法按照说明进行操作。

这是我的模式：

这是我的 PNG 模板（无法上传 SVG，但它是 here。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，如果我在添加 SVG 之前添加 canvas.add(patternImage);，我会得到以下结果：

（因此模式已按应有的方式加载）。

我想我已经很接近了，一定是缺少代码中的KEY 行。您有任何有用的信息或可以将我重定向到正确的位置吗？

编辑：这是我希望获得的（有点，我只是在油漆上做的）背景：

【问题讨论】：

你想要它作为背景还是覆盖？
我只是在最后的评论中添加了我希望获得的东西。
你有那两张图片吗？
我有很多图案，比如正方形的（第一张图片），还有很多模板（比如 SVG 或 PNG 中的第二张）。我需要一个接受这两个的函数，并动态创建第三个（如最后一个）

标签： javascript canvas design-patterns fabricjs

【解决方案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);
      });
  })
})

【讨论】：

该死的工作！我对这个问题变得疯狂，但很少有人要求实现这一目标。还有一个问题：使用 PNG 而不是 SVG 是否可行？非常感谢！
@tonito，不，我们无法填充图像。