jsplumb
一、简介:
jsplumb是jquery的一个插件,它能够让你用动态或静态的链接来连接html界面上的元素,并且从1.10版本开始,提供用鼠标拖动来连接。jsPlumb允许您使用SVG,Canvas或者VML链接屏幕上的元素,这些取决于您使用的浏览器的能力。
主要包含以下模块:Anchor、Connector、Endpoint、 Overlay、Style、css样式、Events
二、Anchor:
-
Static Anchors(静态锚):
9个默认位置(元素四角,四边中点,元素中心)
Top TopRight Right BottomRight Bottom BottomLeft Left TopLeft Center复制代码
[x,y,dx,dy],其中x和y是[0,1]指定锚点位置的区间中坐标。dx和dy指定了锚点的方向,可以具有值0,-1,1
-
Dynamic Anchors(动态锚):创建动态锚点没有特殊语法,只需提供一系列单独的静态锚点规范
-
Perimeter Anchors(周边锚):这些事动态锚的一种形式,其中锚位置是从某个给定形状的周长中选择的,
jsPlumb支持6种形状:Circle Ellipse Triangle Diamond Rectangle Square
-
Continuous Anchors(连续锚)
Continuous:其位置由jsPlumb根据Connection中元素之间的方向计算。默认情况下,连续锚点将从其所在元素的所有四个面中选择点。可以使用faces来控制该行为(允许的值有top left right bottom)
- 将css类与Anchor关联:
[0.5,0,0,-1,0,0,’top’] ⇒jtk-endpoint-anchor-top
三、 Connector:连接器是实际连接UI的线。
jsPlumb有4个连接器实现-一条直线,一个贝塞尔曲线,流程图和状态机。默认连接器是贝塞尔曲线
- Bezier(贝塞尔曲线):贝塞尔曲线提供了两个端点之间的立方体路径,它支持一个构造函数参数
- Straight(直线):直连绘制直线的两个端点之间,没有构造函数的参数支持,使用参数endpointStyle定义连接样式或添加端点时定义连接线样式
- Flowchart(流程图):这种类型的连接器,绘制一系列垂直或水平段组成的连接-经典的流程图,支持一个单一的构造函数参数
- State Machine(状态机):这是最小长度,以像素为单位,从端点发出的初始存根。词参数是可选的,默认为30像素
四、Endpoint:一个端点的UI组件,标志着一个锚的位置,是连接器连接的点
jsPlumb有三个端点实现,点、矩形和圆形,你可以指定端点的属性,(connect、addEndpoint、makeTarget)
- Dot(点端点):此端点在屏幕上画一个点 半径--可选,默认10像素
- Rectangle(矩形端点):绘制一个矩形,宽度- 可选,默认20像素,高度-可选,默认20像素
- Image(图片端点):从一个给定的URL绘制图像 SRC-必须
五、Overlay:覆盖界面上的链接元素,如标签或箭头,
jsplumb有4个默认值:
- Arrow:客配置的箭头,放在两个点的连接线上,你可以控制箭头的长度和宽度,转折点:是一个折回点,方向点(允许是1和-1,意味着是点的链接方向)
- Label:在点的连接器上的可配置的标签
- plainArrow:一个三角形箭头,没有这会点
- diamond:钻石
六、样式:【基本样式、悬浮样式】
fillStyle、strokeStyle、outlineColor可以使用任何有效的css3语法
fillStyle:定义endPoint的颜色,例如rgba(100,100,100,50),'blue','#456','#993355',rgb(34,56,78)
strokeStyle:连接器的颜色
lineWidth:连接线的宽度
outlineWidth:连接器或端点的轮廓宽度
Dashstyle、THE VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin只适用于VML或SVG
七、css样式:
jsplumb在它创建每个组件时都会附加一些类,这些类名都是公开的,并且如果你需要的话你可以将他们重写,具体如下
Connector --> _jsPlumb_connector connectorClass
Endpoint --> _jsPlumb_endpoint endpointClass
Overlay --> _jsPlumb_overlay overlayClass
复制代码
8.1、jsPlumb事件:
- connection(info,originalEvent) 通知已建立连接 jsPlumb.connect导致此事件被触发
- connectionDetached(info,originalEvent) 通知连接已分离
- connectionMoved(info,originalEvent) 通知已将现有连接的源或目标端点拖动到某个新位置。
- connectionAborted(connection,originalEvent) 在连接到端点或目标元素之前拖动新连接但被放弃时触发
- connectionDrag(connection) 通知正在拖动现有连接,请注意,当此事件触发全新的connection时,connection的目标是jsPlumb用于拖动的瞬态元素,并且随后在建立或终止connection时将从DOM中删除。
- connectionDragStop(connection) 通知连接拖动已停止,仅针对现有connection触发此操作
- click(connection,originalEvent) 单击
- dbclick(connection,originalEvent) 双击
- endpointClick(endpoint,originalEvent) 单击端点
- endpointDbClick(endpoint,originalEvent) 双击端点
- contextmenu(component,originalEvent) 右键单击某个给定组件
- beforeDrop(info) 删除新连接或现有连接时会触发此事件
- beforeDetach(connection) 无论出于何种原因,即将分离connection时也会触发此事件,你的回调函数将传递给用户刚刚分离的connection,从此拦截器返回false会中止connection分离
- zoom(value) 缩放
8.2、Connection Events:要绑定到connection上的事件
click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup
var connection = jsPlumb.connect({source:’el1’,target:'el2'});
connection.bind(‘click’,function(connection,originalEvent){});
复制代码
8.3、Endpoint Events:要绑定到endpoint上的事件
click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup
maxConnections(info,originalEvent) 通知用户尝试在已具有最大连接数的Endpoint上删除连接
var endPoint = jsPlumb.addEndpoint(‘el’,{someOptions});
Endpoint.bind(‘click’,function(endpoint,originalEvent){});
复制代码
8.4、Overlay Events:在Overlay上注册事件侦听器是一个稍微不同的过程 –您将它们作为
Overlay构造函数的参数提供,这是因为你从未真正对Overlay对象采取行动
jsPlumb.connect({
source:’el1’,
target:’el2’,
Overlays:[
[
‘Label’,{Events:{click:function(){}}}
]
]
});
复制代码
解除绑定事件:unbind
如果有错误的地方,欢迎指出。
作者:__autism
链接:https://juejin.im/post/5b86a00d51882542c20f2ef6
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
posted on 2019-05-21 14:12 zhangzongshan 阅读(1166) 评论(0) 编辑 收藏 举报