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学习笔记的更多相关文章

  1. jsPlumb学习笔记

    这就是一个给元素画连接线的工具. <!DOCTYPE html> <html> <head> <title>jsPlumb</title> ...

  2. jsPlumb 学习笔记

    介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, co ...

  3. 前端开发——HTML学习笔记

    HTML03

  4. 前端flex布局学习笔记

    flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...

  5. 今日前端框架Vue学习笔记

    在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面

  6. 前端框架vue学习笔记:环境搭建

    兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...

  7. 前端框架vue学习笔记

    占坑

  8. 前端html基础学习笔记二

    表单 1 : 表单标签 <form></form> 属性 : action = '接口地址' method = 'get / post' name = '表单名称' 2 : 表 ...

  9. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. 状压dp的另一种形式

    做的那么多都是一些比较怎么说呢,都是在数网格一类的题目之中,这些题目有些有点固定的套路,而一些需要状态压缩的题目呢,则么是真正对状态转移的考验. 这道题呢,被彻底打脸了,以后一定要任性一点一道题做不出 ...

  2. tst

    select count(*) from student where age>18 group by 性别 having count(*)>2 order by age where过滤的是 ...

  3. Delphi2010分 AnsiChar(1个字节) 和WideChar(2个字节) 。D7都是AnsiChar。

    Delphi2010分 AnsiChar(1个字节) 和WideChar(2个字节) .D7都是AnsiChar.

  4. EF-CodeFirst-基础

    什么是Code-First Code-First主要用于领域驱动设计.在Code-First方法中,专注于应用程序的域,先开始为域实体创建类,而不是先设计数据库,然后创建与数据库设计相匹配的类.下图说 ...

  5. oracle中nvarchar2()和varchar2()的区别

    1.NVARCHAR2(10)是可以存进去10个汉字的,如果用来存英文也只能存10个字符. 2.而VARCHAR2(10)的话,则只能存进5个汉字,英文则可以存10个.

  6. Advising controllers with the @ControllerAdvice annotation

    The @ControllerAdvice annotation is a component annotation allowing implementation classes to be aut ...

  7. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  8. 配置svn用户及权限

    权限使用的用户名,必须在passwd文件里面存在,权限配置文件的修改立即生效,不必重启SVN: 例如创建一个运维组 用户组格式: [groups] yunwei = ligang,liming 其中, ...

  9. 12306微信小程序上线 提供余票查询暂不支持购票

    12306微信小程序正式上线,如图所示,目前小程序提供余票查询.时刻表查询和正晚点查询三大功能,用户可在这里随时查看剩余车票以及列车时刻表.而且小程序支持用户添加行程,方便出行. 目前这款小程序还不支 ...

  10. 一行js弹窗代码就能设计漂亮的弹窗广告

    接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: ...