如何使用fabric js逐个选择画布上的所有对象?

时间:2017-03-23 21:59:47

标签: javascript html5 canvas html5-canvas fabricjs

代码如何使用fabric js逐个选择当前在画布上的所有对象。我试图逐个列出每个对象的属性,而不知道画布上有多少个对象(如果有的话)。

澄清:

这是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
}));

有3个对象...有没有办法在每个文本对象的控制台日志(text,fontFamily和fontSize)上打印)

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

1 个答案:

答案 0 :(得分:1)

获得结构对象后,可以调用fabric.getObjects()来获取所有对象。你可以传递一个字符串,该字符串可以包含一个类型(如'textbox'或'circle'),它只返回该类型的对象。

获得对象后,可以按如下方式循环:

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

如果没有更好地描述您要做的事情,这就是您可以做的。