如何使用 FabricJS 在多边形中添加坐标？

1. FabricJS简介

FabricJS是一个轻量级的基于Canvas的JavaScript库，它可以用于绘制复杂的图形，包括多边形、圆形、文本、图像等。FabricJS库提供了许多API，可以轻松地对Canvas进行操作和管理，使得开发者可以快速地创建高质量的交互式图形和应用程序。

2. 添加多边形到Canvas

首先，我们需要创建一个Canvas实例，并将其插入到页面中。我们可以使用以下代码来创建Canvas和FabricJS实例：

// create a canvas instance
var canvas = new fabric.Canvas('canvas');

然后，我们可以创建一个多边形对象，并将其添加到Canvas中。我们可以使用以下代码来创建一个多边形：

// create a polygon object
var polygon = new fabric.Polygon(
  [
    {x: 50, y: 50},
    {x: 100, y: 100},
    {x: 50, y: 150},
    {x: 0, y: 100}
  ], 
  {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3
  }
);
// add the polygon object to the canvas
canvas.add(polygon);

在上面的代码中，我们首先创建了一个多边形，它由四个点构成。然后，我们定义了多边形的填充颜色、边框颜色和边框宽度，并将其添加到Canvas中。

3. 获取多边形的坐标

现在我们要获取多边形的坐标，以便在多边形中添加新的坐标。我们可以使用以下代码来获取多边形的坐标：

// get the polygon's points
var points = polygon.get('points');

在上面的代码中，我们使用get()方法获取多边形的points属性，该属性包含多边形顶点的坐标。

4. 在多边形中添加新的坐标

接下来，我们可以添加新的坐标到多边形中。我们可以使用以下代码来添加新的坐标：

// add a new point to the polygon
points.push({x: 25, y: 75});
// update the polygon's points
polygon.set('points', points);
// render the canvas
canvas.renderAll();

在上面的代码中，我们首先将一个新的坐标添加到多边形中。然后，我们使用set()方法更新多边形的points属性，并通过renderAll()方法使得Canvas重新渲染。现在，Canvas上的多边形应该会多出一个顶点。

5. 完整代码

下面是完整的代码示例：

// create a canvas instance
var canvas = new fabric.Canvas('canvas');
// create a polygon object
var polygon = new fabric.Polygon(
  [
    {x: 50, y: 50},
    {x: 100, y: 100},
    {x: 50, y: 150},
    {x: 0, y: 100}
  ], 
  {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3
  }
);
// add the polygon object to the canvas
canvas.add(polygon);
// get the polygon's points
var points = polygon.get('points');
// add a new point to the polygon
points.push({x: 25, y: 75});
// update the polygon's points
polygon.set('points', points);
// render the canvas
canvas.renderAll();

6. 结论

在本文中，我们介绍了如何在Canvas中使用FabricJS库创建多边形，并向多边形中添加新的坐标。FabricJS库提供了许多易于使用的API，并使得我们可以快速地创建各种形状的图形。希望这篇文章对您有所帮助。