简体   繁体   中英

How do I select ALL objects on canvas one by one with fabric js?

How would the code look like to select all objects currently on a canvas one by one using fabric js. I am trying to list the attributes of each object one by one without knowing how many objects (if any) will be on the canvas.

For clarification:

Here is a https://jsfiddle.net/3bxLmwzk/

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Text('hdgh', { 
    left: 20,
    top: 30, 
    fontFamily: 'Comic Sans MS',
    fontSize: 35
}));

canvas.add(new fabric.Text('foo', { 
  fontFamily: 'Roboto', 
  left: 100, 
  top: 100,
  fontSize: 25
}));

canvas.add(new fabric.Text('f776h', { 
  fontFamily: 'Arial', 
  left: 200, 
  top: 200,
  fontSize: 25
}));

that has 3 objects... Is there a way I can print on the console log (text, fontFamily, and fontSize) of each text object)

1 object - 'hdgh' ; Comic Sans MS ; 35 2 object - 'foo' ; Roboto ; 25 3 object - 'f776h' ; Arial ;25

Once you have a fabric objects, you can call fabric.getObjects() to get all of the objects. You can pass it a string, and that string can contain a type (like 'textbox' or 'circle') and it will only return the objects of that type.

Once you have the objects, you can loop over them as follows:

let objects = fabric.getObjects(); //return Array<objects>
objects.forEach(object=>{
    //list the attributes for each object
    console.log(object.text, object.fontFamily, object.fontSize);
});

Without a better description of what you are trying to do, this is what you can do.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM