前端流程图jsplumb学习笔记
1、这篇博客很好,另外两个是官网文档
http://www.cnblogs.com/leomYili/p/6346526.html
https://jsplumbtoolkit.com/community/apidocs/classes/Connector.html
https://jsplumbtoolkit.com/community/doc/connections.html#draganddrop
2、Jsplump流程图画虚线用"dashstyle": "2 4"
PaintStyle: {
lineWidth: 3,
strokeStyle: color,
"dashstyle": "2 4"
}
3、简单连接
jsPlumb.connect({
source:"window4",
target:"window5",
anchors:["BottomRight","TopLeft"],
paintStyle:{strokeWidth:7,stroke:'rgb(131,8,135)'},
hoverPaintStyle:{ stroke:"rgb(0, 0, 135)" },
endpointStyle:{ width:40, height:40 },
endpoint:"Rectangle",
connector:["Flowchart", { midpoint: 0.8}],
overlays:[
[
"Label",
{label:"FOO",
id:"label",
location:0.7
}]
]
});
(1)connector:["Flowchart", { midpoint: 0.8}],设置折线抓点的位置,
0-1,越小离源端点越近
(2)label location 0-1, 越小离源端点越近
(3)配置项写法都是name:[“type1”,{option1:value,option2:value2}]
(4)anchors:[[ 0,0.5, -1, 0 ],"RightMiddle"], 用数组自定义anchor位置,
[x,y,dx,dy],x和y为以noder的左上角为起点,向下或向右增加到1。dx、dy指连接线出去的x、y方向矢量的分量,dx/dy组合定义出成一个角度,取值-1到1。-1为向左,向上,1为向右和向下。0分别为垂直和水平方向。
4、 Connection.连接器, Connector连接线是连接器的一个组成要素
5、用css设置connection连接器样式
jsPlumb.connect({
source:"someElement",
target:"someOtherElement",
cssClass: "redLine dashLine",
});
CSS:
svg.redLine path {
stroke: red;
stroke-width: 3;
}
svg.dashLine path {
stroke-dasharray: 5;
}
注svg虚线样式规则参照
https://segmentfault.com/a/1190000007309718
6、动态切换connection paintstyle
instance.registerConnectionType("black", {
paintStyle: {
strokeWidth: 2,
stroke: "#000000",
joinstyle: "round",
outlineStroke: "white",
outlineWidth: 2,
"dashstyle": "2 4"
},
});
var aa = instance.connect({
uuids: ["Window1BottomCenter", "Window2TopCenter"],
editable: true,
type: "black"
});
或aa.setType(“black”)
7、批量加入connection
jsPlumb.ready(function () {
var color = "#0070c0";
var instance = jsPlumb.getInstance({
Connector: ["Straight", { curviness: 2 }],
PaintStyle: {
strokeWidth: 2,
stroke: "#0070c0",
joinstyle: "round",
outlineWidth: 2
},
EndpointStyle: { radius: 1, fillStyle: color },
Container: "canvas"
});
var _addEndpoints = function (nodeId, sourceAnchors, targetAnchors) {
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = nodeId + "-" + sourceAnchors[i];
instance.addEndpoint(nodeId, {
anchor: sourceAnchors[i], uuid: sourceUUID
});
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = nodeId + "-" + targetAnchors[j];
instance.addEndpoint(nodeId, { anchor: targetAnchors[j], uuid: targetUUID });
}
};
instance.batch(function () {
var arrowCommon = { foldback: 0.7, fillStyle: color, width: 14 },
overlays = [
["Arrow", { location: 1 }, arrowCommon,],
];
_addEndpoints("nodeSiteInspectionRecordMainCheck", ["RightMiddle"], []);
_addEndpoints("nodeCorrectionInstructionBook", ["RightMiddle"], ["LeftMiddle"]);
_addEndpoints("nodeSiteInspectionRecordRecheck", ["RightMiddle"], ["LeftMiddle"]);
_addEndpoints("nodeCorrectiveReviewOpinions", ["RightMiddle"], ["LeftMiddle"]);
_addEndpoints("nodeArchive", [], ["LeftMiddle"]);
instance.connect({ uuids: ["nodeSiteInspectionRecordMainCheck-RightMiddle", "nodeCorrectionInstructionBook-LeftMiddle"], overlays: overlays });
instance.connect({ uuids: ["nodeCorrectionInstructionBook-RightMiddle", "nodeSiteInspectionRecordRecheck-LeftMiddle"], overlays: overlays });
instance.connect({ uuids: ["nodeSiteInspectionRecordRecheck-RightMiddle", "nodeCorrectiveReviewOpinions-LeftMiddle"], overlays: overlays });
instance.connect({ uuids: ["nodeCorrectiveReviewOpinions-RightMiddle", "nodeArchive-LeftMiddle"], overlays: overlays });
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
8、配置事件以及label位置内容配置
label压线问题:(1)用jquery修改top。避免label压住水平方向的连线
var flowchartWindow1_flowchartWindow2_connection = jsPlumb.connect({
});
flowchartWindow1_flowchartWindow2_connection.setLabel({
label: "上级立案上级立案上级立案",
location: 0.2,
cssClass: "connection-label"
});
var label = flowchartWindow1_flowchartWindow2_connection.getLabelOverlay().canvas;
var originTop = $(label).position().top;
$(label).css("top", originTop - 30 + "px");
(2)而且将label的marginleft设置成width的一半多点,避免label压住垂直方向的连线
.remarksLabel {
color: #ff0000;
font-size: 8px;
width: 80px;
height: 40px;
margin-left: 45px;
}
1、 菱形节点,用css实现,背景图片
2、 节点旁边的标注,在nodetext边添加label标识
3、 后台连接器(connection)数据模型整理
(1)sourceNodeId string 源节点id,要与页面的id一致;
(2)targetNodeId string 目标节点id,要与页面的id一致;
(3)ConnectionCssClass string要与页面的css名类一致;;
(4)anchors:两种类型:[[ 0,0.3, -1, 0 ],"RightMiddle"]和[“LeftMiddle”,"RightMiddle"]
统一做成数值型的[[ 0,0.3, -1, 0 ], [ 0,0.3, -1, 0 ]]
(5)ConnectorMidpoint: double折点比例位置
(6)LabelText:string 连旁标签内容
(7)LabelLocation:double 标签在连线上的位置
jsPlumb.connect({
source: "flowchartWindow1",
target: "flowchartWindow2",
cssClass: "redline dashline",
anchors:[[ 0,0.3, -1, 0 ],"RightMiddle"],
connector:["Flowchart", { midpoint: 0.9}],
overlays: [
["Label", {
label: "上级立案上级立案上级立案",
id: "label",
location:0.6
}]
]
});
4、 后台节点数据模型
{
"NodeId": "nodeSiteInspectionRecordMainCheck",
"SystemName": "SiteInspectionRecord",
"WriteStateCssClassName": "finished",
"MissionId": "574A979F-4471-4441-A6B3-493B3F6479FA",
"IsWritedByApp": "false",
"HasAttachmentFiles": "true"
},
7、connection.setLabel({
label: "上级立案上级立案上级立案",
location:0.8,
cssClass:"connection-label"
});
8、 jsPlumb.select().addClass("dashLine");
获取连接器增加css类
9、anthor常用值
RightMiddle { 1, 0.5, 1, 0 }
LeftMiddle{ 0, 0.5, -1, 0 } ,
BottomCenter{ 0.5, 1, 0, 1 },
TopCenter{ 0.5, 0, 0, -1 }
右左{{ 1, 0.5, 1, 0 },{ 0, 0.5, -1, 0 } }
下上{{ 0.5, 1, 0, 1 },{ 0.5, 0, 0, -1 } }
10、项目实践
详情参见市安监
前端流程图jsplumb学习笔记的更多相关文章
- jsPlumb学习笔记
这就是一个给元素画连接线的工具. <!DOCTYPE html> <html> <head> <title>jsPlumb</title> ...
- jsPlumb 学习笔记
介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...
- 前端开发——HTML学习笔记
HTML03
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- 今日前端框架Vue学习笔记
在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面
- 前端框架vue学习笔记:环境搭建
兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...
- 前端框架vue学习笔记
占坑
- 前端html基础学习笔记二
表单 1 : 表单标签 <form></form> 属性 : action = '接口地址' method = 'get / post' name = '表单名称' 2 : 表 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- 状压dp的另一种形式
做的那么多都是一些比较怎么说呢,都是在数网格一类的题目之中,这些题目有些有点固定的套路,而一些需要状态压缩的题目呢,则么是真正对状态转移的考验. 这道题呢,被彻底打脸了,以后一定要任性一点一道题做不出 ...
- tst
select count(*) from student where age>18 group by 性别 having count(*)>2 order by age where过滤的是 ...
- Delphi2010分 AnsiChar(1个字节) 和WideChar(2个字节) 。D7都是AnsiChar。
Delphi2010分 AnsiChar(1个字节) 和WideChar(2个字节) .D7都是AnsiChar.
- EF-CodeFirst-基础
什么是Code-First Code-First主要用于领域驱动设计.在Code-First方法中,专注于应用程序的域,先开始为域实体创建类,而不是先设计数据库,然后创建与数据库设计相匹配的类.下图说 ...
- oracle中nvarchar2()和varchar2()的区别
1.NVARCHAR2(10)是可以存进去10个汉字的,如果用来存英文也只能存10个字符. 2.而VARCHAR2(10)的话,则只能存进5个汉字,英文则可以存10个.
- Advising controllers with the @ControllerAdvice annotation
The @ControllerAdvice annotation is a component annotation allowing implementation classes to be aut ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- 配置svn用户及权限
权限使用的用户名,必须在passwd文件里面存在,权限配置文件的修改立即生效,不必重启SVN: 例如创建一个运维组 用户组格式: [groups] yunwei = ligang,liming 其中, ...
- 12306微信小程序上线 提供余票查询暂不支持购票
12306微信小程序正式上线,如图所示,目前小程序提供余票查询.时刻表查询和正晚点查询三大功能,用户可在这里随时查看剩余车票以及列车时刻表.而且小程序支持用户添加行程,方便出行. 目前这款小程序还不支 ...
- 一行js弹窗代码就能设计漂亮的弹窗广告
接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...