英文:
react mapping image point and setting style
问题
我有一个需求，要求在单击人体图像上时，在该身体部位显示一个圆圈。我能够渲染出这个圆圈，但是无法将其显示在身体部位上。而且，如果我滚动并单击相同的身体部位，圆圈会出现在不同的位置。以下是示例。
这也会在不同屏幕尺寸上产生问题。
英文:
I have a requirement where on clicking on a human body image I have to display a circle on that body part. I'm able to render the circle but not on the body part. And if I scroll and click on the same body part the circle renders in a different place. Here's the example.
This also creates an issue with different screen sizes.
答案1
得分: 1
event.target.getBoundingClientRect() 返回元素的大小以及相对于视口的位置。event.target.naturalWidth 和 event.target.naturalHeight 提供<img/>元素的自然宽度和高度（原始像素宽度），因此您可以通过以下方式计算要放置在图像上的圆的绝对位置：event.target.naturalWidth / rect.width 或 event.target.naturalHeight / rect.height。
示例
import React, { useState } from "react";
import "./styles.css";
import human_body from "./images/human body.png";
import circle from "./images/hover-circle.png";
export default function App() {
const [circlePosition, setCirclePosition] = useState({ left: 0, top: 0 });
const imgClick = (event: any) => {
const rect = event.target.getBoundingClientRect();
const scaleX = event.target.naturalWidth / rect.width;
const scaleY = event.target.naturalHeight / rect.height;
const left = event.nativeEvent.offsetX * scaleX - 20;
const top = event.nativeEvent.offsetY * scaleY - 20;
setCirclePosition({ left, top });
};
return (
<div className="App">
<div>
{circlePosition.left > 0 && circlePosition.top > 0 && (
<img
src={circle}
alt="hover-body"
style={{
width: 50,
height: 50,
left: circlePosition.left,
top: circlePosition.top,
position: "absolute",
zIndex: 10
}}
/>
)}
<img id="human_body" onClick={imgClick} src={human_body} alt="body" />
</div>
</div>
);
}
（注意：上述示例中的 < 和 > 已被正常的HTML标签 < 和 > 替代。）
英文:
event.target.getBoundingClientRect() returns the size of an element and its position relative to the viewport. And event.target.naturalWidth and event.target.naturalHeight provides the natural width and height of <img/> (original pixels wide)
so you can calculate absolute position of circle which will be placed on image by event.target.natural(width or height) / rect.(width or height)
Example
import React, { useState } from "react";
import "./styles.css";
import human_body from "./images/human body.png";
import circle from "./images/hover-circle.png";
export default function App() {
const [circlePosition, setCirclePosition] = useState({ left: 0, top: 0 });
const imgClick = (event: any) => {
const rect = event.target.getBoundingClientRect();
const scaleX = event.target.naturalWidth / rect.width;
const scaleY = event.target.naturalHeight / rect.height;
const left = event.nativeEvent.offsetX * scaleX - 20;
const top = event.nativeEvent.offsetY * scaleY - 20;
setCirclePosition({ left, top });
};
return (
<div className="App">
<div>
{circlePosition.left > 0 && circlePosition.top > 0 && (
<img
src={circle}
alt="hover-body"
style={{
width: 50,
height: 50,
left: circlePosition.left,
top: circlePosition.top,
position: "absolute",
zIndex: 10
}}
/>
)}
<img id="human_body" onClick={imgClick} src={human_body} alt="body" />
</div>
</div>
);
}
答案2
得分: 0
我对你的代码进行了一些修改，你可以检查一下是否适用。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论