jTopo是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包-BFW插件库

jTopo是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包

jTopo是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包 jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。
jTopo关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。
使用jTopo很简单，可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系，都可以使用jTopo来进行人性化、图形化的展示。
jTopo的目标：1.简单好用 2.灵活扩展 3.轻松开发出类似Visio、在线脑图、UML建模等类似工具 4.为大数据可视化提供解决方案

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步配置参数

var canvas = document.getElementById('canvas'); 
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var node = new JTopo.Node("Hello");    // 创建一个节点
node.setLocation(300,200);    // 设置节点坐标                    
scene.add(node); // 放入到场景中

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jtopo-0.4.8"], function() {
                var canvas = document.getElementById('canvas');
                var stage = new JTopo.Stage(canvas);
           
              

                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>
    <style>
    </style>
</head>
<body>
    <canvas width="850" height="550" id="canvas"></canvas>
</body>
</html>

官网：http://www.jtopo.com/