Fabric.js toArray() 方法

toArray() 方法是 Fabric.js 库中的一个重要方法，可用于将 Canvas 中的所有对象及其属性转换成类似于 JSON 格式的 JavaScript 数组。

语法

canvas.toArray(propertiesToInclude)

• propertiesToInclude：转换数组时包含的属性。默认情况下，它将包括对象的所有属性。

返回值

返回一个包含所有对象的数组。每个对象都是一个用于表示其他对象属性的对象，其中包含对象类型、属性值、样式和坐标等信息。

使用示例

var canvas = new fabric.Canvas('myCanvas');
var rect = new fabric.Rect({left: 100, top: 100, fill: 'red', width: 100, height: 100});
var text = new fabric.Text('Hello, World!', {left: 200, top: 200});

canvas.add(rect, text);

var objects = canvas.toArray();

console.log(objects);

输出结果为：

[
  {
    "type": "rect",
    "left": 100,
    "top": 100,
    "width": 100,
    "height": 100,
    "fill": "red"
  },
  {
    "type": "text",
    "left": 200,
    "top": 200,
    "text": "Hello, World!",
    "fontFamily": "Helvetica",
    "fontSize": 40
  }
]

注：以上结果格式化后，为便于阅读，添加了空格和换行符，实际上输出结果是一行的。

结论

toArray() 方法能够将 Canvas 中的对象及其属性转换成 JavaScript 数组，方便后续的数据传输和处理。需要注意的是，默认情况下转换的数组包含对象的所有属性，可通过 propertiesToInclude 参数指定需要包含的属性。