来自 关于计算机 2019-12-08 03:35 的文章
当前位置: 澳门太阳娱乐手机登录 > 关于计算机 > 正文

详整js中布局流程图的宗旨技能JsPlumb_javascript本事

花色里面用到了Web里面包车型客车拖拽流程图的技能JsPlumb,其实真不算难,可是项目里面用HTML做的生机勃勃部分挨近flash的法力,认为还能够,在那分享下。

生机勃勃、效果图展现

1、从左侧拖动成分到中游区域,然后连线

2、连线类型能够自定义:这里定义为直线、折线、曲线。实际项目中依照业务我们定义为分装线、分装支线、总装线等

3、鼠标拖动区域选七月素,并且选霜月素统洛阳第一拖沓机厂动地点。

4、对中选的要素左对齐。

5、对中选成分居中对齐

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以上、火狐、Google等各样浏览器

2、使用引进JS文件能够间接去官网络边下载最新的js库,由于JsPlumb需求JQuery的支撑,依据英特网的传道,它只包容jQuery1.3.x及以上版本,并在jQuery UI 1.7.x、1.8.x及1.9.x上测验通过。所以大家要求下载较高级中学一年级点版本的JQuery和JQuery UI。关于JsPlumb的内容只须求引用一个Js即可。形似

最早化使用JsPlumb需求注意一点,JsPlumb的连线的体裁是由点鲜明的,也便是说点的样式里面含有了连带的性质来注脚当使用此点来连线的时候,连线的体裁应该是何等的。在大家项目里面,左侧包车型地铁模型区域,中间才是设计区域。那么要将贰个成分从模型区域创设出来,将在动用大家JQuery UI里面包车型地铁draggable和droppable事件。首先大家报了名左侧模型的draggable和中级区域的droppable事件。

cshtml页面代码,

以此是右车模型的容器,

意味着中间区域容器。

  工厂模型   工艺段模型     工段       工位       

Js代码:先是我们定义多少个点的体制的全局变量

//基本连接线样式var connectorPaintStyle = { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 5, lineWidth: 2};// 鼠标悬浮在连接线上的样式var connectorHoverStyle = { lineWidth: 3, strokeStyle: "#216477", outlineWidth: 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", 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 }]]};

接下来再页面伊始化实现未来注册事件

 ${ //左边区域的draggable事件 $("#divContentLeftMenu .node").draggable({ helper: "clone", scope: "plant" }); //中间拖拽区的drop事件 $.droppable({ scope: "plant", drop: function  { // 创建工厂模型到拖拽区 CreateModel; }); //1.创建模型(参数依次为:drop事件的ui、当前容器、id、当前样式) function CreateModel { //1.1 添加html模型 var modelid = $.attr; i++; var id = modelid + i; var cur_css = modelid; var type = $.attr; $.append('' + $ + ''); var left = parseInt(ui.offset.left - $.left); var top = parseInt(ui.offset.top - $.top); $.css.css; //jsPlumb.setContainer; //1.2 添加连接点 jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle); jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle); jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle); jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle); jsPlumb.draggable; //1.3 注册实体可draggable和resizable $.draggable({ containment: "parent", start: function ; }, drag: function  { MoveSelectDiv; jsPlumb.repaintEverything(); }, stop: function () { jsPlumb.repaintEverything.resizable { jsPlumb.repaintEverything(); }, stop: function () { jsPlumb.repaintEverything(); //oInitElement.SendPropRequest("DTO_TM_PLANT", $; return id; };

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);调用了JsPlumb里面包车型客车addEndpoint方法,第三个参数表示页面标签的id,第4个代表连线点的地点(RightMiddle、LeftMiddle、TopCenter、BottomCenter多个筛选);第三参数表示点的样式以致连线的样式。没调用依次addEndpoint方法,成分上边就能够多三个连线的节点。关于hollowCircle里面各种参数的意义,能够查阅api。

再有一句多少个地点都来看了:

jsPlumb.repaintEverything();看字面意思大致能清楚那句是干什么的,修复全数。当在中等区域拖动成分的时候,要是不带这一句,节点不会跟着成分一同运动。加上之后节点才会尾随标签移动。至此,最幼功的JsPlumb连线就水到渠成了。

如上正是本文的全部内容,希望能够扶助大家学习通晓流程图的主题本事JsPlumb。

本文由澳门太阳娱乐手机登录发布于关于计算机,转载请注明出处:详整js中布局流程图的宗旨技能JsPlumb_javascript本事

关键词: