React-konva实现形状底部中心动态文本跟随旋转需求

核心问题分析 #

你之前的定位逻辑只适用于无旋转变换的场景，因为shapeRef.current.attrs.x/y是形状在其父组内的局部坐标，当父组添加旋转后，全局坐标与局部坐标会产生旋转变换偏移，直接基于原始坐标计算文本位置会忽略这一变换，导致定位失效。

解决方案：利用Konva坐标变换API #

通过Konva提供的getClientRect()和getRelativePoint()方法，处理父组变换后的坐标转换，确保文本始终定位在形状的底部中心：

• 获取形状全局包围盒：getClientRect()会返回形状经过所有父级变换（旋转、缩放、平移）后的全局坐标系包围盒，包含准确的位置、宽高信息。
• 计算底部中心全局坐标：基于包围盒计算形状底部中心的全局位置。
• 转换为文本组局部坐标：将全局坐标转换为文本所在容器的局部坐标，避免父组变换影响定位。

完整代码实现 #

// 定义更新文本位置的函数
const updateNamePosition = () => {
  const shape = shapeRef.current;
  const textGroup = nameRef.current?.parent;
  if (!shape || !textGroup) return;

  // 获取形状在全局坐标系中的包围盒（已处理父组旋转/缩放）
  const shapeGlobalRect = shape.getClientRect();
  
  // 计算形状底部中心的全局坐标
  const bottomCenterGlobal = {
    x: shapeGlobalRect.x + shapeGlobalRect.width / 2,
    y: shapeGlobalRect.y + shapeGlobalRect.height
  };

  // 将全局坐标转换为文本组所在容器的局部坐标
  const bottomCenterLocal = textGroup.getRelativePoint(bottomCenterGlobal);

  // 设置文本组位置，确保文本居中
  textGroup.position({
    // 文本自身宽度的一半偏移，保证文本中心对齐底部中心
    x: bottomCenterLocal.x - (nameRef.current.textWidth + 4) / 2,
    // 调整文本与形状底部的垂直间距
    y: bottomCenterLocal.y - 7
  });
};

// 在形状属性变化时触发更新（比如name变化、形状移动/旋转时）
useEffect(() => {
  updateNamePosition();
  // 监听依赖：形状的x、y、rotation、name，以及文本宽度变化
}, [shape.x, shape.y, shape.rotation, shape.name]);

// 同时，文本组件需设置居中对齐，确保文本自身居中
<Text
  ref={nameRef}
  text={shape.name}
  align="center"
  // 其他样式...
/>

关键注意点 #

• 文本组件必须设置align="center"，确保文本内容自身以组的中心对齐，配合x轴偏移实现整体居中。
• 需在形状的位置、旋转、名称变化时调用updateNamePosition，可以通过useEffect监听相关依赖，或者绑定Konva的transform事件触发。

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