ReactJS中图片/窗口缩放时，如何让绝对定位点保持正确位置？

核心问题是你存储的是点击时的绝对像素坐标，当图片或窗口缩放后，图片的渲染尺寸变化，原来的绝对坐标就不再对应正确位置。改成存储相对比例即可解决：

具体实现步骤 #

• 存储点击位置的相对比例：点击图片时，计算点击坐标相对于图片当前渲染宽高的比例，而非直接存x、y像素值。比如：

  // 点击事件处理
  const handleClick = (e) => {
    const img = e.target;
    // 计算相对比例（0-1区间）
    const xRatio = e.nativeEvent.offsetX / img.offsetWidth;
    const yRatio = e.nativeEvent.offsetY / img.offsetHeight;
    // 存储比例而非绝对坐标
    setMarks(prev => [...prev, { xRatio, yRatio }]);
  };
  

• 渲染定位点时根据当前图片尺寸计算位置：每次渲染定位点，用当前图片的实际渲染宽高乘以存储的比例，得到正确的绝对位置：

  const imgRef = useRef(null);
  
  return (
    <div className="relative-container">
      <img
        ref={imgRef}
        src="你的图片地址"
        className="absolute-img"
        onClick={handleClick}
      />
      {marks.map((mark, index) => {
        if (!imgRef.current) return null;
        const { offsetWidth, offsetHeight } = imgRef.current;
        return (
          <div
            key={index}
            className="absolute-mark"
            style={{
              top: `${mark.yRatio * offsetHeight}px`,
              left: `${mark.xRatio * offsetWidth}px`
            }}
          />
        );
      })}
    </div>
  );
  

• 监听窗口 resize 事件：窗口缩放时触发组件重渲染，确保定位点位置实时更新：

  useEffect(() => {
    const handleResize = () => {
      // 通过浅拷贝触发重渲染，重新计算定位点位置
      setMarks([...marks]);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [marks]);
  

关键原理 #

通过存储点击位置相对于图片的相对比例（0-1之间的数值），无论图片如何缩放，都能根据当前渲染尺寸反算出正确的绝对位置，保证定位点始终和点击的图片区域精准对应。

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