如何用canvas在react中创建“连接点”风格的地图？
提问于 2019-07-14 22:27:28
我需要创建一个“连接点”样式的react组件，它根据JSON中定义的一些数据，显示通过“路径”通过不同阶段进行连接的点的“地图”。我的问题不是编程逻辑，而是我应该如何绘制它，使用html canvas、css、svg或两者的组合：
我已经有了一个带背景的组件，但我不知道如何绘制这些点：
下面是一些代码：
class MapCanvas extends Component {
render() {
return (
<div className={classNames("exams-map-canvas", this.props.stage)}>
</div>
);
}
}.exams-map-canvas {
position: relative;
top: 20%;
height: 100%;
margin: 0 auto;
background-size: cover;
border-radius: 10px;
@media (min-width: 700px) {
& {
top: 15%;
height: 550px;
}
}
// Large screen
@media (min-width: 1025px) and (max-width: 1280px) {
& {
height: 550px;
}
}
@media (min-width: 1400px) {
& {
height: 650px;
}
}
@media (min-width: 1700px) {
& {
height: 850px;
}
}
我怎样才能给它添加由线连接的点呢？
回答 1
Stack Overflow用户
发布于 2019-07-15 01:32:42
我将使用SVG在图像的顶部进行绘制。它与JSX的映射非常好，而且功能非常强大。
以下是我对如何构建组件的看法：
https://codesandbox.io/embed/connect-the-dot-style-map-5d7nm
在这个示例中，我随意修改了节点和链接的样式(如果它们已经“完成”)。
有一件事，无论您选择在页面上绘制什么，都要查看viewPort库。它有大量的辅助功能，可以在线创建设计。在我的示例中，我使用d3-scale模块创建一个比例，从任意的0-100域映射到图像的宽度和高度。现在您可以存储点的相对位置，并使其适应任何地图的宽度和高度。您还可以使用SVG viewPort来处理要显示的内容。
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57031606
复制
腾讯云开发者
