如何使用fabric js一一选择画布上的所有对象？答案

【问题标题】：How do I select ALL objects on canvas one by one with fabric js?如何使用fabric js一一选择画布上的所有对象？
【发布时间】：2017-08-16 16:48:21
【问题描述】：

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

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

【问题讨论】：

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

一旦你有一个织物对象，你可以调用fabric.getObjects() 来获取所有的对象。您可以向它传递一个字符串，该字符串可以包含一个类型（如“文本框”或“圆圈”），它只会返回该类型的对象。

一旦你有了对象，你可以像下面这样循环它们：

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

如果没有更好地描述您想要做什么，这就是您可以做的。

【讨论】：

属性是指每个文本对象的文本、字体系列和字体大小。
例如此画布上有 3 个对象。如何控制台记录每个对象的属性？ jsfiddle.net/3bxLmwzk
您说要“列出属性”。你这是什么意思？
谢谢你冰霜！！这正是我在过去几个小时里试图弄清楚的，而你在几秒钟内就做到了。谢谢！！
你知道我如何区分对象吗？文本与图像。对于文本，我想要文本、字体系列和字体大小属性，但对于图像，我想要图像 boundingRect() 大小 H x W。

【解决方案2】：

您可以使用以下方法在 Canvas 上选择已激活的对象：

let activeObject = this.myCanvas.getActiveObject()._objects;

【讨论】：