JTopo初体验

最新推荐文章于 2022-01-28 17:48:42 发布

喵呜@

最新推荐文章于 2022-01-28 17:48:42 发布

阅读量735

点赞数

分类专栏： canvas Jtopo 文章标签：拓扑图 JTopo

本文链接：https://blog.csdn.net/weixin_40610541/article/details/102624371

版权

本文介绍了作者初次使用JTopo库创建拓扑图的体验，包括JTopo官网链接和一个简单的布局效果展示。在编辑过程中，作者提到了结合JQuery.min.js和JTopo.min.js，并在HTML body中设置了图片区域，然后引入了必要的JS代码。

摘要由CSDN通过智能技术生成

JTopo初体验

JTopo官网链接
[效果图—简单的进行布局] 在这里插入图片描述
#接下来进入图片的编辑内容：
本次编辑运用到Jquery.min.js和JTopo.min.js。
首先在body里为图片位置设置区域。

<body>
    <canvas id="canvas" width="1200px" height="800px" ></canvas>
</body>

引入JS

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>

主要代码

<script>
        $(document).ready(function () {
            var canvas = document.getElementById('canvas');//获取canvas
            var stage = new JTopo.Stage(canvas);//为canvas创建舞台
            var scene = new JTopo.Scene(stage);//将舞台放入场景中



            // 中心节点
            var cloudNode = new JTopo.Node();
            cloudNode.setImage('./img/equip02.png');
            cloudNode.setLocation(480, 350);
            cloudNode.width = 214;
            cloudNode.height = 90;
            // cloudNode.layout = {type: 'circle', radius: 160};
            // scene.background = './img/background-login.jpg';//可设置背景图片
            scene.add(cloudNode);

            // 折线