jsPlumb 基本概念

jsPlumb 基本概念

---

1、默認屬性

• Anchor：錨點(鏈接點位置)，能夠設置在任何沒有錨點的目標上(endPoint)
• Anchors：設置在connect的源和目標點的鏈接點位置，默認是 BottomCenter
• Connector：鏈接線（好比：["Bezier", {curviness: 63}]爲貝塞爾曲線）
• ConnectionsDetachable：是否在鏈接點能夠用鼠標拖動[true/false]
• Container：容器
• DoNotThrowErrors：設置當錨點(Anchor)、端點(endPoint)和鏈接器(Connector)不存在的時候是否拋出異常
• ConnectionOverlays：默認覆蓋附着在每一個鏈接器
• DragOptions：爲 被 jsPlumb.draggable 設置了拖拽的元素拖拽時設置的css樣式.eg:
  hoverClass: "dropHover",//釋放時指定鼠標停留在該元素上使用的css class;
  activeClass: "dragActive"//可拖動到的元素使用的css class
• Endpoint: 端點的形狀定義，好比圓：[ "Dot", { radius:5 } ]；正方形：Rectangle
• Endpoints：設置了鏈接器的源和目標端點的形狀，eg圓： [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ]
• EndpointOverlays:默認覆蓋附着在每一個端點
• EndpointStyle：端點的默認樣式
• EndpointStyles：設置了鏈接器的源和目標端點的樣式
• EndpointHoverStyle：端點的hover狀態樣式
• EndpointHoverStyles ：設置了鏈接器的源和目標端點端點的hover狀態樣式
• HoverPaintStyle ：
• LogEnabled：jsPlumb內部日誌是否開啓。
• Overlays：默認覆蓋鏈接器和端點樣式，裝飾鏈接器,如標籤、箭頭等
• MaxConnections ：設置鏈接點最多能夠鏈接幾條線
• PaintStyle ：設置鏈接點的樣式
• connectorStyle：設置鏈接線樣式
• ReattachConnections ：
• RenderMode ：默認渲染模式
• Scope：鏈接點的標識符，只有標識符相同的鏈接點才能鏈接

2、錨點(Anchor)

1 . 默認錨位置:

• Top (TopCenter)
• TopRight
• Right (RightMiddle)
• BottomRight
• Bottom (BottomCenter)
• BottomLeft
• Left (LeftMiddle)
• TopLeft
• Center

eg：

//定義了一個在底部中間的錨點位置 jsPlumb.connect({...., anchor:"Bottom", ... }); 

2 . 基於數組的語法 [x,y,dx,dy]

• x-相對該錨點在x軸座標比例（最大1）
• y-相對該錨點y軸座標比例（最大1）
• dx-控制錨的方向
• dy-同上

eg：

//定義了一個在底部中間的錨點位置 jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1 ], ... }); 

若是錨點位置沒法知足你的需求，還能夠設置錨點的偏移量[x,y,dx,dy,offSetX,offSetY] ,下面設置了Y軸偏移50px，錨點Y座標會+50px:

jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1, 0, 50 ], ... });

3 . 動態錨

• 數組定義

  沒有特殊的語法來建立一個動態錨;能夠提供一個靜態數組錨規格,如:

  var dynamicAnchors = [ [ 0.2, 0, 0, -1 ], [ 1, 0.2, 1, 0 ], [ 0.8, 1, 0, 1 ], [ 0, 0.8, -1, 0 ] ]; jsPlumb.connect({...., anchor:dynamicAnchors, ... }); 

  或者組合：

  var dynamicAnchors = [ [ 0.2, 0, 0, -1 ], [ 1, 0.2, 1, 0 ], "Top", "Bottom" ]; jsPlumb.connect({...., anchor:dynamicAnchors, ... }); 

  這樣錨點會根據位置自動調整到最合適的位置(定義的數組裏幾個點中)

• 默認定義

  jsPlumb提供了一個動態錨 AutoDefault 選擇從 前 , 右 , 底 和 左 :

  jsPlumb.connect({...., anchor:"AutoDefault", ... }); 

4 . 多邊形錨

• Circle(圓)
• Ellipse(橢圓)
• Triangle(三角形)
• Diamond(菱形)
• Rectangle(矩形)
• Square(正方形)

(1) 單個多邊形

eg：

jsPlumb.addEndpoint("someElement", { endpoint:"Dot", anchor:[ "Perimeter", { shape:"Circle" } ] }); 

若是錨點的寬高同樣，該錨點位置爲動態圓周。寬高不一樣爲橢圓，相似正方形和矩形。

默認狀況下，錨點個數爲60，咱們還能夠手動指定：

eg（指定150個動態錨點）：

jsPlumb.addEndpoint("someDiv", { endpoint:"Dot", anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }] }); 

(2) 組合錨點（三角形與菱形）：

jsPlumb.connect({ source:"someDiv", target:"someOtherDiv", endpoint:"Dot", anchors:[ [ "Perimeter", { shape:"Triangle" } ], [ "Perimeter", { shape:"Diamond" } ] ] }); 

(3) 自定義角度多邊形錨點

jsPlumb.connect({ source:"someDiv", target:"someOtherDiv", endpoint:"Dot", anchors:[ [ "Perimeter", { shape:"Triangle", rotation:25 } ], [ "Perimeter", { shape:"Triangle", rotation:-335 } ] ] }); 

上面定義了兩個三角形旋轉不一樣角度獲得的組合圖形（旋轉適用帶角度的多邊形）。

5. CSS類和錨點

(1)介紹

錨點的不一樣位置能夠有多種css樣式，那就要有不一樣的css類提供支持。

被寫入到錨點的CSS類和元素與jsPlumb實例相關聯的前綴默認的前綴:

jsplumb-endpoint-anchor-

eg：

var ep = jsPlumb.addEndpoint("someDiv", { anchor:[0.5, 0, 0, -1, 0, 0, "top" ] }; 

jsPlumb將會分配這個類給建立的 endpoint 和元素 someDiv：

jsplumb-endpoint-anchor-top

(2)示例

一個使用動態錨的例子:

var ep = jsPlumb.addEndpoint("someDiv", { anchor:[ [ 0.5, 0, 0, -1, 0, 0, "top" ], [ 1, 0.5, 1, 0, 0, 0, "right" ] [ 0.5, 1, 0, 1, 0, 0, "bottom" ] [ 0, 0.5, -1, 0, 0, 0, "left" ] ] }); 

這裏的類分配給端點和元素循環這些值做爲錨位置的變化:

jsplumb-endpoint-anchor-top
jsplumb-endpoint-anchor-right
jsplumb-endpoint-anchor-left
jsplumb-endpoint-anchor-bottom

若是您提供多個類名,jsPlumb不會預先考慮類中的每一個詞的前綴:

var ep = jsPlumb.addEndpoint("someDiv", { anchor:[ 0.5, 0, 0, -1, 0, 0, "foo bar" ] }); 

會致使2個類被添加到端點和元素:

jsplumb-endpoint-anchor-foo 和 bar

(3)改變錨類前綴

前綴 endpointAnchorClass 用於錨類存儲爲jsPlumb的成員，這個前綴是可更改的:

jsPlumb.endpointAnchorClass = "anchor_"; 

或者

var jp = jsPlumb.getInstance(); jp.endpointAnchorClass = "anchor_"; 

3、鏈接線(器)(Connectors)

1. 簡介

jsPlumb提供了四種鏈接線：

• straight(直線)
• Bezier(貝塞爾曲線)
• flowchart(流程圖)
• state machine

straight

在兩個端點之間畫一條直線。 它支持兩個構造函數參數:

• stub：可選的,默認值爲0。此參數的任何正值將致使在與鏈接線的兩端產生一段不可改變方向的線段
• gap：可選，默認爲0像素。在鏈接線的一端和鏈接的元素之間指定一個間隙。

Bezier

貝塞爾提供了一個立方的貝塞爾曲線。 它支持一個構造函數參數:

• curviness：參數可選,默認爲150。 定義了曲線的彎曲程度。

flowchart

垂直或水平的鏈接線，提供了四個參數：

• stub：這是最小長度，以像素爲單位，最初的存根，源自一個端點。這是一個可選的參數，而且能夠是一個整數，它指定了鏈接器的每一個末端的存根，或是一個整數數組，指定[源目標]端點的鏈接。默認值爲30像素的整數
• alwaysRespectStubs ：可選，默認爲false。
• gap：可選，默認爲0像素。在鏈接線的一端和鏈接的元素之間指定一個間隙。
• midpoint：可選，默認爲0.5。這是一個流程圖中最長的部分將被繪製的2個元素之間的距離。
• cornerRadius：默認爲0。此參數的正值將改變彎角的度數。

state machine

略微彎曲的線（其實是二次Bezier曲線），相似於狀態機的鏈接器，支持的構造函數參數：

• margin：可選；默認爲5。定義鏈接線開始/結束的元素的距離。
• curviness：可選的,默認爲10，定義了曲線的彎曲程度。
• proximityLimit ： 可選,默認爲80。 鏈接線的兩端之間的最小距離 它描繪爲一條直線而非二次貝塞爾曲線。

4、端點(Endpoints)

簡介

端點是鏈接裏的一個端點外觀和行爲表現的集合，jsPlumb實現了四個端點：

• Dot(點)
• Rectangle(矩形)
• Blank(空)
• image(圖像)

建立

有不一樣的方式建立 endpoint：

(1)connect

並經過一個元素id或DOM元素做爲源/目標,建立並分配一個新的端點

eg：

jpInstance.connect({ source: "state1", target: "state2", scope: "state3" }); 

(2)addEndpoint

建立一個新的端點

jpInstance.addEndpoint("myDivId", EndpointConfig) 

(3)makeSource()

jpInstance.makeSource(...) 

類型

(1)Dot

就是在屏幕上畫一個點，它支持三個構造函數參數:

• radius：可選，默認爲10像素。 定義點的半徑
• cssClass ：可選，端點元素的CSS類。
• hoverClass 可選的，元素或連線的hover屬性樣式類

(2)Rectangle

繪製一個矩形。 支持構造函數參數有:

• width：可選的，默認爲20像素。定義矩形的寬度。
• height：可選的，默認爲20像素。定義矩形的高。
• cssClass ：可選的，端點元素的CSS類。
• hoverClass ：可選的，元素或連線的hover屬性樣式類

(3)Image

從一個指定的URL加載圖像，這個端點支持三種構造函數參數:

• src：圖片的url
• cssClass ：可選的，端點元素的CSS類。
• hoverClass ：可選的，元素或連線的hover屬性樣式類

5、覆蓋（鏈接元素）(Overlays)

簡介

jsPlumb帶有五個類型的覆蓋圖:

• Arrow(箭頭) ：一個可配置的箭頭，在某些點上塗上了一個可配置的箭頭。你能夠控制箭頭的長度和寬度，「折返」點一點尾巴分折回來，和方向（容許值爲1和1；1是默認的，意味着在鏈接點方向）
• Label(標籤)：一個可配置的連線標籤
• PlainArrow(平原箭頭)：沒有監聽的三角形箭頭
• Diamond(鑽石)：鑽石箭頭
• Custom(自定義)：可自定義DOM元素

位置

位置代表鏈接元素在鏈接線的位置，一般有三種代表方式：

• [0 . . 1]範圍內的十進制數，代表在鏈接線的位置比例，默認0.5

• [1 . . . ] (>1)的數字代表沿着鏈接線的絕對路徑的像素

• 小於零的整數數組:
  (1):指定一個覆蓋在端點的中心位置：

  location:[ 0.5, 0.5 ] 

  (2):沿着x軸從左上角疊加5像素

  location: [ 5, 0 ] 

  (3):沿着x軸從右下角疊加放置5像素

  location: [ -5, 0 ] 

對於位置的操做，jsPlumb提供了兩個方法：

• getLocation ——返回當前位置
• setLocation ——設置當前位置

使用

使用場景(出現如下調用的時候)：

• jsPlumb.connect
• jsPlumb.addEndpoint
• jsPlumb.makeSource

注： 沒有 jsPlumb.makeTarget

1. 在 jsPlumb.connect 被調用時使用

(1). 下面指定了 一個默認配置的箭頭和一個文字爲foo的標籤文本：

jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", [ "Label", { label:"foo", location:0.25, id:"myLabel" } ] ], ... }); 

此鏈接的箭頭在鏈接線的中間，lable標籤則是在鏈接線的四分之一處；這裏添加了一個id，它能夠在之後移除或修改標籤時使用。

(2). 箭頭位置位於鏈接線距離50像素(絕對位置):

jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", [ "Label", { label:"foo", location:50, id:"myLabel" } ] ], ... }); 

2. 在 jsPlumb.addEndpoint 被調用時使用

此鏈接將有10x30像素箭坐落在鏈接頭，標籤「foo」則位於中點。端點自己也有一個覆蓋，位於[ - 0.5 *寬，- 0.5 *高]相對於端點的左上角。

jsPlumb.addEndpoint("someDiv", { ... overlays:[ [ "Label", { label:"foo", id:"label", location:[-0.5, -0.5] } ] ], connectorOverlays:[ [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ], [ "Label", { label:"foo", id:"label" } ] ], ... }); 

注：在addEndpoint 使用 connectorOverlays 代替 overlays，由於 overlays指向端點覆蓋。

3. 在 jsPlumb.makeSource

一樣使用 connectorOverlays，並且 makeSource 支持 endpoint 參數。
此鏈接將有10x30像素箭坐落在鏈接頭，標籤「foo」位於中點。

jsPlumb.makeSource("someDiv", { ... endpoint:{ connectorOverlays:[ [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ], [ "Label", { label:"foo", id:"label" } ] ] } ... }); 

4. addOverlay 方法

Endpoints 和 Connections 都有一個方法： addOverlay，它提供一個單一的方法定義一個 覆蓋(Overlays):

var e = jsPlumb.addEndpoint("someElement"); e.addOverlay([ "Arrow", { width:10, height:10, id:"arrow" }]); 

Overlay Types（覆蓋類型）

1. Arrow(箭頭)

一個箭頭 使用四個點：頭、兩個尾點和一個foldback(監聽)，它容許箭頭的箭尾縮進。此覆蓋的可用構造函數參數：

• width：寬度
• length：長度
• location：在鏈接線上的位置
• direction：默認1-向前，-1向後
• foldback：箭頭沿軸到尾點的監聽。默認是0.623
• paintStyle：Endpoints 和 Connectors 的樣式對象

2. PlainArrow（平原箭頭）

這其實就是一個 foldback=1 的 Arror；繼承Arror的構造函數

3. Diamond（菱形）

這其實就是一個 foldback=2 的 Arror；繼承Arror的構造函數

4. Label（標籤）

(1) 介紹

提供裝飾鏈接器的文本標籤。可用的構造函數參數是：

• label : 文本顯示。 您能夠提供一個函數,而不是純文本:鏈接做爲一個參數傳遞,它應該返回一個字符串。
• cssClass :可選的css類使用的標籤。如今優先使用 labelStyle 參數。
• labelStyle ： 可選參數標籤的外觀。 可用參數有：
  • font ：一種適用於畫布元素的字體字符串
  • fillStyle ：標籤的背景顏色填充，可選。
  • color ：字體顏色，可選
  • padding ：表示標籤的寬度的比例，而不是px和ems。
  • borderWidth ：標籤的邊框寬度，默認0
  • borderStyle ：標籤邊框的樣式，可選
• location ：標籤位置

(2). getLabel 和 setLabel

標籤覆蓋提供了兩個方法 getLabel 和 setLabel 用於動態地get/set標籤內容:

var c = jsPlumb.connect({ source:"d1", target:"d2", overlays:[ [ "Label", {label:"FOO", id:"label"}] ] }); ... var label = c.getOverlay("label"); console.log("Label is currently", label.getLabel()); label.setLabel("BAR"); console.log("Label is now", label.getLabel()); 

這個例子裏，標籤被賦予一個id ‘label’，而後檢索這個id動態設置lable的值。

Connections 和 Endpoints 都支持 標籤覆蓋：

var conn = jsPlumb.connect({
  source:"d1", target:"d2", label:"FOO" }); ... console.log("Label is currently", conn.getLabel()); conn.setLabel("BAR"); console.log("Label is now", conn.getLabel()); 

(3). 動態設置label

var conn = jsPlumb.connect({ source:"d1", target:"d2" }); ... conn.setLabel(function(c) { var s = new Date(); return s.getTime() + "milliseconds have elapsed since 01/01/1970"; }); console.log("Label is now", conn.getLabel()); 

5. Custom（自定義）

jsPlumb容許自定義一個 OverLays，你只須要實現 create(component)：

var conn = jsPlumb.connect({ source:"d1", target:"d2", paintStyle:{ strokeStyle:"red", lineWidth:3 }, overlays:[ ["Custom", { create:function(component) { return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>"); }, location:0.7, id:"customOverlay" }] ] }); 

注意 此處的id爲 customeOverlay ，你能夠在 Connection 或者 Endpoint上使用 getOverlay(id) 方法。

隱藏/顯示 Overlays（覆蓋）

可使用 setVisible 方法控制 Overlays 的顯示屬性，或者在一個鏈接上使用 showOverlay(id) 和 hideOverlay(id)。

(1). 使用id：

var connection = jsPlumb.connect({ ... overlays:[ "Arrow", [ "Label", { label:"foo", location:0.25, id:"myLabel" } ] ], ... }); // time passes var overlay = connection.getOverlay("myLabel"); // now you can hide this Overlay: overlay.setVisible(false); // there are also hide/show methods: overlay.show(); overlay.hide(); 

(2). 使用 showOverlay(id) 和 hideOverlay(id)：

Connection 和 Endpoint 可使用showOverlay(id) 和 hideOverlay(id)：

var connection = jsPlumb.connect({ ... overlays:[ "Arrow", [ "Label", { label:"foo", location:-30 , id:"myLabel" }] ], ... }); // time passes connection.hideOverlay("myLabel"); // more time passes connection.showOverlay("myLabel"); 

刪除 Overlays(覆蓋)

var connection = jsPlumb.connect({ ... overlays:[ "Arrow", [ "Label", { label:"foo", location:0.25 , id:"myLabel"} ] ], ... }); // time passes connection.removeOverlay("myLabel"); 

做者：Mr_Gao_ 連接：https://www.jianshu.com/p/0e7bb5c081c8 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。