如何使用 FabricJS 返回多边形的无数据对象表示？

什么是FabricJS

FabricJS是一个强大的HTML5 canvas库，提供简单易用的API，可以轻松创建复杂的图形，如多边形、线条、文本等。它还提供了许多有用的功能，例如旋转、缩放、平移、填充等，可以帮助开发人员快速创建出丰富多彩的交互界面。

多边形的无数据对象表示

FabricJS提供了一个方便的机制来创建多边形的无数据对象表示。这个对象表示实际上是一个包含多个点的数组，它可以用于创建任意形状的多边形。

创建多边形对象

要创建一个多边形对象，我们可以使用fabric.Polygon类。下面是一个简单的示例代码：

var points = [
  {x: 10, y: 10},
  {x: 30, y: 10},
  {x: 30, y: 30},
  {x: 10, y: 30}
];
var polygon = new fabric.Polygon(points, {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2,
  left: 100,
  top: 100
});
canvas.add(polygon);

上面的代码创建了一个四边形，它由四个点组成，每个点都包含一个x和y坐标。我们可以在fabric.Polygon构造函数中指定这些点，然后设置填充颜色、边框颜色、边框宽度、位置等属性。

获取多边形对象的无数据表示

一旦创建了多边形对象，我们可以使用toObject()方法来获取它的无数据表示。下面是一个示例：

var points = [
  {x: 10, y: 10},
  {x: 30, y: 10},
  {x: 30, y: 30},
  {x: 10, y: 30}
];
var polygon = new fabric.Polygon(points, {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2,
  left: 100,
  top: 100
});
var obj = polygon.toObject(['type', 'points']);
console.log(obj);

上面的代码中，我们首先创建了一个四边形对象，然后调用toObject()方法来获取它的无数据表示。注意到我们传递了一个字符串数组，这个数组指定了我们只需要type和points属性，这两个属性分别表示对象类型和点的数组。

输出结果如下：

{
  type: 'polygon',
  points: [
    {x: 10, y: 10},
    {x: 30, y: 10},
    {x: 30, y: 30},
    {x: 10, y: 30}
  ]
}

可以看到，输出结果包含了一个type属性，它的值是'polygon'，表示这是一个多边形对象。另外还有一个points属性，它的值是一个点的数组，包含了所有的顶点坐标。

使用无数据表示创建多边形对象

如果我们想要从无数据表示重新创建一个多边形对象，可以使用fabric.Polygon.fromObject()方法。下面是一个示例：

var obj = {
  type: 'polygon',
  points: [
    {x: 10, y: 10},
    {x: 30, y: 10},
    {x: 30, y: 30},
    {x: 10, y: 30}
  ]
};
var polygon = fabric.Polygon.fromObject(obj);
canvas.add(polygon);

上面的代码中，我们首先创建了一个无数据表示，然后使用fabric.Polygon.fromObject()方法从这个无数据表示创建了一个多边形对象。最后将这个对象添加到画布中。

总结

FabricJS提供了一个方便的机制来创建多边形的无数据对象表示。我们可以使用toObject()方法来获取多边形对象的无数据表示，也可以使用fabric.Polygon.fromObject()方法从无数据表示创建一个新的多边形对象。这个机制非常方便，可以帮助我们快速地创建和修改多边形对象。