使用jsPlumb插件實現(xiàn)動態(tài)連線功能

這周去看了兩天的羽毛球亞錦賽，工作有提前晚上加班做一些，但是技術文章卻拉下了。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鄱陽網(wǎng)站建設、鄱陽做網(wǎng)站、鄱陽網(wǎng)站設計、鄱陽網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、鄱陽企業(yè)網(wǎng)站模板建站服務，十余年鄱陽做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

這段時間一直在尋找可以實現(xiàn)前端元素動態(tài)連線的功能，找了好幾個庫，考慮過用d3或者原生svg和canvas來實現(xiàn)，最后和同項目的同事商量后決定使用jsPlumb插件庫來做。

jsPlumb是一個強大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，其實jsPlumb可能主要是用來做流程圖的，它在實現(xiàn)這方面的功能上非常強大，我在項目中只使用了它少部分功能，來實現(xiàn)項目中連線的效果。

以上是初始化jsPlumb對象的函數(shù)。

接下來獲取數(shù)據(jù)，加載頁面的系統(tǒng)和編制模塊。

初始化連接錨點

//自動連線

java、js怎么實現(xiàn)連線題功能

你看看基礎功能是否已經(jīng)實現(xiàn)，你只要點擊 a跟3連線就行了，以後的具體邏輯和樣式自己調(diào)整

代碼如下

%@ 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里面的任何元素，包括已經(jīng)載入的圖片（實際上圖片已經(jīng)成為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是一個圖片節(jié)點。不會用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循環(huán)執(zhí)行繪制圖片的函數(shù)，以刷新圖片的位置，setInterval的間隔值越小，拖拽起來越“流暢”。

同時別忘了clearRect，當圖片移動到下一個位置時，清除上一個位置的圖片，參數(shù)為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過程，但我們不希望在拖拽結束后觸發(fā)點擊事件。

這里有個比較簡單的辦法，定義一個clickFlag默認為false,當onmousedown時設為true，若進行了onmousemove事件時設為false。

在最后onmouseup時判斷clickFlag的值，為true時才觸發(fā)點擊事件。也就是說當你按下鼠標時，只有不發(fā)現(xiàn)移動，松開鼠標時才會觸發(fā)點擊事件。

如何用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實現(xiàn)兩個div之間有兩根連線并能拖動?

哇。。要自己用css加div寫。。好難哦。。

考慮用現(xiàn)成的框架，，如ext,,jqury.dojo.等。。

javascript想實現(xiàn)兩個對象之間的連線效果【求思路】

設置一個帶border的div，對象A在

mousedown

的時候監(jiān)聽

mousemove

事件，根據(jù)鼠標的位移來設置其寬度，mouseup的時候，移除mousemove事件。

當前標題：javascript連線,連線 聯(lián)線
網(wǎng)站地址：http://chinadenli.net/article0/dsiojoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、網(wǎng)站導航、用戶體驗、網(wǎng)站制作、網(wǎng)站營銷、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)