jsPlumb 学习笔记

介绍

   使用svg完成画图，四个概念：

   anchor: endpoint在的位置，可通过name访问

   endpoint：connection的一端节点,通过addPoint makeSource, connect创建，

   connector：连接线

   overlay:connector的装饰组件，如labelarrow

   一个connection由一个connector，两个endpoint，0或者多个overlay构成，每个endpoint有一个关联的anchor.

anchor有四种类型：

static：固定不可移动的点

dynamic：从一组staticanchor中，每次动态选取一个合适的

perimeter：沿着特定图形的边

continous：没有固定的位置，根据线另一端点的朝向决定

connectors四种类型

Bezier(default)：弯曲的贝塞尔曲线，参数是curviness用来定义控制点，默认150

Straight：stub和gap（线和endpoint的间隔） 

flowchart: 折线，有stubalwaysRespectStubs gap midpoint（转折点）和cornerRadius

statemachine ：轻微弯曲的线， quadraticBezier （二次贝塞尔曲线），有 margin,curviness, proximityLimit （连接到自己时最小距离）

endpoint有四种类型

dot：radius cssClass  hoverClass

rectangle:width height cssClas hoverClass

blank:不可见，对于可拖拽链接的，使用dot和rectangle参数，并在css中设为透明。

image:从url得到image，src cssClass hoverClass

overlay有五种类型

arrow:控制长宽等

label:

plainArrow：三角形箭头

diamond：菱形

custom：任意的dom元素，需要实现create方法

location：

[0..1]代表connector上的比例

大于1或小于0代表绝对值的pixel

     

connections:

adding：在connectmakeSource  addEndpoint中

    show和hideoverlay：connection.hideOverlay,connection.showOverlay  ，endPoint有同样的方法

     removeoverlay：connection.removeOverlay()

重用commonsetting

var common = {
 anchors:[ "BottomCenter", "TopCenter" ],
 endpoints:["Dot", "Blank" ]
};

jsPlumb.connect({ source:"someElement", target:"someOtherElement" }, common);

jsPlumb.connect({ source:"aThirdElement", target:"yetAnotherElement" }, common);

画连线

设置endPoint为 source
var exampleGreyEndpointOptions = {
 endpoint:"Rectangle",
 paintStyle:{ width:25, height:21, fillStyle:'#666' },
 isSource:true,
 connectorStyle : { strokeStyle:"#666" },
 isTarget:true
};
var endpoint = jsPlumb.addEndpoint('elementId', exampleGreyEndpointOptions 
);

makeTarget和makeSource

     将整个element变成target或source

jsPlumb.makeSource("el1", {
 anchor:"Continuous",
 endpoint:["Rectangle", { width:40, height:20 }],
 maxConnections:3
});

uniqueEndpoint：

     设置只有一个 endPoint

移除connections和endpoint

jsPlumb.detach(conn);
删除el上所有链接：jsPlumb.detachAllConnections(el, [params])
所有链接：jsPlumb.detachEveryConnection();

通过connect中的parameters参数向jsPlumb中传入参数。

动画：

jsPlumb.animate : function(el, properties, options) 调用方式类似于 jQuery

查询jsPlumb

可以用来查找connection或者endpoint等

css样式

    overlays: cssClass

    paintStyle可设置：fillStyle strokeStyle  lineWidth outlineWidth  outlineColordashStyle

hoverpaint style

    hoverPaintStyle endpointHoverStyles