JS（2）（2）结构流程图核心技术的详细解释
前言：详细阐述了JS结构流程图的核心技术。jsPlumb介绍流程的效果显示在浏览器下的JsPlumb，和一个简单的jsPlumb代码示例。这将继续看每个效果的代码指令。1。设置连接样式和颜色效果代码的示例
近似结果如下：
这些效果看起来非常简单，那么我们如何使用代码来实现它呢在最后一章中，我们说过，jsPlumb连接方式由点一些属性决定的。在这种情况下，我们可以通过设置点的样式来动态地改变布线风格：
首先查看连接类型的选择。
连接类型：
U3000 U3000
直线
折叠线
曲线
U3000 U3000
在页面初始化时进行选择更改事件的注册
设置/空心圆端式整体
无功hollowcircle = { {
dragoptions：{光标：'pointer '，在：2000 }，
端点：{圆点
connectorstyle：connectorpaintstyle， / /连接线的颜色，大小，风格
connectorhoverstyle：connectorhoverstyle，
paintstyle：{
strokeStyle：# 1e8151
填充颜色：透明
半径：5，
线宽：2
}，端点颜色样式
/ /主播：autodefault
IsSource：真的， / /是否可以拖动（作为一个起点线）
连接器：{ 0 }，{ 0直，{存根：，差距：10、半径：5，alwaysrespectstubs：真} }，式式连接线 / / { } { } Bezier，流程图，状态机，{ }，{直
目标：真的， / /是否可以放置（连接点）
MAXCONNECTIONS：- 1， / /设置连接点最多可以连接几行
connectoroverlays：
}；
页初始化完成
$（函数（）{（））
连接样式下拉框更改事件
$（# sel_linetype）。变化（函数（）{）
无功strlinetype = ；
无功strlinecolor = ；
设置节点连接样式的新添加元素
线条的样式和颜色
如果（$）（这个）（= 1）{
strlinetype =流程图；
strlinecolor =红色；
hollowcircle.connector = {流程图
}
行样式和颜色
否则如果（$）（this）（=）（= 2）{
strlinetype =直；
strlinecolor = 绿色；
hollowcircle.connector = { 直
}
样式和颜色的曲线。
否则如果（$）（this）（=）（= 3）{
strlinetype =B；
strlinecolor =橙色；
hollowcircle.connector = {贝塞尔
}
所有连接点集都已经存在连接方式。
无功arrnode = $（# divcenter ），（节点）；
对于（var i = 0；i < arrnode.length；i++）{
无功arrendpoints = jsplumb.getendpoints（$（arrnode {我}）。Attr（ID））；
如果（arrendpoints = =定义的| | { arrendpoints = = null）
返回；
}
无功oconnector = arrendpoints { 0 }。连接器；
如果（oconnector = = null | | { oconnector = =未定义）
返回；
}
oconnector { 0 } = strlinetype；
无功oconnectstyle = arrendpoints { 0 }。connectorstyle；
如果（oconnectstyle = = null | | { oconnectstyle = =未定义）
返回；
}
oconnectstyle.strokestyle = strlinecolor；
}
}）；
}）；
事实上，有几行代码设置了已经存在的行样式并将其拖到接口的结尾处。
二、选择所有，选择拖动效果代码示例
元素可以被选中，元素和连接被批量拖拉。
查看实现代码：
1。初始化时可以选择注册。
$（函数（）{（））
无功oregionselect =新regionselect（{
区：# divcenter div.node，
SelectedClass：'seled，
ParentID：divcenter
}）；
oregionselect.select（）；
}）；
2。选择相关的方法
无功_selectedregions = { }；
/ /无功selprop；
功能regionselect（selregionprop）{
/ / selprop = selregionprop；
this.regions = { }；
this.selprop = selregionprop；
This.InitRegions（selregionprop）；
this.selectedclass = selregionprop {selectedclass}；
this.selectedregion = { }；
this.selectdiv = null；
this.startx = null；
this.starty = null；
this.parentid = selregionprop {ParentID}；
}
（regionselect.prototype.initregions =功能）{
无功_self =这；
_self.regions = { }；
无功_regions document.getelementsbyselector（_self。selprop { =区}）； / / $（# divcenter >。结）； / /
VaR中选取=真；
如果（_regions _regions.length > 0）{
对于（var i = 0；i < _regions.length；i++）{
（_regions {我}。onmousedown =功能）{
中选取= false；
VaR EVT = window.event参数{ 0 } | |；
如果（！evt.shiftkey！EVT。ctrlkey）{
如果（美元。内部数组（这一点，_selectedregions）= 1）{
清空所有选择样式
_self.clearselections（_regions）；
this.classname =+ _self。selectedclass ；
空选择数组，并在选择中加入当前元素
_selectedregions = { }；
_selectedregions.push（本）；
}
{人}
如果（this.classname.indexof（_self。selectedclass）= = 1）{
this.classname =+ _self。selectedclass ；
_selectedregions.push（本）；
{人}
this.classname = this.classname.replaceall（_self.selectedclass，）；
_selectedregions.remove（本）；
}
}
cleareventbubble（EVT）；
}
This.regions.push（_regions {我}）；
}
}
如果（中选取）{
清空所有选择样式
_self.clearselections（_regions）；
空选择数组，并在选择中加入当前元素
_selectedregions = { }；
}
}
（regionselect.prototype.select =功能）{
无功_self =这；
无功sdivid = _self.parentid；
无功intmouseposition = { 0, 0 }；
无功intoriginalposition = { 0, 0 }；
无功parentwidth = parseInt（document.getelementbyid（sdivid）。parentelement。offsetwidth）；
无功parentheight = parseInt（document.getelementbyid（sdivid）。parentelement。offsetheight）；
AddEvent（mouseDown
VaR EVT = window.event参数{ 0 } | |；
var ButtonType = evt.buttons evt.button | |；
如果（evt.target！=未定义的）{
如果（evt.target.id！= = sdivid）返回；
}
如果（evt.srcelement！=未定义的）{
如果（evt.srcelement.id！= = sdivid）返回；
}
如果（evt.buttons = =不= = ButtonType 0）{
_self.onbeforeselect（EVT，sdivid）；
}
如果（ButtonType = 1）{
_self.onbeforeselect（EVT，sdivid）；
}
如果（ButtonType = 2）{
intmouseposition = { evt.clientx，EVT clienty }；
VaR MOVX = parseInt（getstyle（document.getelementbyid（sdivid），左）））；
无功movy = parseInt（getstyle（document.getelementbyid（sdivid），顶）））；
intoriginalposition = { MOVX，movy }；
document.getelementbyid（sdivid）。style.cursor =搬家；
}
cleareventbubble（EVT）；
}，文档）；
AddEvent（MouseMove
VaR EVT = window.event参数{ 0 } | |；
/ /如果（evt.target.id！= = sdivid）返回；
var ButtonType = evt.buttons evt.button | |；
如果（evt.buttons = =不= = ButtonType 0）{
_self.onselect（EVT，sdivid）；
}
如果（ButtonType = 1）{
_self.onselect（EVT，sdivid）；
}
如果（ButtonType = 2）{
无功newx = intoriginalposition { 0 } + evt.clientx - intmouseposition { 0 }；
VaR由于= intoriginalposition { 1 } + evt.clienty - intmouseposition { 1 }；
如果（newx > = 0）{
newx = 0；
}
如果（由于> = 0）{
由于= 0；
}
$（# + sdivid）。Css（左
$（# + sdivid ）Css（上。
$（# + sdivid）。Css（宽度（parentwidth newx）+PX）；
$（# + sdivid）。Css（高度（parentheight期货交易所）+PX）；
}
cleareventbubble（EVT）；
}，文档）；
AddEvent（MouseUp
VaR EVT = window.event参数{ 0 } | |；
var ButtonType = evt.buttons evt.button | |；
如果（evt.buttons = =不= = ButtonType 0）{
}
如果（ButtonType = 1）{
}
document.getelementbyid（sdivid）。style.cursor =默认；
_self.onend（）；
}，文档）；
}
regionselect.prototype.onbeforeselect =功能（EVT，sdivid）{
创建模拟选择框
无功_self =这；
_self.initregions（_self。selprop）；
如果（！document.getelementbyid（selcontainer ））{
this.selectdiv = document.createelement（div）；
this.selectdiv.style.csstext = 的位置：绝对；宽度：0px；高度：0px；字体大小：0px；保证金：0px；padding: 0px；边界：1px冲# 0099ff；背景颜色：# c3d5ed；背景颜色：# c3d5ed；（）；
this.selectdiv.id =selcontainer ；
document.getelementbyid（sdivid）。AppendChild（这。selectdiv）；
{人}
this.selectdiv = document.getelementbyid（selcontainer ）；
}
this.startx = posxy（EVT，sdivid X）；
this.starty = posxy（EVT，sdivid Y）；
this.isselect =真；
}
regionselect.prototype.onselect =功能（EVT，sdivid）{
var =；
如果（自我。选用）{
如果（self.selectdiv.style.display = self.selectdiv.style.display = = 无）；
var POSx = posxy（EVT，sdivid X）；
VaR的= posxy（EVT，sdivid Y）；
self.selectdiv.style.left = math.min（条POSx，这。startx）+PX；
self.selectdiv.style.top = math.min（这个，这个初始位置）+PX；
self.selectdiv.style.width = math.abs（条POSx这。startx）+PX；
self.selectdiv.style.height = math.abs（珀西-这个初始位置）+PX；
无功regionlist = self.regions；
对于（var i = 0；i < regionlist.length；i++）{
如果（self.selectdiv.parentnode.id！= = regionlist {我}。父节点ID）继续；
VAR r = regionlist {我}，SR = self.innerregion（self.selectdiv，R）；
如果（SR r.classname.indexof（自我。selectedclass）= = 1）{
r.classname = r.classname ++ self.selectedclass；
_selectedregions.push（R）；
否则如果（！SR r.classname.indexof（自我。selectedclass）！= 1）{
r.classname = r.classname.replaceall（self.selectedclass，）；
_selectedregions.remove（R）；
}
}
}
}
（regionselect.prototype.onend =功能）{
var =；
如果（自我。selectdiv）{
self.selectdiv.style.display =没有；
}
this.isselect = false；
/ / _selectedregions = this.selectedregion；
}
确定选择区域中的区域
regionselect.prototype.innerregion =功能（seldiv，区）{
无功s_top = parseInt（seldiv。风格。顶部）；
无功s_left = parseInt（seldiv。风格。左）；
无功s_right = s_left + parseInt（seldiv。offsetwidth）；
无功s_bottom = s_top + parseInt（seldiv。offsetheight）；
无功r_top = parseInt（区域。offsettop）；
无功r_left = parseInt（区域。offsetleft）；
无功r_right = r_left + parseInt（区域。offsetwidth）；
无功r_bottom = r_top + parseInt（区域。offsetheight）；
var t = math.max（s_top，r_top）；
VAR r = Math.min（s_right，r_right）；
var b = math.min（s_bottom，r_bottom）；
var = math.max（s_left，r_left）；
如果（b + 5 5）
回流区；
{人}
返回null；
}
}
regionselect.prototype.clearselections =功能（地区）{
对于（var i = 0；i < regions.length；i++）{
地区{我}，{我} classname =地区。classname.replaceall（this.selectedclass，）；
}
}
功能getselectedregions（）{
返回_selectedregions；
}
/ * --------------------------------------区域选择方法-------------------------------------------- * /结束
功能showseldiv（）{
无功selinfo = ；
var arr = getselectedregions（）；
对于（var i = 0；i < arr.length；i++）{
selinfo = ARR {我} .innerHTML +；
}
警报（有限的选择+ arr.length + 文件，分别为：+ selinfo）；
}
功能moveselectdiv（事件、UI、ID）{
var arr = getselectedregions（）；
无功imoveleft = ui.position.left - ui.originalposition.left；
无功imovetop = ui.position.top - ui.originalposition.top；
对于（var i = 0；i < arr.length；i++）{
/ /如果（ARR {我}。ID = ID）继续；
如果我parentnode.id（ARR { }！= document.getelementbyid（ID）。父节点ID）继续；
VaR离开= parseInt（$（ARR {我}）。Attr（好））；
VaR ITOP = parseInt（$（ARR {我}）。Attr（BTOP ））；
$（ARR {我}）。Css（左
$（ARR {我}）。Css（顶
}
}
功能startmove（）{
var arr = getselectedregions（）；
对于（var i = 0；i < arr.length；i++）{
$(arr{i}).Attr (bLeft
$（ARR {我}）。Attr（BTOP
}
}
三、对齐、旋转代码示例
左/左
函数的SelectAlignLeft（）{
var arr = getselectedregions（）；
VaR离开= 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（$（ARR {我}）。位置（左），<<离开| |离开= = = 0）{
我离开= $（ARR {我}）。位置（左）；
}
}
对于（var j = 0；J < arr.length；j++）{
如果（id！= = ARR { J }。父节点ID）继续；
$（ARR {，}）。Css（左
}
JsPlumb.repaintEverything（）；
}
/中心
函数的SelectAlignCenter（）{
var arr = getselectedregions（）；
VaR离开= 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（$（ARR {我}）。位置（左）<我离开| | {我= = = 0）
我离开= $（ARR {我}）。位置（）。左+ parseInt（getstyle（ARR {我}，宽度）） / 2；
}
}
对于（var j = 0；J < arr.length；j++）{
如果（id！= = ARR { J }。父节点ID）继续；
$（ARR {，}）。Css（左），（离开- parseInt（getstyle（ARR {，}，宽度）） / 2）+PX）；
}
JsPlumb.repaintEverything（）；
}
右对齐
函数的SelectAlignRight（）{
var arr = getselectedregions（）；
VaR离开= 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（$（ARR {我}）。位置（左）+ parseInt（getstyle（ARR {我}，宽度）离开离开| |）> = = = 0）{
我离开= $（ARR {我}）。位置（）。左+ parseInt（getstyle（ARR {我}，宽度）））；
}
}
对于（var j = 0；J < arr.length；j++）{
如果（id！= = ARR { J }。父节点ID）继续；
$（ARR {，}）。Css（左），（离开- parseInt（getstyle（ARR {，}，宽度）））+PX）；
}
JsPlumb.repaintEverything（）；
}
对齐
函数的SelectAlignTop（）{
var arr = getselectedregions（）；
VaR ITOP = 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（$（ARR {我}）。位置（顶部）<伊通| | iTop = = = { 0）
伊通= $（ARR {我}）。位置（顶部）；
}
}
对于（var j = 0；J < arr.length；j++）{
如果（id！= = ARR { J }。父节点ID）继续；
$（ARR {，}）。Css（顶
}
JsPlumb.repaintEverything（）；
}
垂直中心
函数的SelectAlignMiddle（）{
var arr = getselectedregions（）；
VaR ITOP = 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（$（ARR {我}）。位置（顶部）+ parseInt（getstyle（ARR {我}，高度）） / 2＜伊通| | iTop = = = { 0）
伊通= $（ARR {我}）。位置（）。顶+ parseInt（getstyle（ARR {我}，高度）） / 2；
}
}
对于（var j = 0；J < arr.length；j++）{
如果（id！= = ARR { J }。父节点ID）继续；
$（ARR {，}）。Css（顶），（伊通- parseInt（getstyle（ARR {，}，高度）） / 2）+PX）；
}
JsPlumb.repaintEverything（）；
}
行/行
函数的SelectAlignBottom（）{
var arr = getselectedregions（）；
VaR ITOP = 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（$（ARR {我}）。位置（顶部）+ parseInt（getstyle（ARR {我}，高度）伊通伊通| |）> = = = 0）{
伊通= $（ARR {我}）。位置（）。顶+ parseInt（getstyle（ARR {我}，高度）））；
}
}
对于（var j = 0；J < arr.length；j++）{
如果（id！= = ARR { J }。父节点ID）继续；
$（ARR {，}）。Css（顶），（伊通- parseInt（getstyle（ARR {，}，高度）））+PX）；
}
JsPlumb.repaintEverything（）；
}
再靠近一点
函数的SelectUpColse（）{
var arr = getselectedregions（）；
VaR ITOP = 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（ITOP = 0 = $（ARR）伊通{我}）。位置（顶部）；
$（ARR {我}）。Css（顶
伊通= parseInt（getstyle（ARR {我}，高度））；
}
JsPlumb.repaintEverything（）；
}
关于关闭
函数的SelectLeftColse（）{
var arr = getselectedregions（）；
VaR离开= 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（我= 0 = $（ARR）离开{我}）。位置（左）；
$（ARR {我}）。Css（左
我离开= parseInt（getstyle（ARR {我}，宽度））；
}
JsPlumb.repaintEverything（）；
}
相同高度
函数的SelectSameHeight（）{
var arr = getselectedregions（）；
无功iheigth = 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（iheigth = 0）iheigth = parseInt（getstyle（ARR {我}，高度））；
$（ARR {我}）。Css（高
}
JsPlumb.repaintEverything（）；
}
相同的宽度
函数的SelectSameWidth（）{
var arr = getselectedregions（）；
VaR的Iwidth = 0；
var；
对于（var i = 0；i < arr.length；i++）{
如果（ID = = =ID = ARR {我}。parentNode。ID）；
如果（id！= = ARR {我}。父节点ID）继续；
如果（Iwidth = 0）的Iwidth = parseInt（getstyle（ARR {我}，宽度））；
$（ARR {我}）。Css（宽
}
JsPlumb.repaintEverything（）；
}
旋转
函数的SelectClockwise（指数）{
var arr = getselectedregions（）；
/ /无功的Iwidth = 0；
；
对于（var i = 0；i < arr.length；i++）{
/ /如果（ID = = =ID = ARR {我}。parentNode。ID）；
（如果）！= = ARR {我}。父节点ID）继续；
风险指数= ARR {我}。style.transform.replace（旋转（
var iNum = 0；
如果（指数）iNum = parseInt（指数）；
$（ARR {我}）。Css（变换
Var点= jsplumb.getendpoints（ARR {我}）；
}
JsPlumb.repaintEverything（）；
}
删除
功能deleteselect（）{
var arr = getselectedregions（）；
对于（var i = 0；i < arr.length；i++）{
JsPlumb.remove（ARR {我}，真的）；
/ /无功分= jsplumb.getendpoints（ARR {我}）；
/ /（var j = 0；J < points.length；j++）{
/ / jsplumb.deleteendpoint（点{，}）；
/