这篇文章主要介绍了js中构造流程图的核心技术JsPlumb，jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，需要的朋友可以参考下
前言：上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示，以及简单的JsPlumb代码示例。这篇还是接着来看看各个效果的代码说明。
一、设置连线的样式和颜色效果代码示例
大概的效果如图：
这些效果看着很简单，那么，我们如何用代码去实现它呢。上章我们说过，JsPlumb的连线样式是由点的某些属性决定的，既然如此，我们就通过设置点的样式来动态改变连线的样式即可。来看代码：
首先来看看连线类型的那个select
连线类型： 直线 折线 曲线
在页面初始化的时候注册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 其实也就几行代码，设置已经存在和将要拖动到界面上面的端点的连线样式。
二、全选、全选拖动效果代码示例
可以选中元素，批量拖动元素和连线，大概效果：
看看实现代码：
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 = 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 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
三、对齐、旋转代码示例
//左对齐 function SelectAlignLeft() { var arr = getSelectedRegions(); var iLeft = 0; var id = ""; for (var i = 0; i iLeft || iLeft === 0) { iLeft = $(arr[i]).position().left + parseInt(GetStyle(arr[i], "width")); } } for (var j = 0; j iTop || iTop === 0) { iTop = $(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")); } } for (var j = 0; j
代码可能有点乱，待整理。上章有博友就找我要过源码，这次出来一个初级的版本，希望可以帮助大家更好的学习流程图的核心技术JsPlumb。
以上就是详解js中构造流程图的核心技术JsPlumb（2）的详细内容，更多请关注本站其它相关文章！
