React-Konva节点删除功能异常及删除按钮样式定位问题

问题1：删除按钮定位与白色叉号实现 #

解决逻辑如下：

• 每张图片用Group组件包裹，将图片节点、删除按钮都放在同一个Group内，Group的坐标对应图片的渲染坐标，Group的拖拽、缩放变换会自动同步到所有子元素，无需单独计算按钮的全局偏移。
• 选中状态下计算图片实际渲染宽度：const renderWidth = 图片原始宽度 * 图片scaleX值，删除按钮x坐标设为renderWidth - 按钮半径，y坐标设为-按钮半径，即可固定在图片右上角位置。
• 红色圆形内部加白色叉号直接在Circle同级加Text组件即可，将Text的offsetX、offsetY设为自身宽高的一半，坐标和Circle完全对齐就能实现居中效果。

参考代码片段：

<Group key={img.id} x={img.x} y={img.y} draggable>
  <Image
    image={img.domImg}
    width={img.width}
    height={img.height}
    scaleX={img.scaleX}
    scaleY={img.scaleY}
    onClick={() => setSelectedId(img.id)}
  />
  {selectedId === img.id && (
    <>
      <Circle
        x={img.width * img.scaleX - 12}
        y={-12}
        radius={12}
        fill="red"
        onClick={(e) => handleDelete(img.id, e)}
      />
      <Text
        x={img.width * img.scaleX - 12}
        y={-12}
        text="×"
        fill="white"
        fontSize={16}
        offsetX={6}
        offsetY={8}
        onClick={(e) => handleDelete(img.id, e)}
      />
    </>
  )}
</Group>

问题2：偶发删除多张图片问题修复 #

你当前用useRef标识选中节点的方案存在稳定性问题：Konva节点重绘、React批量更新时都可能出现ref指向和实际选中节点不一致的情况，如果你用索引匹配数组元素，索引变动后也会导致匹配错误。

更稳妥的实现方案：

• 给所有存入images数组的图片对象生成唯一不可变的id，新增图片时可以用Date.now() + Math.random()生成，绝对不要用数组索引作为标识。
• 选中状态不用ref存节点引用，改用useState存当前选中的图片id：const [selectedId, setSelectedId] = useState(null)。
• 删除时直接用id过滤images数组，完全靠数据驱动视图更新，不会出现删错节点的问题。
• 记得在删除按钮的点击事件中加e.cancelBubble = true，阻止事件冒泡触发下层图片的选中逻辑，避免选中状态错乱。

参考代码片段：

const handleDelete = (targetId, e) => {
  e.cancelBubble = true;
  // 仅过滤掉id匹配的图片元素
  setImages(prev => prev.filter(img => img.id !== targetId));
  setSelectedId(null);
};

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