jsPlumb 学习笔记

介绍

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

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

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

connector：连接线

overlay:connector的装饰组件，如labelarrow

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

anchor有四种类型：

connectors四种类型

endpoint有四种类型

overlay有五种类型

location：

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

css样式

overlays: cssClass

paintStyle可设置：fillStyle strokeStyle  lineWidth outlineWidth  outlineColordashStyle

hoverpaint style

hoverPaintStyle endpointHoverStyles

[转]http://blog.csdn.net/dananhai381/article/details/38870615