React-Konva中可拖拽元素的响应式位置适配问题

核心思路是存储海报相对于背景的比例位置，而非绝对像素坐标，这样窗口缩放时，根据背景的新尺寸重新计算海报的绝对位置，就能保持相对位置一致。

具体修改步骤： #

1. 替换状态存储方式
   把原来存储绝对位置的elementPos，改成存储相对于背景的比例值（范围0~1）：

// 初始值可设为背景中心比例
const [relativePos, setRelativePos] = useState({ x: 0.5, y: 0.5 });

2. 拖拽结束时计算相对位置
   修改handleDragEnd，将拖拽后的绝对坐标转换成相对于背景的比例：

const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
  const { width, height, x, y } = props.bg;
  // 计算海报左上角相对于背景左上角的比例
  const relativeX = (e.target.x() - x!) / width;
  const relativeY = (e.target.y() - y!) / height;
  // 限制比例在合理范围，避免海报超出背景
  const clampedX = Math.max(0, Math.min(relativeX, 1 - (scaledSizes.width! / width)));
  const clampedY = Math.max(0, Math.min(relativeY, 1 - (scaledSizes.height! / height)));
  setRelativePos({ x: clampedX, y: clampedY });
};

3. 渲染时动态计算绝对位置
   在Group组件的x和y属性中，根据背景当前尺寸和相对比例，实时计算绝对坐标：

// 计算当前海报的绝对位置
const currentX = props.bg.x! + relativePos.x * props.bg.width;
const currentY = props.bg.y! + relativePos.y * props.bg.height;

return (
  <Group
    x={currentX}
    y={currentY}
    dragBoundFunc={handleDrag}
    draggable
    onDragEnd={handleDragEnd}
    ref={groupRef}
    onClick={() => handleSelectItem(props.item)}
    onTap={() => handleSelectItem(props.item)}
  >
    {/* 组内内容 */}
  </Group>
);

4. 拖拽边界逻辑保留（无需修改）
   原handleDrag函数的边界计算可以直接保留，因为拖拽时的pos是实时绝对坐标，背景的width/height/x/y也是最新值，能保证拖拽过程中海报不会超出背景范围。

原理说明 #

窗口缩放时，背景的尺寸和位置参数会更新，通过预先存储的相对比例重新计算海报绝对坐标，就能让海报始终处于背景上的相对固定位置，从根源上解决了绝对坐标随窗口缩放失效的问题。

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