Question

我目前正在尝试使用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行。您是否有任何有用的信息，或者可以将我重定向到正确的位置？

编辑：这是我希望获得的（某种程度上，我刚在油漆上做过）背景：

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

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

1 个答案: