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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -