fabric.js заполнить SVG или PNG рисунком PNG

1

В настоящее время я пытаюсь использовать библиотеку fabric.js для заполнения PNG или SVG шаблоном. Я попытался получить вдохновение оттуда, но не смог заставить его работать, как объясняется.

Вот мой пример:

Изображение 174551

Вот мой шаблон PNG (не могу загрузить SVG, но он здесь. И SVG белый):

Изображение 174551

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

Вот что я получил после выполнения моего кода:

Изображение 174551

NB: я могу перемещать PNG, и если я добавлю canvas.add(patternImage); перед добавлением SVG, я получаю этот результат:

Изображение 174551

(поэтому шаблон загружается так, как он должен).

Я думаю, что я становлюсь довольно близко, должно быть, не хватает строки KEY в коде. У вас есть какая-либо полезная информация или вы можете перенаправить меня в нужное место?

РЕДАКТИРОВАТЬ: Вот (я как-то сделал это на краске) фон, который я хочу получить:

Изображение 174551

  • 0
    Вы хотите это в качестве фона или наложения?
  • 0
    В конце я просто добавил в комментарии то, что хотел бы получить.
Показать ещё 2 комментария
Теги:
canvas
design-patterns
fabricjs

1 ответ

0
Лучший ответ

Вам нужно создать еще один холст для вашего шаблона. И используйте это в 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);
      });
  })
})
Поделиться
  • 0
    Блин что работает! Я сходил с ума по этой проблеме, но очень немногие люди просят об этом. Еще один вопрос: выполнимо ли это с PNG вместо SVG? Большое спасибо !
  • 0
    @tonito, нет, мы не можем заполнить изображение.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню