FabricJS 中如何在多边形里添加坐标

在使用 FabricJS 进行图形处理与交互开发时，在多边形内添加坐标是一项常见需求，这对于精确定位、数据展示等场景都非常关键。下面就为大家详细介绍实现这一功能的方法。

要明确 FabricJS 是一个用于在网页上进行画布操作的强大库，它提供了丰富的 API 来创建和操作各种图形。对于多边形，我们可以通过 fabric.Polygon 来创建实例。例如：

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

上述代码创建了一个简单的矩形多边形，并添加到了 canvas 上。

接下来就是在多边形里添加坐标。一种常用的方法是利用 fabric.Text 对象。我们需要获取多边形的中心点坐标，然后将坐标信息以文本形式添加到这个中心点位置。计算多边形中心点的函数可以这样实现：

function getPolygonCenter(polygon) {
  var points = polygon.getPoints();
  var xSum = 0;
  var ySum = 0;
  for (var i = 0; i < points.length; i++) {
    xSum += points[i].x;
    ySum += points[i].y;
  }
  var centerX = xSum / points.length;
  var centerY = ySum / points.length;
  return { x: centerX, y: centerY };
}

然后，在多边形添加到画布后，获取中心点并添加坐标文本：

var center = getPolygonCenter(polygon);
var coordinatesText = new fabric.Text(`(${center.x}, ${center.y})`, {
  left: center.x,
  top: center.y,
  fill: 'black'
});
canvas.add(coordinatesText);

这样就在多边形的中心位置添加了坐标信息。

如果希望坐标能够随着多边形的移动或变形而实时更新，我们可以通过监听多边形的 moving 和 scaling 等事件来实现。例如：

polygon.on('moving', function() {
  var center = getPolygonCenter(this);
  coordinatesText.set({
    left: center.x,
    top: center.y,
    text: `(${center.x}, ${center.y})`
  });
  canvas.renderAll();
});

通过上述步骤，我们就能在 FabricJS 中轻松地在多边形里添加坐标，并实现动态更新，满足各种复杂的业务需求。