详解js中构造流程图的核心技术JsPlumb
项目里面用到了Web里面的拖拽流程图的技术JsPlumb，其实真不算难，不过项目里面用HTML做的一些类似flash的效果，感觉还不错，在此分享下。
一、效果图展示
1、从左边拖动元素到中间区域，然后连线
2、连线类型可以自定义：这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等
3、鼠标拖动区域选中元素，并且选中元素统一拖动位置。
4、对选中的元素左对齐。
5、对选中元素居中对齐
6、右对齐
7、上对齐
8、垂直居中对齐
9、下对齐
10、根据第一个选中的元素上下靠拢
11、根据第一个选中的元素左右靠拢
12、根据第一个选中的元素同高
13、根据第一个选中的元素同宽
14、选中元素顺时针旋转，点击一次旋转45度
15、选中元素逆时针旋转。
16、选中统一删除元素以及元素上面的连线
这里很多效果其实在项目中作用并不太大，很多单纯就是为了展示用的。
这里涉及的
效果比较多，可能要分多篇来介绍。这篇还是来看看构造流程图的核心技术：JsPlumb。
1、概述
关于JsPlumb的内容，在此就简单说明下吧。jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大。本项目中还是结合大家最熟悉的JQuery来讲解。并且还要注意的一点就是JsPlumb的浏览器兼容性，JsPlumb支持IE 6以上、火狐、谷歌等各种浏览器
2、使用
（1）引入JS文件
可以直接去官网上面下载最新的js库，由于JsPlumb需要JQuery的支持，按照网上的说法，它只兼容jQuery1.3.x及以上版本，并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。所以我们需要下载较高一点版本的JQuery和JQuery UI。关于JsPlumb的内容只需要引用一个Js即可。类似
rush:js;">
（2）初始化
使用JsPlumb需要注意一点，JsPlumb的连线的样式是由点确定的，也就是说点的样式里面包含了相关的属性来说明当使用此点来连线的时候，连线的样式应该是什么样的。
在我们项目里面，左边的模型区域，中间才是设计区域。那么要将一个元素从模型区域创建出来，就要用到我们JQuery UI里面的draggable和droppable事件。首先我们注册左边模型的draggable和中间区域的droppable事件。
cshtml页面代码，
首先我们定义几个点的样式的
全局变量
rush:js;">
//基本连接线样式
var connectorPaintStyle = {
strokeStyle: "#1e8151",fillStyle: "transparent",radius: 5,
linewidth: 2
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
linewidth: 3,
strokeStyle: "#216477",out
linewidth: 2,outlineColor: "white"
};
var endpointHoverStyle = {
fillStyle: "#216477",
strokeStyle: "#216477"
};
//空心圆端点样式设置
var hollowCircle = {
DragOptions: { cursor: 'pointer',zIndex: 2000 },endpoint: ["Dot",{ radius: 7 }],//端点的形状
connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
connectorHoverStyle: connectorHoverStyle,paintStyle: {
strokeStyle: "#1e8151",
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 }]]
};
然后再页面初始化完成之后注册事件
rush:js;">
$(function(){
//左边区域的draggable事件
$("#divContentLeftMenu .node").draggable({
helper: "clone",s
cope: "plant"
});
//中间拖拽区的drop事件
$("#divCenter").droppable({
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e: "plant",drop: function (event,ui) {
// 创建工厂模型到拖拽区
CreateModel(ui,$(this));
}
});
});
//1.创建模型（参数依次为：drop事件的ui、当前容器、id、当前样式）
function CreateModel(ui,selector) {
//1.1 添加html模型
var modelid = $(ui.draggable).attr("id");
i++;
var id = modelid + i;
var cur_css = modelid;
var type = $(ui.helper).attr("dbtype");
$(selector).append('<div class="node ' + cur_css + '" id="' + id + '" dbtype="' + type + '" parentid="' + $(selector).attr("id") + '" onclick="oInitElement.GetPropertiesByType(\'' + type + '\',this)" ondblclick="InitStation().DbClick(\'' + type + '\',this)" >' + $(ui.helper).html() + '
');
var left = parseInt(ui.offset.left - $(selector).offset().left);
var top = parseInt(ui.offset.top - $(selector).offset().top);
$("#" + id).css("left",left).css("top",top);
//jsPlumb.setContainer($("#divCenter"));
//1.2
添加连接点
jsPlumb.addEndpoint(id,{ anchors: "RightMiddle" },hollowCircle);
jsPlumb.addEndpoint(id,{ anchors: "LeftMiddle" },{ anchors: "TopCenter" },{ anchors: "B
ottomCenter" },hollowCircle);
jsPlumb.draggable(id);
//1.3 <a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>实体可draggable和resizable
$("#" + id).draggable({
containment: "parent",start: function () {
startMove();
},drag: function (event,ui) {
MoveSelectDiv(event,ui,id);
jsPlumb.repaintEverything();
},stop: function () {
jsPlumb.repaintEverything();
}
});
$("#" + id).resizable({
resize: function () {
jsPlumb.repaintEverything();
},stop: function () {
jsPlumb.repaintEverything();
//oInitElement.SendPropRequest("DTO_TM_PLANT",$(this));
}
});
return id;
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
