如何使用KonvaJS获取多边形等图形的中心点并添加文本标签？

嘿，很高兴能帮你搞定这个问题！在KonvaJS里处理多边形的中心点和添加文本标签其实并不复杂，我分两部分给你拆解清楚：

一、获取多边形的中心点 #

KonvaJS提供了两种常用方式来获取多边形中心，你可以根据场景选择：

方法1：通过包围盒计算（简单通用） #

这种方法先获取多边形的包围矩形，再计算矩形中心，优点是快捷省心，适合大多数常规多边形：

// 假设你已经创建了多边形实例
const polygon = new Konva.Polygon({
  points: [50, 50, 150, 20, 250, 50, 200, 150, 100, 150],
  fill: '#00ff00',
  stroke: '#000',
  strokeWidth: 2
});

// 获取包围盒信息
const boundingBox = polygon.getBoundingBox();
// 计算中心点坐标
const centerX = boundingBox.x + boundingBox.width / 2;
const centerY = boundingBox.y + boundingBox.height / 2;

方法2：通过顶点坐标计算几何中心（更精准） #

如果是不规则形状（比如星形、凹多边形），包围盒中心可能和多边形真正的几何中心有偏差，这时候可以通过计算所有顶点的坐标平均值来得到精准中心：

// 获取多边形的所有顶点数组（格式为[x1,y1,x2,y2,...]）
const points = polygon.points();
let totalX = 0;
let totalY = 0;
const pointCount = points.length / 2; // 每两个元素代表一个顶点

// 遍历顶点求和
for (let i = 0; i < points.length; i += 2) {
  totalX += points[i];
  totalY += points[i + 1];
}

// 计算平均值得到几何中心
const centerX = totalX / pointCount;
const centerY = totalY / pointCount;

二、在中心点添加文本标签 #

拿到中心点后，要注意Konva的Text默认是左上角对齐的，直接把x/y设为centerX/centerY的话，文本左上角会落在中心位置。我们需要调整偏移量，让文本中心和多边形中心重合：

// 创建文本实例
const centerText = new Konva.Text({
  text: '我是中心标签',
  fontSize: 16,
  fill: '#333',
  // 先临时设置位置，方便后续计算尺寸
  x: centerX,
  y: centerY
});

// 必须先把文本添加到层里，才能获取准确的尺寸
layer.add(centerText);
layer.batchDraw();

// 设置偏移量，让文本中心和多边形中心对齐
centerText.offsetX(centerText.width() / 2);
centerText.offsetY(centerText.height() / 2);

// 也可以提前测量文本尺寸（不用先添加到层）
// const textWidth = centerText.measureText(centerText.text()).width;
// const textHeight = centerText.getClientRect().height;
// const centerText = new Konva.Text({
//   text: '我是中心标签',
//   fontSize: 16,
//   fill: '#333',
//   x: centerX,
//   y: centerY,
//   offsetX: textWidth / 2,
//   offsetY: textHeight / 2
// });

完整示例代码 #

把所有步骤整合起来，一个可运行的demo如下：

// 创建舞台和层
const stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 300
});

const layer = new Konva.Layer();
stage.add(layer);

// 创建多边形
const polygon = new Konva.Polygon({
  points: [50, 50, 150, 20, 250, 50, 200, 150, 100, 150],
  fill: '#00ff00',
  stroke: '#000',
  strokeWidth: 2
});
layer.add(polygon);

// 计算几何中心
const points = polygon.points();
let totalX = 0;
let totalY = 0;
const pointCount = points.length / 2;
for (let i = 0; i < points.length; i += 2) {
  totalX += points[i];
  totalY += points[i + 1];
}
const centerX = totalX / pointCount;
const centerY = totalY / pointCount;

// 创建并设置中心文本
const centerText = new Konva.Text({
  text: '中心标签',
  fontSize: 16,
  fill: '#fff',
  fontWeight: 'bold',
  x: centerX,
  y: centerY
});
layer.add(centerText);
layer.batchDraw();

centerText.offsetX(centerText.width() / 2);
centerText.offsetY(centerText.height() / 2);

// 最终绘制
layer.draw();

小提示 #

• 如果多边形后续会被移动、缩放或旋转，建议把多边形和文本放到同一个Konva.Group里，这样它们会一起变换，不用手动更新文本位置；
• 旋转后的多边形，两种中心点计算方法依然有效，Konva会自动处理变换后的坐标系统。

内容的提问来源于stack exchange，提问作者Jack