一个小demo
谢谢jTopo的作者，话说这个框架真不错，不过要是算法上在严谨一点就完美了，在节点1到节点2连线和节点2到节点1连线，会出现重合
才发现压缩包不能上传，所以没上传成功，我也是醉了
上代码吧
html:
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.0.min.js">script>
<script type="text/javascript" src="js/jtopo-0.4.8-min.js">script>
<script type="text/javascript" src="js/toolbar.js">script>
<script type="text/javascript" src="js/demo2.js">script>
<link type="text/css" rel="stylesheet" href="css/demo.css">
<title>sdasdtitle>
head>
<body>
<ul class="del-a" id="delAId" style="display:none;">
<li><a>重命名a>li>
<li><a>更改颜色a>li>
<li><a>删除该线a>li>
ul>
<input id="jtopo_textfield" class="text"/>
<ul class="j-tpop-menu" id="contextmenu" style="display:none;">
<li><a>顺时针旋转a>li>
<li><a>逆时针旋转a>li>
<li><a>选择XXX端口a>li>
<li><a>重命名a>li>
<li><a>撤销上一次操作a>li>
<li><a>更改颜色a>li>
<li><a>放大a>li>
<li><a>缩小a>li>
<li><a>删除该节点a>li>
ul>
<div class="content" id="content">
<canvas id="canvasId" width="1000" height="800">canvas>
div>
body>
html>
js:
$(document).ready(function() { var _height = $("#content").height()-60; var _width = $("#content").width()-20; $("#canvasId").attr({"width":_width,"height":_height}); var canvas = document.getElementById('canvasId'); var stage = new JTopo.Stage(canvas); //显示工具栏 showJTopoToobar(stage); var scene = new JTopo.Scene(); scene.background = './img/bg.jpg'; //菜单的函数 function handler(event){ $("#contextmenu").css({ top: event.pageY, left: event.pageX }).show(); } /** *创建一个节点 * @param x * @param y * @param img * @returns {JTopo.Node} */ function createNode(x, y, img,w,h,text){ text= text?text:""; var node = new JTopo.Node(text); if(img){ node.setImage('./img/statistics/' + img, true); } if(w){ node.setBound(x, y,w,h); }else if(x){ node.setLocation(x, y); }else{ node.setLocation(Math.random() * _width, Math.random() * _height); } scene.add(node); return node; } function linkNode(nodeA, nodeZ, color,f){ var link; if(f){ link = new JTopo.FoldLink(nodeA, nodeZ); }else{ link = new JTopo.Link(nodeA, nodeZ); } link.strokeColor = JTopo.util.randomColor(); link.direction = 'vertical'; scene.add(link); return link; } var nodeArr = []; for(var i=0;i<5;i++) { var node = null; if(i==3 || i==1){ node = createNode(300*i, 400, null, null, null, "node" + i); }else{ node = createNode(10 * (i + 2) * (i + 1), 10 * 3 * (i + 1) * i, null, null, null, "node" + i); } nodeArr.push(node); } for(var a=0;a<nodeArr.length-1;a++){ console.log(); linkNode(nodeArr[a],nodeArr[a+1]); } stage.add(scene); /** * 以下是节点的菜单的事件 * @type {null} */ var currentNode = null; $("#contextmenu a").click(function(){ var text = $(this).text(); if(text == '删除该节点'){ scene.remove(currentNode); currentNode = null; }if(text == '撤销上一次操作'){ currentNode.restore(); }else{ if(currentNode){ currentNode.save(); } } if(text == '更改颜色'){ currentNode.fillColor = JTopo.util.randomColor(); }else if(text == '顺时针旋转'){ currentNode.rotate += 0.5; }else if(text == '逆时针旋转'){ currentNode.rotate -= 0.5; }else if(text == '放大'){ currentNode.scaleX += 0.2; currentNode.scaleY += 0.2; }else if(text == '缩小'){ currentNode.scaleX -= 0.2; currentNode.scaleY -= 0.2; }else if(text == '选择XXX端口'){ if(currentNode.inLinks){ console.log(currentNode.inLinks.length); } if(currentNode.outLinks){ console.log(currentNode.outLinks.length); } if(beginNode){ var endNode = currentNode; var l = new JTopo.Link(beginNode, endNode); scene.add(l); beginNode = null; scene.remove(link); }else{ beginNode = currentNode; scene.add(link); tempNodeA.setLocation(currentNode.x, currentNode.y); tempNodeZ.setLocation(currentNode.x, currentNode.y); } }else if(text == "重命名"){ textfield.css({ top: currentNode.y+currentNode.height*2.5, left: currentNode.x }).show().attr('value', currentNode.text).focus().select(); currentNode.text = ""; textfield[0].JTopoNode = currentNode; } $("#contextmenu").hide(); }); //点击点连接线 var beginNode = null; var tempNodeA = new JTopo.Node('tempA'); tempNodeA.setSize(1, 1); var tempNodeZ = new JTopo.Node('tempZ'); tempNodeZ.setSize(1, 1); var link = new JTopo.Link(tempNodeA, tempNodeZ); var currentLink = null; scene.mousemove(function(e){ tempNodeZ.setLocation(e.x, e.y); }); scene.mouseup(function(event){ if(event.button == 2){ if(event.target&&event.target.elementType == "node"){ currentNode = event.target; handler(event); } if(event.target&&event.target.elementType == "link"){ $("#delAId").css({ top: event.pageY, left: event.pageX }).show(); currentLink = event.target; } }else{ currentNode = null; currentLink = null; $(".del-a").hide(); $(".j-tpop-menu").hide(); } }); var textfield = $("#jtopo_textfield"); //拖动的时候隐藏菜单 stage.addEventListener("mousedrag", function(event){ $(".del-a").hide(); $(".j-tpop-menu").hide(); }); $("#delAId a").click(function(){ var text = $(this).text(); if(text == "重命名"){ textfield.css({ top: currentLink.nodeA.y+(currentLink.nodeZ.y-currentLink.nodeA.y)/1.5, left: currentLink.nodeA.x+(currentLink.nodeZ.x-currentLink.nodeA.x)/2 }).show().attr('value', currentLink.text).focus().select(); currentLink.text = ""; textfield[0].JTopoNode = currentLink; }else if(text == "更改颜色"){ currentLink.strokeColor = JTopo.util.randomColor(); console.log(currentLink.strokeColor+""); }else if(text == "删除该线"){ scene.remove(currentLink); } $("#delAId").hide(); }); $("#jtopo_textfield").blur(function(){ textfield[0].JTopoNode.text = textfield.hide().val(); }); });
css:
html,body{ width: 100%; height: 100%; } .content{ width: 100%; height: 100%; } .j-tpop-menu{ position: absolute; top:0; left: 0; background: #ffd887; } .j-tpop-menu li{ list-style: none; } .j-tpop-menu li a{ display: block; padding: 10px; border-bottom: 1px solid #aaa; cursor: pointer; } .del-a{ position: absolute; top:0; left: 0; background: #ffd887; } .del-a li{ list-style: none; } .del-a li a{ display: block; padding: 10px; border-bottom: 1px solid #aaa; cursor: pointer; } .text{ position: absolute; display: none; }
差不多就这样吧