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

 

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