詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb（2）
更新時間：2015年12月08日 10:37:21 作者：懶得安分
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb，jsPlumb是一個強(qiáng)大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下
前言：上篇詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb介紹了下JsPlumb在瀏覽器里面畫流程圖的效果展示，以及簡單的JsPlumb代碼示例。這篇還是接著來看看各個效果的代碼說明。
一、設(shè)置連線的樣式和顏色效果代碼示例
大概的效果如圖：
這些效果看著很簡單，那么，我們?nèi)绾斡么a去實(shí)現(xiàn)它呢。上章我們說過，JsPlumb的連線樣式是由點(diǎn)的某些屬性決定的，既然如此，我們就通過設(shè)置點(diǎn)的樣式來動態(tài)改變連線的樣式即可。來看代碼：
首先來看看連線類型的那個select
<div id="btn_linetype" class="divMenuBtn btn-default btn"> 連線類型： <select id="sel_linetype" style="width:80px;height:20px"> <option value="2">直線</option> <option value="1">折線</option> <option value="3">曲線</option> </select> </div>
在頁面初始化的時候注冊select的change事件
//全局的空心圓端點(diǎn)樣式設(shè)置
var hollowCircle = {
DragOptions: { cursor: 'pointer', zIndex: 2000 },
endpoint: ["Dot", { radius: 7 }], //端點(diǎn)的形狀
connectorStyle: connectorPaintStyle,//連接線的顏色，大小樣式
connectorHoverStyle: connectorHoverStyle,
paintStyle: {
strokeStyle: "#1e8151",
fillStyle: "transparent",
radius: 5,
lineWidth: 2
}, //端點(diǎn)的顏色樣式
//anchor: "AutoDefault",
isSource: true, //是否可以拖動（作為連線起點(diǎn)）
connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //連接線的樣式種類有[Bezier],[Flowchart],[StateMachine ],[Straight ]
isTarget: true, //是否可以放置（連線終點(diǎn)）
maxConnections: -1, // 設(shè)置連接點(diǎn)最多可以連接幾條線
connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};
//頁面初始化完成之后
$(function () {
//連線樣式下拉框的change事件
$("#sel_linetype").change(function () {
var strlinetype = "";
var strlinecolor = "";
//設(shè)置新添加元素的節(jié)點(diǎn)的連線樣式
//直線的樣式和樣色
if ($(this).val() == "1") {
strlinetype = "Flowchart";
strlinecolor = "red";
hollowCircle.connector = ["Flowchart", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }];
}
//折線的樣式和顏色
else if ($(this).val() == "2") {
strlinetype = "Straight";
strlinecolor = "green";
hollowCircle.connector = ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }];
}
//曲線的樣式和顏色
else if ($(this).val() == "3") {
strlinetype = "Bezier";
strlinecolor = "orange";
hollowCircle.connector = ["Bezier", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }];
}
//設(shè)置已經(jīng)存在的所有的連接點(diǎn)的連線樣式
var arrnode = $("#divCenter").find(".node");
for (var i = 0; i < arrnode.length; i++) {
var arrendpoints = jsPlumb.getEndpoints($(arrnode[i]).attr("id"));
if (arrendpoints == undefined || arrendpoints == null) {
return;
}
var oconnector = arrendpoints[0].connector;
if (oconnector == null || oconnector == undefined) {
return;
}
oconnector[0] = strlinetype;
var oconnectstyle = arrendpoints[0].connectorStyle;
if (oconnectstyle == null || oconnectstyle == undefined) {
return;
}
oconnectstyle.strokeStyle = strlinecolor;
}
});
});
其實(shí)也就幾行代碼，設(shè)置已經(jīng)存在和將要拖動到界面上面的端點(diǎn)的連線樣式。
二、全選、全選拖動效果代碼示例
可以選中元素，批量拖動元素和連線，大概效果：
看看實(shí)現(xiàn)代碼：
1、初始化的時候注冊可選中
$(function () {
var oRegionSelect = new RegionSelect({
region: '#divCenter div.node',
selectedClass: 'seled',
parentId: "divCenter"
});
oRegionSelect.select();
});
2、選中相關(guān)方法
var _selectedRegions = [];
//var selProp;
function 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 = function () {
var _self = this;
_self.regions = [];
var _regions = document.getElementsBySelector(_self.selProp["region"]);//$("#divCenter > .node");//
var bSelect = true;
if (_regions && _regions.length > 0) {
for (var i = 0; i < _regions.length; i++) {
_regions[i].onmousedown = function () {
bSelect = false;
var evt = window.event || arguments[0];
if (!evt.shiftKey && !evt.ctrlKey) {
if ($.inArray(this, _selectedRegions) === -1) {
// 清空所有select樣式
_self.clearSelections(_regions);
this.className += " " + _self.selectedClass;
// 清空selected數(shù)組，并加入當(dāng)前select中的元素
_selectedRegions = [];
_selectedRegions.push(this);
}
} else {
if (this.className.indexOf(_self.selectedClass) == -1) {
this.className += " " + _self.selectedClass;
_selectedRegions.push(this);
} else {
this.className = this.className.replaceAll(_self.selectedClass, "");
_selectedRegions.remove(this);
}
}
clearEventBubble(evt);
}
this.regions.push(_regions[i]);
}
}
if (bSelect) {
// 清空所有select樣式
_self.clearSelections(_regions);
// 清空selected數(shù)組，并加入當(dāng)前select中的元素
_selectedRegions = [];
}
}
RegionSelect.prototype.select = function () {
var _self = this;
var sDivId = _self.parentId;
var intMousePosition = [0, 0];
var intOriginalPosition = [0, 0];
var parentWidth = parseInt(document.getElementById(sDivId).parentElement.offsetWidth);
var parentHeight = parseInt(document.getElementById(sDivId).parentElement.offsetHeight);
addEvent("mousedown", function () {
var evt = window.event || arguments[0];
var buttonType = evt.buttons || evt.button;
if (evt.target != undefined) {
if (evt.target.id !== sDivId) return;
}
if (evt.srcElement != undefined) {
if (evt.srcElement.id !== sDivId) return;
}
if (evt.buttons == undefined && buttonType == 0){
_self.onBeforeSelect(evt, sDivId);
}
if (buttonType === 1) {
_self.onBeforeSelect(evt, sDivId);
}
if (buttonType === 2) {
intMousePosition = [evt.clientX, evt.clientY];
var movX = parseInt(GetStyle(document.getElementById(sDivId), "left"));
var movY = parseInt(GetStyle(document.getElementById(sDivId), "top"));
intOriginalPosition = [movX, movY];
document.getElementById(sDivId).style.cursor = "move";
}
clearEventBubble(evt);
}, document);
addEvent("mousemove", function () {
var evt = window.event || arguments[0];
//if (evt.target.id !== sDivId) return;
var buttonType = evt.buttons || evt.button;
if (evt.buttons == undefined && buttonType == 0) {
_self.onSelect(evt, sDivId);
}
if (buttonType === 1) {
_self.onSelect(evt, sDivId);
}
if (buttonType === 2) {
var newX = intOriginalPosition[0] + evt.clientX - intMousePosition[0];
var newY = intOriginalPosition[1] + evt.clientY - intMousePosition[1];
if (newX >= 0) {
newX = 0;
}
if (newY >= 0) {
newY = 0;
}
$("#" + sDivId).css("left", newX + "px");
$("#" + sDivId).css("top", newY + "px");
$("#" + sDivId).css("width", (parentWidth-newX) + "px");
$("#" + sDivId).css("height", (parentHeight-newY) + "px");
}
clearEventBubble(evt);
}, document);
addEvent("mouseup", function () {
var evt = window.event || arguments[0];
var buttonType = evt.buttons || evt.button;
if (evt.buttons == undefined && buttonType == 0) {
}
if (buttonType === 1) {
}
document.getElementById(sDivId).style.cursor = "default";
_self.onEnd();
}, document);
}
RegionSelect.prototype.onBeforeSelect = function (evt, sDivId) {
// 創(chuàng)建模擬 選擇框
var _self = this;
_self.InitRegions(_self.selProp);
if (!document.getElementById("selContainer")) {
this.selectDiv = document.createElement("div");
this.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
this.selectDiv.id = "selContainer";
document.getElementById(sDivId).appendChild(this.selectDiv);
} else {
this.selectDiv = document.getElementById("selContainer");
}
this.startX = posXY(evt, sDivId).x;
this.startY = posXY(evt, sDivId).y;
this.isSelect = true;
}
RegionSelect.prototype.onSelect = function (evt, sDivId) {
var self = this;
if (self.isSelect) {
if (self.selectDiv.style.display == "none") self.selectDiv.style.display = "";
var posX = posXY(evt, sDivId).x;
var poxY = posXY(evt, sDivId).y;
self.selectDiv.style.left = Math.min(posX, this.startX) + "px";
self.selectDiv.style.top = Math.min(poxY, this.startY) + "px";
self.selectDiv.style.width = Math.abs(posX - this.startX) + "px";
self.selectDiv.style.height = Math.abs(poxY - this.startY) + "px";
var regionList = self.regions;
for (var i = 0; i < regionList.length; i++) {
if (self.selectDiv.parentNode.id !== regionList[i].parentNode.id) continue;
var r = regionList[i], sr = self.innerRegion(self.selectDiv, r);
if (sr && r.className.indexOf(self.selectedClass) == -1) {
r.className = r.className + " " + self.selectedClass;
_selectedRegions.push(r);
} else if (!sr && r.className.indexOf(self.selectedClass) != -1) {
r.className = r.className.replaceAll(self.selectedClass, "");
_selectedRegions.remove(r);
}
}
}
}
RegionSelect.prototype.onEnd = function () {
var self = this;
if (self.selectDiv) {
self.selectDiv.style.display = "none";
}
this.isSelect = false;
//_selectedRegions = this.selectedRegion;
}
// 判斷一個區(qū)域是否在選擇區(qū)內(nèi)
RegionSelect.prototype.innerRegion = function (selDiv, region) {
var s_top = parseInt(selDiv.style.top);
var s_left = parseInt(selDiv.style.left);
var s_right = s_left + parseInt(selDiv.offsetWidth);
var s_bottom = s_top + parseInt(selDiv.offsetHeight);
var r_top = parseInt(region.offsetTop);
var r_left = parseInt(region.offsetLeft);
var r_right = r_left + parseInt(region.offsetWidth);
var r_bottom = r_top + parseInt(region.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 l = Math.max(s_left, r_left);
if (b > t + 5 && r > l + 5) {
return region;
} else {
return null;
}
}
RegionSelect.prototype.clearSelections = function (regions) {
for (var i = 0; i < regions.length; i++) {
regions[i].className = regions[i].className.replaceAll(this.selectedClass, "");
}
}
function getSelectedRegions() {
return _selectedRegions;
}
/*-------------------------------------- 區(qū)域選擇方法結(jié)束 --------------------------------------------*/
function showSelDiv() {
var selInfo = "";
var arr = getSelectedRegions();
for (var i = 0; i < arr.length; i++) {
selInfo += arr[i].innerHTML + "\n";
}
alert("共選擇 " + arr.length + " 個文件，分別是：\n" + selInfo);
}
function MoveSelectDiv(event, ui,id) {
var arr = getSelectedRegions();
var iMoveLeft = ui.position.left - ui.originalPosition.left;
var iMoveTop = ui.position.top - ui.originalPosition.top;
for (var i = 0; i < arr.length; i++) {
//if (arr[i].id === id) continue;
if (arr[i].parentNode.id !== document.getElementById(id).parentNode.id) continue;
var iLeft = parseInt($(arr[i]).attr("bLeft"));
var iTop = parseInt($(arr[i]).attr("bTop"));
$(arr[i]).css("left", (iLeft + iMoveLeft) + "px");
$(arr[i]).css("top", (iTop + iMoveTop) + "px");
}
}
function startMove() {
var arr = getSelectedRegions();
for (var i = 0; i < arr.length; i++) {
$(arr[i]).attr("bLeft", $(arr[i]).position().left);
$(arr[i]).attr("bTop", $(arr[i]).position().top);
}
}
三、對齊、旋轉(zhuǎn)代碼示例
//左對齊
function SelectAlignLeft() {
var arr = getSelectedRegions();
var iLeft = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if ($(arr[i]).position().left<iLeft||iLeft===0) {
iLeft = $(arr[i]).position().left;
}
}
for (var j = 0; j < arr.length; j++) {
if (id !== arr[j].parentNode.id) continue;
$(arr[j]).css("left", iLeft + "px");
}
jsPlumb.repaintEverything();
}
//居中對齊
function SelectAlignCenter() {
var arr = getSelectedRegions();
var iLeft = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if ($(arr[i]).position().left < iLeft || iLeft === 0) {
iLeft = $(arr[i]).position().left + parseInt(GetStyle(arr[i],"width")) / 2;
}
}
for (var j = 0; j < arr.length; j++) {
if (id !== arr[j].parentNode.id) continue;
$(arr[j]).css("left", (iLeft - parseInt(GetStyle(arr[j],"width")) / 2) + "px");
}
jsPlumb.repaintEverything();
}
//右對齊
function SelectAlignRight() {
var arr = getSelectedRegions();
var iLeft = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if ($(arr[i]).position().left + parseInt(GetStyle(arr[i], "width")) > iLeft || iLeft === 0) {
iLeft = $(arr[i]).position().left + parseInt(GetStyle(arr[i], "width"));
}
}
for (var j = 0; j < arr.length; j++) {
if (id !== arr[j].parentNode.id) continue;
$(arr[j]).css("left", (iLeft - parseInt(GetStyle(arr[j], "width"))) + "px");
}
jsPlumb.repaintEverything();
}
//上對齊
function SelectAlignTop() {
var arr = getSelectedRegions();
var iTop = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if ($(arr[i]).position().top < iTop || iTop === 0) {
iTop = $(arr[i]).position().top;
}
}
for (var j = 0; j < arr.length; j++) {
if (id !== arr[j].parentNode.id) continue;
$(arr[j]).css("top", iTop + "px");
}
jsPlumb.repaintEverything();
}
//垂直居中
function SelectAlignMiddle() {
var arr = getSelectedRegions();
var iTop = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if ($(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")) / 2 < iTop || iTop === 0) {
iTop = $(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")) / 2;
}
}
for (var j = 0; j < arr.length; j++) {
if (id !== arr[j].parentNode.id) continue;
$(arr[j]).css("top", (iTop - parseInt(GetStyle(arr[j], "height")) / 2) + "px");
}
jsPlumb.repaintEverything();
}
//下對齊
function SelectAlignBottom() {
var arr = getSelectedRegions();
var iTop = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if ($(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")) > iTop || iTop === 0) {
iTop = $(arr[i]).position().top + parseInt(GetStyle(arr[i], "height"));
}
}
for (var j = 0; j < arr.length; j++) {
if (id !== arr[j].parentNode.id) continue;
$(arr[j]).css("top", (iTop - parseInt(GetStyle(arr[j], "height"))) + "px");
}
jsPlumb.repaintEverything();
}
//上下靠攏
function SelectUpColse() {
var arr = getSelectedRegions();
var iTop = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if (iTop === 0) iTop = $(arr[i]).position().top;
$(arr[i]).css("top", iTop + "px");
iTop += parseInt(GetStyle(arr[i], "height"));
}
jsPlumb.repaintEverything();
}
//左右靠攏
function SelectLeftColse() {
var arr = getSelectedRegions();
var iLeft = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if (iLeft === 0) iLeft = $(arr[i]).position().left;
$(arr[i]).css("left", iLeft + "px");
iLeft += parseInt(GetStyle(arr[i], "width"));
}
jsPlumb.repaintEverything();
}
//同高
function SelectSameHeight() {
var arr = getSelectedRegions();
var iHeigth = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if (iHeigth === 0) iHeigth = parseInt(GetStyle(arr[i], "height"));
$(arr[i]).css("height", iHeigth+"px");
}
jsPlumb.repaintEverything();
}
//同寬
function SelectSameWidth() {
var arr = getSelectedRegions();
var iWidth = 0;
var id = "";
for (var i = 0; i < arr.length; i++) {
if (id === "") id = arr[i].parentNode.id;
if (id !== arr[i].parentNode.id) continue;
if (iWidth === 0) iWidth = parseInt(GetStyle(arr[i], "width"));
$(arr[i]).css("width", iWidth + "px");
}
jsPlumb.repaintEverything();
}
//旋轉(zhuǎn)
function SelectClockwise(index) {
var arr = getSelectedRegions();
//var iWidth = 0;
//var id = "";
for (var i = 0; i < arr.length; i++) {
//if (id === "") id = arr[i].parentNode.id;
//if (id !== arr[i].parentNode.id) continue;
var sIndex= arr[i].style.transform.replace("rotate(", "").replace("deg)", "");
var iNum = 0;
if (sIndex) iNum = parseInt(sIndex);
$(arr[i]).css("transform", "rotate(" + (iNum + index)%360 + "deg)");
var points = jsPlumb.getEndpoints(arr[i]);
}
jsPlumb.repaintEverything();
}
//刪除選中
function DeleteSelect() {
var arr = getSelectedRegions();
for (var i = 0; i < arr.length; i++) {
jsPlumb.remove(arr[i],true);
//var points = jsPlumb.getEndpoints(arr[i]);
//for (var j = 0; j < points.length; j++) {
// jsPlumb.deleteEndpoint(points[j]);
//}
//arr[i].parentNode.removeChild(arr[i]);
}
jsPlumb.repaintEverything();
}
function GetStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]; //只適用于IE
}
else {
return getComputedStyle(obj, false)[attr]; //只適用于FF,Chrome,Safa
}
return obj.style[attr]; //本人測試在IE和FF下沒有用,chrome有用
}
代碼可能有點(diǎn)亂，待整理。上章有博友就找我要過源碼，這次出來一個初級的版本，希望可以幫助大家更好的學(xué)習(xí)流程圖的核心技術(shù)JsPlumb。
相關(guān)文章
第九篇Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解
這篇文章主要介紹了Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
最近在移動端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"，下面我們來簡單了解一下吧2019-05-05
微信小程序使用 official-account 組件實(shí)現(xiàn)一鍵跳轉(zhuǎn)公眾號
本文詳細(xì)介紹了如何在微信小程序中實(shí)現(xiàn)一鍵跳轉(zhuǎn)到公眾號的功能,包括準(zhǔn)備工作、使用`<official-account>`組件實(shí)現(xiàn)跳轉(zhuǎn)、關(guān)聯(lián)小程序與公眾號的方法,以及常見錯誤及解決方案,通過本文的指導(dǎo),開發(fā)者可以順利實(shí)現(xiàn)這一功能,提升用戶體驗(yàn)2024-11-11
詳解JavaScript的Symbol類型、隱藏屬性、全局注冊表
這篇文章主要介紹了JavaScript的Symbol類型、隱藏屬性、全局注冊表,本文主要對其使用方法和使用場景做個簡單的介紹，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了js實(shí)現(xiàn)微信分享朋友鏈接顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
JVM是一種用于計(jì)算設(shè)備的規(guī)范，它是一個虛構(gòu)出來的機(jī)器，是通過在實(shí)際的計(jì)算機(jī)上仿真模擬各種功能實(shí)現(xiàn)的。JVM的內(nèi)存區(qū)域可以被分為：線程、棧、堆、靜態(tài)方法區(qū)。本文將介紹JVM的內(nèi)存模型，感興趣的小伙伴，可以參考下2021-06-06
在JavaScript中終止forEach循環(huán)的三種方式
如何終止forEach循環(huán)這個問題估計(jì)會難倒一部分同學(xué),甚至?xí)腥朔磫?forEach循環(huán)在JavaScript中能終止嗎？本文小編給大家介紹了三種方式可以終止forEach循環(huán),需要的朋友可以參考下2023-11-11
JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別
這篇文章主要介紹了JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JS 有趣的eval優(yōu)化輸入驗(yàn)證實(shí)例代碼
這篇文章介紹了eval優(yōu)化輸入驗(yàn)證實(shí)例代碼，有需要的朋友可以參考一下2013-09-09
解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。2013-08-08