jtopo - 拖拽连线html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
<title>jtopo</title>
<script src="http://www.jtopo.com/download/jtopo-0.4.8-min.js"></script>
<style type="text/css">
#canvas{margin: 10px auto;border: 2px solid #555;}
.dragg{position: fixed;right: 90px;top: 10px;display: flex;flex-direction: column;}
</style>
</head>
<body>
<canvas width="850" height="550" id="canvas"
ondrop="drop(event)" ondragover="allowDrop(event)"></canvas>
<div class="dragg">
<img src="images/zd.png" draggable="true" width="62" height="24">
<img src="images/radar.png" draggable="true" width="44" height="44">
<img src="images/pie.png" draggable="true" ondragstart="drag(event)" width="52" height="52">
</div>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var node = new JTopo.CircleNode("Hello"); // 创建一个节点
node.setLocation(130,6); // 设置节点坐标
scene.add(node); // 放入到场景中
var nodeFrom = new JTopo.Node("from");
nodeFrom.setLocation(20,20);
nodeFrom.setSize(10,10);
nodeFrom.text="abc"
nodeFrom.fontColor="0,0,0"
nodeFrom.fillColor="92,204,136"
scene.add(nodeFrom);
var nodeTo = new JTopo.Node("To");
nodeTo.setLocation(100,100);
nodeTo.setSize(20,10)
nodeTo.fillColor="125,76,93"
scene.add(nodeTo);
var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
var link2 = new JTopo.Link(nodeTo,node)
var link3 = new JTopo.Link(nodeFrom,node)
scene.add(link);
scene.add(link2);
scene.add(link3);
/* for(var i=0; i<5; i++){
var node = new JTopo.Node('Node_' + i);
node.setLocation(Math.random() * 600, Math.random() * 400);
scene.add(node);
}*/
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);
scene.mouseup(function(e){
console.log('松开')
if(e.button == 2){
scene.remove(link);
beginNode=null;
endNode=null;
return;
}
if(e.target != null && e.target instanceof JTopo.Node){
if(beginNode == null){
beginNode = e.target;
scene.add(link);
tempNodeA.setLocation(e.x, e.y);
tempNodeZ.setLocation(e.x, e.y);
}else if(beginNode !== e.target){
var endNode = e.target;
var l = new JTopo.Link(beginNode, endNode);
scene.add(l);
beginNode = null;
scene.remove(link);
}else{
beginNode = null;
}
}else{
scene.remove(link);
}
});
scene.mousedown(function(e){
console.log('按下')
if(e.target == null || e.target === beginNode || e.target === link){
scene.remove(link);
}
});
scene.mousemove(function(e){
console.log('一直在移动')
tempNodeZ.setLocation(e.x, e.y);
});
</script>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
//ev.target.appendChild(document.getElementById(data));
var imgUrl = 'images/pie.png'
var img = new Image()
img.src = imgUrl
img.width=img.height=56
var e = event || window.event
console.log(e.clientX+','+e.clientY)
var ex = e.clientX-img.width/2
var ey = e.clientY-img.height/2
var nodeImg = new JTopo.Node(data)
nodeImg.setImage(img.src)
nodeImg.setSize(img.width,img.height)
nodeImg.setLocation(ex,ey)
scene.add(nodeImg)
}
</script>
</body>
</html>
