使用jsPlumb插件实现动态连线功能

这周去看了两天的羽毛球亚锦赛，工作有提前晚上加班做一些，但是技术文章却拉下了。

创新互联专业为企业提供鄱阳网站建设、鄱阳做网站、鄱阳网站设计、鄱阳网站制作等企业网站建设、网页设计与制作、鄱阳企业网站模板建站服务，十余年鄱阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。

jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实jsPlumb可能主要是用来做流程图的，它在实现这方面的功能上非常强大，我在项目中只使用了它少部分功能，来实现项目中连线的效果。

以上是初始化jsPlumb对象的函数。

接下来获取数据，加载页面的系统和编制模块。

初始化连接锚点

//自动连线

java、js怎么实现连线题功能

你看看基础功能是否已经实现，你只要点击 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

javascript 怎么把多幅图片画进canvas中，并且能拖动他们，给他们连线

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时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。

如何用javascript画两个圆，找到两个圆心，将圆心连线，找到这条线的中点（坐标）

!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

怎样用javascript实现两个div之间有两根连线并能拖动?

哇。。要自己用css加div写。。好难哦。。

考虑用现成的框架，，如ext,,jqury.dojo.等。。

javascript想实现两个对象之间的连线效果【求思路】

设置一个带border的div，对象A在

mousedown

的时候监听

mousemove

事件，根据鼠标的位移来设置其宽度，mouseup的时候，移除mousemove事件。

当前文章：javascript连线,连线 联线
本文链接：http://scyanting.com/article/dsiojoo.html