感受jsPlumb最容易最直观是重写jsPlumb的默认配置。如果你没这么做,你不得不每次调用都得重写这些值。connect
和addEndpoint
的每个参数都和jsPlumb的默认值有关。
默认设置存储在jsPlumb.Defaults
,是个javascript对象。有效健,初始值如下:
Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable : true,
ConnectionOverlays : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fillStyle : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { lineWidth : 8, strokeStyle : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"
注意:EndpointHoverStyle
的fillStyle
是null
。也就是说jsPlumb使用来自Connector的hover style的strokeStyle
来填充Endpoint。
EndpointStyle
和EndpointStyles
你都可以定制,你可以让每个连接的Endpoint都不一样。Endpoint
和Endpoints
也一样。jsPlumb会先检查用户的Endpoint
和EndpointStyle
数组,然后再检查默认的。
你可以通过importDefaults
方法覆盖默认值:
jsPlumb.importDefaults({
PaintStyle : {
lineWidth:13,
strokeStyle: 'rgba(200,0,0,0.5)'
},
DragOptions : { cursor: "crosshair" },
Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }]
});
加载并执行这段代码后,就会得到效果。
每条默认设置的解释
Anchor 对于那些没有声明Anchor的Endpoint,对Connection的source和target也适用。
Anchors 所有Connection的source和target的Anchors
Connector 给默认Connector使用
ConnectionsDetachable Connections是否可通过鼠标分离
Container
DoNotThrowErrors 当Anchor, Endpoint or Connector被请求却不存在时是否报错
ConnectionOverlays 默认Connection的遮罩
DragOptions 可通过
jsPlumb.draggable
配置DropOptions 配置Endpoint是否可以drop连接
Endpoint Endpoint的定义
Endpoints
jsPlumb.connect
的source 和 targetEndpointOverlays 默认所有的Overlays
EndpointStyle
EndpointStyles
EndpointHoverStyle
EndpointHoverStyles
HoverPaintStyle
LabelStyle
LogEnabled
Overlays
MaxConnections
PaintStyle
ReattachConnections
RenderMode
Scope
jsPlumb.getInstance
通过 jsPlumb.getInstance
jsPlumb.getInstance({
PaintStyle : {
lineWidth:13,
strokeStyle: 'rgba(200,0,0,100)'
},
DragOptions : { cursor: "crosshair" },
Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
EndpointStyles : [
{ fillStyle:"#225588" },
{ fillStyle:"#558822" }
]
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。