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

JavaScript025

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

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

mousedown

的时候监听

mousemove

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

你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整

代码如下

<%@ page contentType="text/htmlcharset=utf-8" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>测试</title>

<script src="http://code.jquery.com/jquery-latest.js"></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 = 0i <div.lengthi++) {

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 = 0i <(rightX-leftX)/2i++) {

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: 20pxmargin-left: 30%" id="detail">

<div class="left" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px" onclick="drawThis(this)">a</div>

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">1</div>

<br />

<br />

<br />

<br />

<br />

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">b</div>

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">2</div>

<br />

<br />

<br />

<br />

<br />

<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">c</div>

<div class="right" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px" onclick="drawThis(this)">3</div>

</div>

</body>

</html>

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

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

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

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

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

初始化连接锚点

//自动连线