前言:上篇詳解js中構造流程圖的核心技術JsPlumb介紹了下JsPlumb在浏覽器裡面畫流程圖的效果展示,以及簡單的JsPlumb代碼示例。這篇還是接著來看看各個效果的代碼說明。
一、設置連線的樣式和顏色效果代碼示例
大概的效果如圖:
這些效果看著很簡單,那麼,我們如何用代碼去實現它呢。上章我們說過,JsPlumb的連線樣式是由點的某些屬性決定的,既然如此,我們就通過設置點的樣式來動態改變連線的樣式即可。來看代碼:
首先來看看連線類型的那個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事件
//全局的空心圓端點樣式設置 var hollowCircle = { DragOptions: { cursor: 'pointer', zIndex: 2000 }, endpoint: ["Dot", { radius: 7 }], //端點的形狀 connectorStyle: connectorPaintStyle,//連接線的顏色,大小樣式 connectorHoverStyle: connectorHoverStyle, paintStyle: { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 5, lineWidth: 2 }, //端點的顏色樣式 //anchor: "AutoDefault", isSource: true, //是否可以拖動(作為連線起點) connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //連接線的樣式種類有[Bezier],[Flowchart],[StateMachine ],[Straight ] isTarget: true, //是否可以放置(連線終點) maxConnections: -1, // 設置連接點最多可以連接幾條線 connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]] }; //頁面初始化完成之後 $(function () { //連線樣式下拉框的change事件 $("#sel_linetype").change(function () { var strlinetype = ""; var strlinecolor = ""; //設置新添加元素的節點的連線樣式 //直線的樣式和樣色 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 }]; } //設置已經存在的所有的連接點的連線樣式 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; } }); });
其實也就幾行代碼,設置已經存在和將要拖動到界面上面的端點的連線樣式。
二、全選、全選拖動效果代碼示例
可以選中元素,批量拖動元素和連線,大概效果:
看看實現代碼:
1、初始化的時候注冊可選中
$(function () { var oRegionSelect = new RegionSelect({ region: '#divCenter div.node', selectedClass: 'seled', parentId: "divCenter" }); oRegionSelect.select(); });
2、選中相關方法
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數組,並加入當前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數組,並加入當前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) { // 創建模擬 選擇框 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; } // 判斷一個區域是否在選擇區內 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; } /*-------------------------------------- 區域選擇方法結束 --------------------------------------------*/ 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); } }
三、對齊、旋轉代碼示例
//左對齊 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(); } //旋轉 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有用 }
代碼可能有點亂,待整理。上章有博友就找我要過源碼,這次出來一個初級的版本,希望可以幫助大家更好的學習流程圖的核心技術JsPlumb。