使用 React 和 Next.js 将标签添加到具有正确位置的图像坐标答案

【问题标题】：Adding Tags to Coordinates of Images with Correct Position, Using React and Next.js使用 React 和 Next.js 将标签添加到具有正确位置的图像坐标
【发布时间】：2021-11-15 15:18:16
【问题描述】：

我正在尝试获取图像的坐标，以便向其添加标签。我可以添加标签，但是当我展开浏览器时，标签没有跟随图像的正确位置。当浏览器放大或缩小时，图像会按照纵横比正确缩放，但是，标签会停留在浏览器的当前位置（而不是图像的正确位置）。但是，如果我滚动，它确实会移动到正确的区域，但这只是在发生滚动的情况下。

const initialPosition = {
  x: "",
  y: "",
};
const MediaPage = ({ user, mediaId }) => {
  const [tagPosition, setTagPosition] = useState(initialPosition);

  const imageWrapRef = createRef();

  const handleTagClick = (e) => {
    const { left, top } = imageWrapRef.current.getBoundingClientRect();
    const x = e.pageX - left;
    const y = e.pageY - top;
    setTagPosition((prev) => ({ ...prev, x, y }));
  };

  return (
    <div
      onClick={(e) => handleTagClick(e)}
      ref={imageWrapRef}
    >
      <div
        style={{
          left: `${tagPosition.x}px`,
          top: `${tagPosition.y}px`,
          zIndex: 2,
          padding: 10,
          position: "absolute",
       }}
      >
        1
      </div>
      <Image
        onLoad={handleLoadingComplete}
        className="w-full"
        alt=""
        src="URL"
        layout="responsive"
        width={700}
        height={800}
      />
    </div>
}

所以本质上，我试图点击一张图片，然后会出现一个标签。但是，我需要能够在图像的正确位置设置标签，即使它可以缩放。

【问题讨论】：

您应该将标签和图像包装在父容器中，并对其应用响应式样式，而不是图像。

标签： javascript css reactjs react-hooks next.js

【解决方案1】：

找到了解决方案，而且很容易解决。必须将父 div 设置为相对位置，然后更新 x 和 y 为 %

const x = ((e.clientX - left) / width) * 100;
const y = ((e.clientY - top) / height) * 100;

然后在样式中：

left: `${tagPosition.x}%`,
top: `${tagPosition.y}%`,

【讨论】：