能否优化鼠标移动触发的容器内容缩放定位公式？

当前实现的鼠标跟随缩放效果，会根据鼠标位置调整容器内元素的定位，但存在两个核心问题：图像尺寸相关计算偏差，以及沿X/Y轴不同方向靠近容器边缘时，定位计算结果不一致。

原代码问题分析 #

• DOM引用拼写错误：conteinerRef 应为 containerRef，导致无法正确获取容器DOM节点
• 偏移量计算逻辑错误：原公式的比例换算方式不合理，导致不同方向的偏移计算不对称
• 空值处理不严谨：未妥善处理zoomRef获取尺寸失败的情况

修复后的代码实现 #

const zoomEffect = (event: MouseEvent) => {
    setZoomMode(true);
    // 确保容器和缩放元素的DOM引用存在
    if (!containerRef.current || !zoomRef.current) return;

    const containerRect = containerRef.current.getBoundingClientRect();
    const zoomRect = zoomRef.current.getBoundingClientRect();

    // 计算鼠标在容器内的相对位置（0~1范围）
    const relativeX = (event.pageX - containerRect.left) / containerRect.width;
    const relativeY = (event.pageY - containerRect.top) / containerRect.height;

    // 计算需要偏移的距离：相对位置 × (缩放元素尺寸 - 容器尺寸)
    // 负号用于让缩放元素的对应位置对齐鼠标点
    const offsetX = -relativeX * (zoomRect.width - containerRect.width);
    const offsetY = -relativeY * (zoomRect.height - containerRect.height);

    setMouseCoords({ x: offsetX, y: offsetY });
};

// 注意修正ref的拼写错误
<div ref={containerRef} onMouseMove={zoomEffect}>
  <div style={{
    position: 'absolute', // 必须添加定位才能生效left/top
    left: `${mouseCoords.x}px`,
    top: `${mouseCoords.y}px`,
  }}>
    <Img ref={zoomRef} />
  </div>
</div>

关键修复点 #

• 修正DOM引用的拼写错误，确保能正确获取容器和元素的尺寸信息
• 采用相对位置比例 × 尺寸差的计算逻辑，保证X/Y轴各个方向的偏移计算完全一致
• 增加DOM引用的存在性判断，避免空值报错
• 明确添加position: absolute样式，确保left/top偏移生效
• 偏移量添加px单位，避免样式解析异常

内容的提问来源于stack exchange，提问作者Nikita Štšigorjev