Fabricjs: fill svg с рисунком изображения

Question

Я хотел бы загрузить мой SVG-файл и заполнить его шаблоном, созданным из моего файла изображения.

Вот мой текущий подход:

canvas = new fabric.Canvas('mainCanvas') 
# image = new fabric.Image(img[0]) 
# console.log image 
fabric.loadSVGFromURL '/assets/my.svg', 
    (objects) -> 
    fabric.util.loadImage "url/to/my/image", (image) -> 
     console.log image 
     svg = fabric.util.groupSVGElements(objects) 
     svg = svg.scale(0.04).set(fill: "black", opacity: 0.5) 
     svg.fill = new fabric.Pattern 
     source: image 
     repeat: "no-repeat" 
     canvas.add(svg) 
     canvas.renderAll() 

Изначально я пытался использовать экземпляр fabric.Image (IMG является элементом изображения JQuery, поэтому я передаю сырец HTMLElement конструктору), но только, чтобы быть уверенными, & использовать код, похожий на pattern tutorial Я использую метод loadImage.

К сожалению, этот код не работает (svg загружен, но на нем нет рисунка). Можно ли заполнить svg шаблоном? Если да, то как я могу это достичь?

Answer 1

Проблема в том, что ваша форма SVG анализируется как fabric.PathGroup, а не fabric.Path. Так как fabric.PathGroup состоит из нескольких объектов fabric.Path, вам нужно установить их значение заполнения, а не заполнять значение самого экземпляра PathGroup.

if (obj instanceof fabric.PathGroup) { 
    obj.getObjects().forEach(function(o) { o.fill = pattern; }); 
} 
else { 
    obj.fill = pattern; 
} 

Если вы идете в kitchensink и используйте кнопку «Patternify», вы можете увидеть, что она работает с более сложными формами (это именно код мы используем там):