问如何用canvas在react中创建“连接点”风格的地图？
EN

Stack Overflow用户

提问于 2019-07-14 22:27:28

回答 1查看 1.7K关注 0票数 0

我需要创建一个“连接点”样式的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;
        }
    }

我怎样才能给它添加由线连接的点呢？

reactjs

svg

html5-canvas

回答 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来处理要显示的内容。

我希望这能帮到你。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57031606

复制

Boost.Spirit 初体验

正则表达式编程算法

使用代码生成代码是一件十分美妙的事情，于是有了各种代码生成器。但是生成代码，意味着要有对生成规则的分析和处理。 Boost.Spirit 就是这么一个语法分析工具，它实现了对上下文无关文法的LL分析。支持EBNF(扩展巴科斯范式)。 Boost.Spirit 的使用真的是把模板嵌套用到了极致。确实这么做造成了非常强的扩展性，生成的代码也非常高效，但是嵌套的太复杂了，对于初学者而言真心难看懂。你能想象在学习阶段一个不是太明白的错误导致编译器报出的几十层模板嵌套错误信息的感受吗？而且，这么复杂的模板嵌套还直接导致了编译速度的巨慢无比。其实在之前，我已经使用过Spirit的Classic版本，即1.X版本，但是过多的复制操作让我觉得当时用得很低效，还好分析的内容并不复杂所以没。体现出来这回就来研究下功能更强劲的2.X 版本。

owent

2023/03/06

9110