JTopo

作者: 0xmx0 | 来源:发表于2017-11-27 17:28 被阅读0次

JTopo
jTopo---连线属性介绍
记一次jquery关系图
JTopo实现拓扑图
React下使用Jtopo（一）
二、可视化流程图工具集成
基于jTopo的拓扑图设计工具库ujtopo

拓扑结构

拓扑结构图.png

demo:

demo要用到的js lib包可以用ie浏览器在官网点击链接下载
Jtopo lib包下载
html demo:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

</head>
<body>
<canvas id='Jtopo'width="1000" height="1000" style="border: solid 1px #0000ff"></canvas>
</body>
<script type="text/javascript" src="jquery-1.9.0.js"></script>//引入jquery包
<script type="text/javascript" src="jtopo-0.4.8-min.js"></script>//引入JTopo包
<script src="testJTopo.js"></script>
</html>

testJtopo.js 代码(来自官网的demo)：

$(document).ready(function(){
    var canvas = document.getElementById('Jtopo');//获取画布
    var stage = new JTopo.Stage(canvas);//获取舞台
    //显示工具栏
    //showJTopoToobar(stage);
    var scene = new JTopo.Scene(stage);//把舞台添加到画布
    scene.background = '01.png';//画布背景

    var node = new JTopo.Node("Hello");//新节点 默认test=hello
    node.setLocation(409, 269);//节点位置
    scene.add(node);//将节点添加到场景

    node.mousedown(function(event){//设置鼠标事件
        if(event.button == 2){
            node.text = '按下右键';
        }else if(event.button == 1){
            node.text = '按下中键';
        }else if(event.button == 0){
            node.text = '按下左键';
        }
    });

    node.mouseup(function(event){
        if(event.button == 2){
            node.text = '松开右键';
        }else if(event.button == 1){
            node.text = '松开中键';
        }else if(event.button == 0){
            node.text = '松开左键';
        }
    });
    node.click(function(event){
        console.log("单击");
    });
    node.dbclick(function(event){
        console.log("双击");
    });
    node.mousedrag(function(event){
        console.log("拖拽");
    });
    node.mouseover(function(event){
        console.log("mouseover");
    });
    node.mousemove(function(event){
        console.log("mousemove");
    });
    node.mouseout(function(event){
        console.log("mouseout");
    });

});