朝舞
  1. 首页
  2. JAVASCRIPT
  3. 使用Jtopo创建一个图形拓扑显示（1）

使用Jtopo创建一个图形拓扑显示（1）

分类：JAVASCRIPT 阅读：(388) 评论：(0)

最近需要根据节点创造一个拓扑图显示功能，网上找了很多拓扑图插件，发现只有一个Jtopo较为符合需求根据demo ，进行实验测试，先进行显示测试，未来会根据后台数据，进行自动布局编写首先 创建一个htm...

最近需要根据节点创造一个拓扑图显示功能，网上找了很多拓扑图插件，发现只有一个Jtopo较为符合需求

根据demo ，进行实验测试，先进行显示测试，未来会根据后台数据，进行自动布局编写

首先 创建一个html模板

<html>
        <head>
                <title>Jtopo测试</title>
        </head>
	<body>
		<canvas id='canvas'  width="850" height="550">
		
	        </canvas>
	</body>
</html>


添加 jquery 和jtopo的js引入


		<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
		<script type="text/javascript" src="http://www.jtopo.com/download/jtopo-0.4.8-min.js" ></script>
		<script type="text/javascript" src="http://www.jtopo.com/demo/js/toolbar.js" ></script>


最后根据demo 编写运行代码

	<script>	
		         
        $(document).ready(function(){                                        
            var canvas = document.getElementById('canvas');
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            var scene = new JTopo.Scene(stage);    
            
            // 节点
            function newNode(x, y, w, h, text){
                var node = new JTopo.Node(text);
                node.setLocation(x, y);
                node.setSize(w, h);
                scene.add(node);
                return node;
            }
            
            // 简单连线
            function newLink(nodeA, nodeZ, text, dashedPattern){
                var link = new JTopo.Link(nodeA, nodeZ, text);        
                link.lineWidth = 3; // 线宽
                link.dashedPattern = dashedPattern; // 虚线
                link.bundleOffset = 60; // 折线拐角处的长度
                link.bundleGap = 20; // 线条之间的间隔
                link.textOffsetY = 3; // 文本偏移量（向下3个像素）
                link.strokeColor = '0,200,255';
                scene.add(link);
                return link;
            }
            
            // 折线
            function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
                var link = new JTopo.FoldLink(nodeA, nodeZ, text);
                link.direction = direction || 'horizontal';
                link.arrowsRadius = 15; //箭头大小
                link.lineWidth = 3; // 线宽
                link.bundleOffset = 60; // 折线拐角处的长度
                link.bundleGap = 20; // 线条之间的间隔
                link.textOffsetY = 3; // 文本偏移量（向下3个像素）
                link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
                link.dashedPattern = dashedPattern;
                scene.add(link);
                return link;
            }
            
            // 二次折线
            function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){
                var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
                link.direction = direction || 'horizontal';
                link.arrowsRadius = 10;
                link.lineWidth = 3; // 线宽
                link.offsetGap = 35;
                link.bundleGap = 15; // 线条之间的间隔
                link.textOffsetY = 10; // 文本偏移量（向下15个像素）
                link.strokeColor = '0,250,0';
                link.dashedPattern = dashedPattern; 
                scene.add(link);
                return link;
            }
            
            // 曲线
            function newCurveLink(nodeA, nodeZ, text){
                var link = new JTopo.CurveLink(nodeA, nodeZ, text);
                link.lineWidth = 3; // 线宽
                scene.add(link);
                return link;
            }
            
            var from = newNode(100, 60, 30, 30);
            var to = newNode(300, 60, 30, 30);
            var link = newLink(from, to, 'Arrow', 5);
            link.arrowsRadius = 10;
            
            var from = newNode(100, 120, 30, 30);
            var to = newNode(300, 120, 30, 30);
            var link = newLink(from, to, 'Link');
            
            var from = newNode(100, 200, 30, 30);
            var to = newNode(200, 300, 30, 30);
            var link = newFoldLink(from, to, 'FoldLink');
            var link = newFoldLink(to, from,'FoldLink', 'vertical', 5);
            
            var from = newNode(100, 300, 30, 30);
            var to = newNode(200, 400, 30, 30);
            var link = newFoldLink(from, to, 'FoldLink', 'vertical');
            
            var from = newNode(450, 250, 30, 30);
            var to = newNode(400, 100, 30, 30);
            var link = newFlexionalLink(from, to, 'FlexLink1');
            var from = newNode(600, 100, 30, 30);
            var to = newNode(650, 200, 30, 30);
            var link = newFlexionalLink(from, to, 'f', 'vertical', 2);
            
            
            var from = newNode(450, 400, 30, 30);
            var link = newLink(from, from, 'loop');
            
            var from = newNode(550, 400, 30, 30);
            var to = newNode(650, 300, 30, 30);
            var link = newCurveLink(from, to, 'curve');
        });
		</script>


将内容编写完毕后，即可进行查看。

TIM截图20190910164042.png 使用Jtopo创建一个图形拓扑显示（1） JAVASCRIPT



API 使用说明：

API: jTopo.Node 支持设置宽高，坐标，及文本

            function newNode(x, y, w, h, text){
                var node = new JTopo.Node(text);
                node.setLocation(x, y);
                node.setSize(w, h);
                scene.add(node);
                return node;
            }

创建函数 newNode

根据 x ，y 坐标   w， h 宽高，与具体文本，创建一个 JTopo.Node  

添加到显示界面后，即可显示到界面中


API: jTopo.Link 支持自动链接两个node节点中

创建函数 newlink ，可将两个设备进行链接。

            // 简单连线
            function newLink(nodeA, nodeZ, text, dashedPattern){
                var link = new JTopo.Link(nodeA, nodeZ, text);        
                link.lineWidth = 3; // 线宽
                link.dashedPattern = dashedPattern; // 虚线
                link.bundleOffset = 60; // 折线拐角处的长度
                link.bundleGap = 20; // 线条之间的间隔
                link.textOffsetY = 3; // 文本偏移量（向下3个像素）
                link.strokeColor = '0,200,255';
                scene.add(link);
                return link;
            }


哎哎
相关推荐