基于jtopo实现拖拽和连线
2016-04-29 11:32
309 查看
</pre>上代码：<p></p><p></p><p>jtopoDemo.html</p><p></p><pre name="code" class="html"><!DOCTYPE html> <html> <head> <title>拓扑</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!-- 配置自己的路径 --> <script type="text/javascript" src="../../view/common/js/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="../../view/common/js/jtopo-0.4.8-min.js"></script> <script type="text/javascript" src="js/conf.js"></script> <script type="text/javascript" src="js/mytopo.js"></script> <script type="text/javascript" src="js/toolbar.js"></script> <script type="text/javascript" src="js/tooldrag.js"></script> <link rel="stylesheet" type="text/css" href="css/base.css"> </head> <body> 拓扑测试<br> <div id="content" style="width:900px;position:relative;"> <div style="width: 900px;height: 40px;border: 1px solid rgb(68, 68, 68);position:absolute; top:35px;"> <!--原始节点 --> <canvas id='exchanger_icon' width='100' height='40' draggable="true" ondragstart="drag(event)"> 当前浏览器无法使用canvas标签，请更换新版本浏览器 </canvas> <canvas id='server_icon' width='100' height='40' draggable="true" ondragstart="drag(event)"> 当前浏览器无法使用canvas标签，请更换新版本浏览器 </canvas> </div> <div id="dst" ondrop="drop(event)" ondragover="allowDrop(event)"> <canvas width="900px" height="550px" id="canvas" style="border: 1px solid rgb(68, 68, 68);" > 当前浏览器无法使用canvas标签，请更换新版本浏览器</canvas> </div> </div> <img alt="" src="" id="img" > </body> </html>
conf.js
var islink=false; //是否默认连线 var nodelist=new Array();
mytopo.js
$(document).ready(function(){
var canvas = document.getElementById('canvas');
stage = new JTopo.Stage(canvas); // 创建一个舞台对象
scene = new JTopo.Scene(stage); // 创建一个场景对象
//显示工具栏
showJTopoToobar(stage);
stage.addEventListener("mouseover", function(event){
console.log("鼠标进入");
});
stage.addEventListener("mousedrag", function(event){
console.log("拖拽");
});
stage.addEventListener("mouseup", function(event){
if(event.button == 2){
console.log ('松开右键');
}else if(event.button == 1){
console.log =('松开中键');
}else if(event.button == 0){
console.log ( '松开左键');
}
});
stage.addEventListener("mousemove", function(event){
});
});
//打印鼠标指针坐标
function writeMessage (oGetMousePos,message) {
var oContext=oGetMousePos.getContext("2d");
oContext.clearRect(0, 0, oGetMousePos.width, oGetMousePos.height);
oContext.font = "20pt Microsoft JhengHei";
oContext.fillStyle = "tomato";
oContext.fillText(message, 10, 60);
};
//获取画布中鼠标的位置
function getMousePos(canvas, evt, scene) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left * (canvas.width / rect.width)- (scene?scene.translateX:0),
y: evt.clientY - rect.top * (canvas.height / rect.height)- (scene?scene.translateY:0)
}
}
//绘制节点
function draw(ev,data){
var mousePos = getMousePos(stage.canvas,ev,scene);
var message = "x:" + mousePos.x + ",y:" + mousePos.y;
console.log(message,data);
addNode(data,mousePos);
//防止创建节点后连线
nodelist=[];
}
//添加节点
function addNode(name,mousePos){
var node = new JTopo.Node(name);
node.setLocation(mousePos.x,mousePos.y);
node.setImage("img/"+name+".png");
node.shadow = "true";
//node.showSelected = "false";
scene.add(node);
node.dbclick(function(ev){
console.log(node.text+"被点双击了");
});
node.mouseup(function(ev){
console.log(node.text+"鼠标离开");
//是否连线
if(islink){
nodelist.push(node);
if(nodelist.length>=2&&nodelist[nodelist.length-1]!=nodelist[nodelist.length-2]){
console.log("11");
linkNode(nodelist[nodelist.length-1],nodelist[nodelist.length-2]);
nodelist=[];
}
}
});
}
//增加连线
function linkNode(nodeFrom,nodeTo){
var link = new JTopo.Link(nodeFrom, nodeTo);
link.click(function(ev){
console.log("点击了连线");
});
link.click(function(ev){
console.log("点击了连线");
});
scene.add(link);
}
//删除节点或者连线
function delNode(node){
scene.remove(node);
}toolbar.js //jtopo的
// 页面工具栏
function showJTopoToobar(stage){
var toobarDiv = $('<div class="jtopo_toolbar">').html(''
+'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
+'<label for="r1"> 默认</label>'
+' <input type="radio" name="modeRadio" value="select" id="r2"/><label for="r2"> 框选</label>'
//+' <input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4"> 连线</label>'
+' <input type="button" id="centerButton" value="居中显示"/>'
+'<input type="button" id="fullScreenButton" value="全屏显示"/>'
+'<input type="button" id="zoomOutButton" value=" 放 大 " />'
+'<input type="button" id="zoomInButton" value=" 缩 小 " />'
+' <input type="checkbox" id="linkCheckbox"/><label for="linkCheckbox">连接节点</label>'
+' <input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
+' <input type="checkbox" id="eyeCheckbox"/><label for="eyeCheckbox">鹰眼</label>'
+' <input type="text" id="findText" style="width: 100px;" value="" onkeydown="enterPressHandler(event)">'
+ '<input type="button" id="findButton" value=" 查 询 ">'
+ ' <input type="button" id="cloneButton" value="选中克隆">'
+' <input type="button" id="exportButton" value="导出PNG">'
+ ' <input type="button" id="printButton" value="导出PDF">');
$('#content').prepend(toobarDiv);
// 工具栏按钮处理
$("input[name='modeRadio']").click(function(){
stage.mode = $("input[name='modeRadio']:checked").val();
});
$('#centerButton').click(function(){
stage.centerAndZoom(); //缩放并居中显示
});
$('#zoomOutButton').click(function(){
stage.zoomOut();
});
$('#zoomInButton').click(function(){
stage.zoomIn();
});
$('#cloneButton').click(function(){
var img = document.getElementById('img');
var c=stage.eagleEye.getImage();
img.src =c;
});
$('#exportButton').click(function() {
stage.saveImageInfo();
});
$('#printButton').click(function() {
stage.saveImageInfo();
});
$('#linkCheckbox').click(function(){
islink=$('#linkCheckbox').is(':checked');
});
$('#zoomCheckbox').click(function(){
if($('#zoomCheckbox').is(':checked')){
stage.wheelZoom = 1.2; // 设置鼠标缩放比例
}else{
stage.wheelZoom = null; // 取消鼠标缩放比例
}
});
$('#eyeCheckbox').click(function(){
if($('#eyeCheckbox').is(':checked')){
stage.eagleEye.visible = true;
}else{
stage.eagleEye.visible = false;
}
});
$('#fullScreenButton').click(function(){
runPrefixMethod(stage.canvas, "RequestFullScreen")
});
window.enterPressHandler = function (event){
if(event.keyCode == 13 || event.which == 13){
$('#findButton').click();
}
};
// 查询
$('#findButton').click(function(){
var text = $('#findText').val().trim();
//var nodes = stage.find('node[text="'+text+'"]');
var scene = stage.childs[0];
var nodes = scene.childs.filter(function(e){
return e instanceof JTopo.Node;
});
nodes = nodes.filter(function(e){
if(e.text == null) return false;
return e.text.indexOf(text) != -1;
});
if(nodes.length > 0){
var node = nodes[0];
node.selected = true;
var location = node.getCenterLocation();
// 查询到的节点居中显示
stage.setCenter(location.x, location.y);
function nodeFlash(node, n){
if(n == 0) {
node.selected = false;
return;
};
node.selected = !node.selected;
setTimeout(function(){
nodeFlash(node, n-1);
}, 300);
}
// 闪烁几下
nodeFlash(node, 6);
}
});
}
var runPrefixMethod = function(element, method) {
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (usablePrefixMethod) return;
if (prefix === "") {
// 无前缀，方法首字母小写
method = method.slice(0,1).toLowerCase() + method.slice(1);
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
}
);
return usablePrefixMethod;
};
/*
runPrefixMethod(this, "RequestFullScreen");
if (typeof window.screenX === "number") {
var eleFull = canvas;
eleFull.addEventListener("click", function() {
if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
runPrefixMethod(document, "CancelFullScreen");
this.title = this.title.replace("退出", "");
} else if (runPrefixMethod(this, "RequestFullScreen")) {
this.title = this.title.replace("点击", "点击退出");
}
});
} else {
alert("浏览器不支持");
}*/tooldrag.js
//拖拽节点的初始化，以及拖拽拖拽操作
$(document).ready(function(){
init("server_icon"); //云主机
init("exchanger_icon"); //交换机
});
function init(id){
var canvasSrc = document.getElementById(id);
var contextSrc = canvasSrc.getContext('2d');
var image = new Image();
image.src="img/"+id+".png";
image.onload=function(){
contextSrc.drawImage(image,0,0);
}
}
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));
draw(ev,data);
}文件格式：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类（类似XElement语法）
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码