如何使用 fabric js select canvas 上的所有对象一一显示？

Question

使用 fabric js 将 select 当前在 canvas 上的所有对象一个一个地显示出来的代码会是什么样子。我试图一一列出每个对象的属性，但不知道 canvas.

上会有多少对象（如果有的话）

澄清一下：

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 个对象...有没有办法在每个文本对象的控制台日志（文本、fontFamily 和 fontSize）上打印）

1 个对象 - 'hdgh'；漫画 Sans MS ； 35 2 对象 - 'foo' ;机器人; 25 3 对象 - 'f776h' ;宋体; 25

Answer 1

一旦你有了织物对象，你就可以调用 fabric.getObjects() 来获取所有的对象。您可以向它传递一个字符串，该字符串可以包含一个类型（如 'textbox' 或 'circle'），它只会 return 该类型的对象。

获得对象后，您可以按如下方式遍历它们：

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

如果没有更好地描述您正在尝试做什么，这就是您可以做的。

如何使用 fabric js select canvas 上的所有对象一一显示？

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

html

javascript

canvas

html5-canvas

fabricjs