如何获取Konva Transformer针对任意形状的锚点位置？

问题描述 #

需要获取Transformer包围盒的8个锚点位置（即多边形外蓝色矩形的8个白色方形点），当前仅在目标形状为矩形时，e.target.getAbsoluteTransform().point({ x: 0, y: 0 }) 能生效，但针对多边形这类形状无法直接使用该方法。

解决方案 #

Transformer的包围盒对应元素的轴对齐边界框，可以通过以下步骤获取8个锚点：

步骤1：获取元素的绝对边界框 #

调用元素的getBoundingRect(true)方法，获取经过所有变换（平移、旋转、缩放）后的实际边界框：

const boundingRect = e.target.getBoundingRect(true);

该方法返回的对象包含四个核心属性：

• left：边界框左上角的绝对X坐标
• top：边界框左上角的绝对Y坐标
• width：边界框的宽度
• height：边界框的高度

步骤2：计算8个锚点的绝对坐标 #

基于边界框的尺寸，定义8个锚点的相对位置，再转换为绝对坐标：

// 定义8个锚点相对于边界框左上角的位置
const relativeAnchors = [
  { x: 0, y: 0 },          // 左上角
  { x: boundingRect.width/2, y: 0 }, // 上边缘中点
  { x: boundingRect.width, y: 0 },   // 右上角
  { x: boundingRect.width, y: boundingRect.height/2 }, // 右边缘中点
  { x: boundingRect.width, y: boundingRect.height },   // 右下角
  { x: boundingRect.width/2, y: boundingRect.height }, // 下边缘中点
  { x: 0, y: boundingRect.height },   // 左下角
  { x: 0, y: boundingRect.height/2 }  // 左边缘中点
];

// 转换为绝对坐标
const absoluteAnchors = relativeAnchors.map(anchor => ({
  x: boundingRect.left + anchor.x,
  y: boundingRect.top + anchor.y
}));

此时absoluteAnchors数组就是Transformer包围盒的8个锚点绝对坐标，适用于所有形状（矩形、多边形等）。

关键说明 #

• getBoundingRect(true) 会忽略元素的旋转角度，返回始终与坐标轴对齐的边界框，这和Transformer显示的蓝色矩形完全对应。
• 无论目标元素是什么形状，只要它被Transformer选中，这个方法都能准确获取到包围盒的锚点位置。

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