javascript - Fabric js. Cannot make pattern fill for multiple rects -
good day, hope can give me hand on this.
i have statement, create , add multiple rects on fabric js canvas. need set texture each of created rects, use following code.
var rect = new fabric.rect({ width: 100, height: 100, selectable: true, hascontrols: false, bordercolor: 'red', borderwidth: 2, lockmovementx: true, lockmovementy: true }); canvas.add(rect); fabric.util.loadimage('construct/css/img/patterns/1.jpg', function(img) { rect.set('fill', new fabric.pattern({ source: img, repeat: 'repeat' })); }); Выполнить
for reason, after code execution, not rects having texture, last 1 added.
this realy drives me crazy.
would appreciate on this
thanks in advance.
my assumption using same variable rect rectangles, , that's why have pattern last object. example, add 4 rectangles:
for (var = 0; < 4; i++){ var rect = new fabric.rect({ width: 100, height: 100, left: * 110, selectable: true, hascontrols: false, bordercolor: 'red', borderwidth: 2, lockmovementx: true, lockmovementy: true }); canvas.add(rect); }
then need loop through rectangles , set fill pattern like:
fabric.util.loadimage('http://fabricjs.com/lib/pug.jpg', function(img) { canvas.foreachobject(function(obj){ obj.set('fill', new fabric.pattern({ source: img, repeat: 'repeat' })); }); canvas.renderall(); });
working code here
warning: if have other objects besides rectangles need ignore them checking object type, or set sort of custom shape type rectangles.
Comments
Post a Comment