13518219792
这周去看了两天的羽毛球亚锦赛，工作有提前晚上加班做一些，但是技术文章却拉下了。
创新互联专业为企业提供鄱阳网站建设、鄱阳做网站、鄱阳网站设计、鄱阳网站制作等企业网站建设、网页设计与制作、鄱阳企业网站模板建站服务，十余年鄱阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实jsPlumb可能主要是用来做流程图的，它在实现这方面的功能上非常强大，我在项目中只使用了它少部分功能，来实现项目中连线的效果。
以上是初始化jsPlumb对象的函数。
接下来获取数据，加载页面的系统和编制模块。
初始化连接锚点
//自动连线
你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整
代码如下
%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title测试/title
script src=""/script
script
function drawThis(obj){
if(obj.style.border=="1px solid red"){
obj.style.border="1px solid blue";
}else{
obj.style.border="1px solid red";
}
var div = document.getElementsByTagName("div");
var leftX = "";
var leftY = "";
var rightX="";
var rightY="";
for ( var i = 0; i div.length; i++) {
if(div[i].style.border=="1px solid blue"){
if(div[i].className=="left"){
leftX = $(div[i]).position().left+70;
leftY = $(div[i]).position().top+35;
}else if(div[i].className=="right"){
rightX = $(div[i]).position().left;
rightY = $(div[i]).position().top+35;
}
}
}
if(rightX!=""leftX!=""){
for ( var i = 0; i (rightX-leftX)/2; i++) {
var newDiv = document.createElement("div");
var y = (rightY-leftY)/((rightX-leftX)/2);
$(newDiv).css("background-color", "red");
$(newDiv).css("z-index","2");
$(newDiv).css("left",(leftX+i*4));
$(newDiv).css("top",(leftY+i*y));
$(newDiv).css("height",y+"px");
$(newDiv).css("width","4px");
$(newDiv).css("position","absolute");
$("#detail").append(newDiv);
}
}
}
/script
/head
body
div align="center" style="margin-top: 20px;margin-left: 30%" id="detail"
div class="left" style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-right: 200px" onclick="drawThis(this)"a/div
div style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-left: 200px"1/div
br /
br /
br /
br /
br /
div style="cursor:pointer; border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-right: 200px"b/div
div style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-left: 200px"2/div
br /
br /
br /
br /
br /
div style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-right: 200px"c/div
div class="right" style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-left: 200px" onclick="drawThis(this)"3/div
/div
/body
/html
canvas不可以拖动。你也不可以直接拖动canvas里面的任何元素，包括已经载入的图片（实际上图片已经成为canvas的一部分）。先不说连线，因为我不清楚你要怎样连线。先拿一张图片来说。
思路：canvas不可以拖动，但div可以啊。考虑div和canvas。位置属性设置为absolute，否则容易出错。
注意：将div的z-index值设置大点，保证其在Canvas画面之上。
将div的大小设置成图片的大小。
图片不是在div里面，也没必要。
拖动div，拖动到新位置X1,Y1时，清除canvas的图片：ctx.clearRect(X,Y,W,H);X是上一个位置图片在canvas中的横坐标，Y是上一个位置的纵坐标，W是图片宽度，H是图片高度。
绘制新位置下的图片：ctx.drawImage(img,X,Y);img是一个图片节点。不会用drawImage请百度哈。
【【【具体代码：】】】
div拖动：
var divObj=document.getElementById("cover");
var moveFlag=false;
divObj.onmousedown=function(e){
moveFlag=true;
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetLeft;
var mheight=clickEvent.clientY-divObj.offsetTop;
document.onmousemove=function(e){
var moveEvent=window.event||e;
if(moveFlag){
divObj.style.left=moveEvent.clientX-mwidth+"px";
divObj.style.top=moveEvent.clientY-mheight+"px";
divObj.onmouseup=function(){
moveFlag=false;
}
}
}
};
来解读下这段代码：首先获取div对象，设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动，当onmouseup时为false表示不能拖动了。
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetLeft;
var mheight=clickEvent.clientY-divObj.offsetTop;
这三行代码是为了修正光标位置。当点击时，记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。
接下来绘制图片：
首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。
var ctx=document.getElementById("myCanvas").getContext("2d");
var img=document.getElementById("myImg");
function drawImg(){
ctx.clearRect(0,0,1000,500);
ctx.beginPath();
ctx.drawImage(img,X,Y);
ctx.closePath();
ctx.stroke();
}
window.onload=function(){
setInterval(drawImg,1);
}
获取“画笔”，获取图片对象。这里setInterval循环执行绘制图片的函数，以刷新图片的位置，setInterval的间隔值越小，拖拽起来越“流畅”。
同时别忘了clearRect，当图片移动到下一个位置时，清除上一个位置的图片，参数为Canvas画布的坐标和尺寸。
在拖拽时将修正后的光标坐标传给X、Y：
X=moveEvent.clientX-mwidth;
Y=moveEvent.clientY-mheight;
最后加上div和图像的活动范围：
if(moveEvent.clientX=mwidth){
divObj.style.left=0+"px";
X=0;
}
if(parseInt(divObj.style.left)+divObj.offsetWidth =1000){
divObj.style.left=1000 - divObj.offsetWidth+"px";
X=1000 - divObj.offsetWidth;
}
if(moveEvent.clientY=mheight){
divObj.style.top=0+"px";
Y=0;
}
if(parseInt(divObj.style.top)+divObj.offsetHeight=500){
divObj.style.top=500-divObj.offsetHeight+"px";
Y=500-divObj.offsetHeight;
}
这个就看个人的要求了，注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小，如果是在整个页面里活动就换成innerWidth或innerHeight。
彻底隐藏div看看效果：
最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。
这里有个比较简单的办法，定义一个clickFlag默认为false,当onmousedown时设为true，若进行了onmousemove事件时设为false。
在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。
!doctype html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
style
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#canv{
border: 1px solid;
border-radius: 10px;
}
/style
/head
body
canvas width="500px" height="300px" id="canv"/canvas
script
var canv = document.getElementById("canv");
var context = canv.getContext("2d");
var count = 0;
var point = [];
canv.onclick = function(e){
if(count==2){
return;
}
if(count2){
var obj = {};
obj.x = e.clientX;
obj.y = e.clientY;
context.fillText("X:"+obj.x + ", Y:"+obj.y ,obj.x,obj.y - 15);
context.beginPath();
context.arc(obj.x,obj.y,3,0,Math.PI*2,true);
context.fill();
context.closePath();
point.push(obj);
count++;
context.beginPath();
context.arc(e.clientX, e.clientY,50,0,Math.PI*2,true);
context.stroke() ;
context.closePath();
}
if(count==2){
context.beginPath();
context.strokeStyle = "blue";
context.moveTo(point[0].x,point[0].y);
context.lineTo(point[1].x,point[1].y);
context.stroke();
context.closePath();
var centerPoint = {};
centerPoint.x = (point[0].x + point[1].x)/2;
centerPoint.y = (point[0].y + point[1].y)/2;
context.beginPath();
context.fillStyle = "red";
context.arc(centerPoint.x , centerPoint.y,3,0,Math.PI*2,true);
context.fillText("X:"+centerPoint.x + ", Y:"+centerPoint.y,centerPoint.x,centerPoint.y-15 );
context.fill();
context.closePath();
}
}
/script
/body
/html
哇。。要自己用css加div写。。好难哦。。
考虑用现成的框架，，如ext,,jqury.dojo.等。。
设置一个带border的div，对象A在
mousedown
的时候监听
mousemove
事件，根据鼠标的位移来设置其宽度，mouseup的时候，移除mousemove事件。
