使用React与Next.js实现图片坐标打标签并解决缩放后位置偏移问题

问题根源 #

• 外层图片容器未设置position: relative，标签的绝对定位基准不是图片容器，而是更上层的元素/视口，导致定位基准错误
• 你当前存储的是点击时刻的绝对像素偏移值，图片缩放时容器宽高会同步变化，固定像素值无法适配动态变化的容器尺寸
• 函数组件中错误使用createRef，createRef每次组件渲染都会生成新的ref实例，会导致ref指向不稳定

修改步骤 #

1. 用useRef替换createRef，保证组件渲染期间ref的指向稳定
2. 给外层图片容器添加position: relative，明确标签绝对定位的参照基准
3. 点击时计算点击位置相对于容器宽高的比例，存储比例值而非固定像素值
4. 标签使用百分比值做定位，自适应容器的尺寸变化，可额外添加偏移修正标签自身尺寸带来的位置偏移

完整修改后代码 #

import { useState, useRef } from 'react';

const initialPosition = {
  xPercent: 0,
  yPercent: 0,
};
const MediaPage = ({ user, mediaId }) => {
  const [tagPosition, setTagPosition] = useState(initialPosition);
  const imageWrapRef = useRef(null);

  const handleTagClick = (e) => {
    const { left, top, width, height } = imageWrapRef.current.getBoundingClientRect();
    // 计算相对比例，适配任意容器尺寸
    const xPercent = (e.clientX - left) / width;
    const yPercent = (e.clientY - top) / height;
    setTagPosition((prev) => ({ ...prev, xPercent, yPercent }));
  };

  const handleLoadingComplete = () => {
    // 原有图片加载完成逻辑保留
  };

  return (
    <div
      onClick={(e) => handleTagClick(e)}
      ref={imageWrapRef}
      style={{ position: 'relative' }}
    >
      <div
        style={{
          left: `${tagPosition.xPercent * 100}%`,
          top: `${tagPosition.yPercent * 100}%`,
          zIndex: 2,
          padding: 10,
          position: "absolute",
          // 可选：让标签中心点对准点击位置，不需要可删除
          transform: 'translate(-50%, -50%)'
       }}
      >
        1
      </div>
      <Image
        onLoad={handleLoadingComplete}
        className="w-full"
        alt=""
        src="URL"
        layout="responsive"
        width={700}
        height={800}
      />
    </div>
  );
}

实现原理 #

百分比定位会相对于父容器的宽高自动计算实际像素值，图片缩放时父容器会和图片同步改变宽高，标签位置会自动适配，无需额外监听窗口resize事件即可始终固定在图片对应点位。

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