提交表单添加react-konva Rectangle时选择框偏移问题求助

提交表单里的宽高参数后，向Stage添加新Rectangle，添加操作能正常执行，但选择框（Transformer）会出现明显偏移；调整矩形尺寸后选择框又能恢复正常，推测问题出在onSelect的调用时机上，我是基于Konvajs的Transformer-矩形缩放示例开发的。

问题原因 #

新添加的矩形还没完成Konva内部的渲染流程，就触发了Transformer的选中操作，导致Transformer获取的矩形位置、尺寸不是最终渲染后的准确值，进而出现偏移。

解决方法 #

核心是等新矩形渲染完成后再触发选中操作，给你两种可行的实现方式：

方式一：用setTimeout延迟选中

在添加矩形到状态后，延迟执行选中逻辑，利用事件循环让React完成DOM更新，给Konva足够时间渲染新节点：

const handleAddRectangle = () => {
  const newRect = {
    id: Date.now(),
    x: 50,
    y: 50,
    width: formWidth,
    height: formHeight,
    fill: 'red'
  };
  setRects([...rects, newRect]);
  setTimeout(() => {
    setSelectedId(newRect.id);
  }, 0);
};

方式二：用useEffect监听矩形列表变化

通过监听矩形数组的变化，在新矩形添加完成后自动选中：

useEffect(() => {
  if (rects.length) {
    const lastRect = rects[rects.length - 1];
    setSelectedId(lastRect.id);
  }
}, [rects]);

另外要确保Transformer组件和目标矩形处于同一Layer下，并且正确通过node属性绑定选中的矩形实例，避免层级或绑定错误导致的异常。

效果对比 #

• 预期效果：
• 实际问题效果：

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