jsplumb

__autism發表於2018-08-29
JS

一、簡介：

jsplumb是jquery的一個外掛，它能夠讓你用動態或靜態的連結來連線html介面上的元素，並且從1.10版本開始，提供用滑鼠拖動來連線。jsPlumb允許您使用SVG，Canvas或者VML連結螢幕上的元素，這些取決於您使用的瀏覽器的能力。

主要包含以下模組：Anchor、Connector、Endpoint、 Overlay、Style、css樣式、Events

二、Anchor：

  • Static Anchors（靜態錨）：

    9個預設位置(元素四角，四邊中點，元素中心)    

Top TopRight Right BottomRight Bottom BottomLeft Left TopLeft Center複製程式碼

    每一個都是基於陣列的包裝器

    [x,y,dx,dy],其中x和y是[0,1]指定錨點位置的區間中座標。dx和dy指定了錨點的方向，可以具有值0,-1,1

    錨點偏移--除了位置和方向，還提供兩個引數來定義與給定位置的畫素偏移量

  • Dynamic Anchors（動態錨）：建立動態錨點沒有特殊語法，只需提供一系列單獨的靜態錨點規範

    預設動態錨點：jsPlumb提供一個動態錨AutoDefault，從Top,Right,Left,Bottom中選擇

  • Perimeter Anchors（周邊錨）：這些事動態錨的一種形式，其中錨位置是從某個給定形狀的周長中選擇的，

    jsPlumb支援6種形狀：Circle Ellipse Triangle Diamond Rectangle Square

  • Continuous Anchors（連續錨）

    Continuous：其位置由jsPlumb根據Connection中元素之間的方向計算。預設情況下，連續錨點將從其所在元素的所有四個面中選擇點。可以使用faces來控制該行為（允許的值有top left right bottom）

  • 將css類與Anchor關聯：
    陣列語法的第7個值表示CSS類的字串。並應用於endpoint,element。預設字首endpointAnchorClass為jtk-endpoint-anchor-

例如：[0.5,0,0,-1,0,0,’top’] ⇒jtk-endpoint-anchor-top

三、 Connector：聯結器是實際連線UI的線。

jsPlumb有4個聯結器實現-一條直線，一個貝塞爾曲線，流程圖和狀態機。預設聯結器是貝塞爾曲線

  • Bezier（貝塞爾曲線）：貝塞爾曲線提供了兩個端點之間的立方體路徑，它支援一個建構函式引數
  • Straight（直線）：直連繪製直線的兩個端點之間，沒有建構函式的引數支援，使用引數endpointStyle定義連線樣式或新增端點時定義連線線樣式
  • Flowchart（流程圖）：這種型別的聯結器，繪製一系列垂直或水平段組成的連線-經典的流程圖，支援一個單一的建構函式引數
  • State Machine（狀態機）：這是最小長度，以畫素為單位，從端點發出的初始存根。詞引數是可選的，預設為30畫素

四、Endpoint：一個端點的UI元件，標誌著一個錨的位置，是聯結器連線的點

jsPlumb有三個端點實現，點、矩形和圓形，你可以指定端點的屬性，（connect、addEndpoint、makeTarget）

  • Dot（點端點）：此端點在螢幕上畫一個點 半徑--可選，預設10畫素
  • Rectangle（矩形端點）：繪製一個矩形，寬度- 可選，預設20畫素，高度-可選，預設20畫素
  • Image（圖片端點）：從一個給定的URL繪製影像 SRC-必須

五、Overlay：覆蓋介面上的連結元素，如標籤或箭頭，

jsplumb有4個預設值：

  • Arrow：客配置的箭頭，放在兩個點的連線線上，你可以控制箭頭的長度和寬度，轉折點：是一個折回點，方向點（允許是1和-1，意味著是點的連結方向）
  • Label：在點的聯結器上的可配置的標籤
  • plainArrow:一個三角形箭頭，沒有這會點
  • diamond:鑽石

顯示/隱藏覆蓋：setVisible來控制Arrow的顯示或隱藏，或者showOverlay(ID),或者hideOverlay(ID)

六、樣式：【基本樣式、懸浮樣式】

樣式引數列表：這是設定paintStyle的完整引數列表。但是請注意，fillStyle引數在connector中會被忽略，strokeStyle在endOptions中會被忽略，此外，如果你使用jsPlumb.connect建立連結，並且為指定任何endOption樣式，endOptions中的fillStyle樣式會被指定為連線線的strokeStyle

fillStyle、strokeStyle、outlineColor可以使用任何有效的css3語法

fillStyle:定義endPoint的顏色，例如rgba(100,100,100,50),'blue','#456','#993355',rgb(34,56,78)

strokeStyle:聯結器的顏色

lineWidth:連線線的寬度

outlineWidth:聯結器或端點的輪廓寬度

Dashstyle、THE VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin只適用於VML或SVG

懸浮樣式：當滑鼠懸浮在這些元素上時，連線線和終結點都支援滑鼠懸浮樣式。他們的樣式需要被精確的指定，指定的方式和我們在上面討論的方式一致，懸浮樣式也一樣繼承了基本樣式，這是因為當滑鼠移上去的時候，您通常只希望更改顏色，或者輪廓顏色，所以你只需要指定需要改變的值即可，這樣避免了你需要定義重複的樣式，滑鼠炫富樣式的引數名知識需要在正常樣式前加個‘hover’即可

七、css樣式：

jsplumb在它建立每個元件時都會附加一些類，這些類名都是公開的，並且如果你需要的話你可以將他們重寫，具體如下

Connector --> _jsPlumb_connector         connectorClass
Endpoint   -->  _jsPlumb_endpoint        endpointClass
Overlay     -->  _jsPlumb_overlay        overlayClass
複製程式碼

八、事件：jsPlumb.bind(event,callback)

8.1、jsPlumb事件：

  • connection(info,originalEvent) 通知已建立連線 jsPlumb.connect導致此事件被觸發
  • connectionDetached(info,originalEvent) 通知連線已分離
  • connectionMoved(info,originalEvent) 通知已將現有連線的源或目標端點拖動到某個新位置。
  • connectionAborted(connection,originalEvent) 在連線到端點或目標元素之前拖動新連線但被放棄時觸發
  • connectionDrag(connection) 通知正在拖動現有連線，請注意，當此事件觸發全新的connection時，connection的目標是jsPlumb用於拖動的瞬態元素，並且隨後在建立或終止connection時將從DOM中刪除。
  • connectionDragStop(connection) 通知連線拖動已停止，僅針對現有connection觸發此操作
  • click(connection,originalEvent) 單擊
  • dbclick(connection,originalEvent) 雙擊
  • endpointClick(endpoint,originalEvent) 單擊端點
  • endpointDbClick(endpoint,originalEvent) 雙擊端點
  • contextmenu(component,originalEvent) 右鍵單擊某個給定元件
  • beforeDrop(info) 刪除新連線或現有連線時會觸發此事件
  • beforeDetach(connection) 無論出於何種原因，即將分離connection時也會觸發此事件，你的回撥函式將傳遞給使用者剛剛分離的connection，從此攔截器返回false會中止connection分離
  • zoom(value) 縮放

8.2、Connection Events:要繫結到connection上的事件

click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup

var connection = jsPlumb.connect({source:’el1’,target:'el2'});
connection.bind(‘click’,function(connection,originalEvent){});
複製程式碼

8.3、Endpoint Events：要繫結到endpoint上的事件

click、dbclick、contextmenu、mouseover、mouseout、mousedown、mouseup

maxConnections(info,originalEvent) 通知使用者嘗試在已具有最大連線數的Endpoint上刪除連線

var endPoint = jsPlumb.addEndpoint(‘el’,{someOptions});
Endpoint.bind(‘click’,function(endpoint,originalEvent){});

複製程式碼

8.4、Overlay Events：在Overlay上註冊事件偵聽器是一個稍微不同的過程 –您將它們作為

Overlay建構函式的引數提供，這是因為你從未真正對Overlay物件採取行動

jsPlumb.connect({
    source:’el1’,
    target:’el2’,
    Overlays:[
        [
        ‘Label’,{Events:{click:function(){}}}
        ]
    ]
});
 複製程式碼

解除繫結事件：unbind

如果有錯誤的地方，歡迎指出。不勝感激

jsplumb   


相關文章