jsplumb 中文教程

時間 2019-11-06

標籤 jsplumb 中文教程简体版

原文原文鏈接

https://wdd.js.org/jsplumb-chinese-tutorial/#/javascript

1. jsplumb 中文基礎教程

後續更新會在倉庫：https://github.com/wangduanduan/jsplumb-chinese-tutorial.gitcss

本文的圖片是託管於七牛雲的，因爲使用的是測試域名，可能不知道哪天，圖片就沒法顯示了。不過每一個例子都有簡單的在線demo, demo剩千圖，仍是能看懂的。html

1.1. 什麼是jsplumb？

你有沒有想過在你的網站上展現圖表或者甚至在瀏覽器應用程序中使用它？用jsPlumb你能夠！它是徹底免費的，並根據MIT許可證提供。您能夠直接從jsPlumb github網站下載框架。java

該項目主要由Simon Porritt開發，他在澳大利亞西德尼擔任網絡開發人員。 jsPlumb由他積極開發。做爲許多優秀的開發人員，他彷佛更喜歡開發代碼而不是編寫教程，這就是爲何我提供一個簡單的入門教程。node

1.2. jsplumb能幹什麼？

那麼若是你應該使用它取決於你想用jsPlumb作什麼。該框架適用於必須繪製圖表的Web應用程序，例如相似於Visio的應用程序或工做流程設計器等。因爲圖表項目和鏈接的全部參數都是很是精細可控的，所以您能夠繪製您能夠想到的任何類型的圖表的！jquery

1.3. 基本概念

Souce 源節點
Target 目標節點
Anchor 錨點
Endpoint 端點
Connector 鏈接

2. 基礎demos

2.1. 鏈接兩個節點

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/01.htmlwebpack

jsPlumb.ready方法和jquery的ready方法差很少的功能，jsPlumb.connect用於創建連線git

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="margin-left:50px;"></div> </div> <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Dot' }) }) </script>

參數說明： jsPlumb.connect(config) return connectiongithub

參數	參數類型	是否必須	說明
source	String,Object,Endpoint	是	連線源的標識，能夠是id, element, 或者Endpoint
target	String,Object,Endpoint	是	連線目標的標識，能夠是id, element, 或者Endpoint
endpoint	String	可選	端點類型，形狀

>>> connect方法詳情web

2.2. 可拖動節點

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/02.html

使用draggable可讓節點被拖動，draggable方法參考

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;"></div> </div> <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle' }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.3. 鏈接的其餘參數

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/03.html

能夠經過connector去設置連接線的形狀，如直線或者曲線之類的。anchor能夠去設置錨點的位置。

jsplumb連線的樣式有四種

Bezier: 貝塞爾曲線
Flowchart: 具備90度轉折點的流程線
StateMachine: 狀態機
Straight: 直線

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;"></div> </div> <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script> <script> /* global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle', connector: ['Bezier'], anchor: ['Left', 'Right'] }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.4. 設置鏈接的默認值

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/04.html

不少連線都是相同設置的狀況下，能夠將配置抽離出來，做爲一個單獨的變量，做爲connect的第二個參數傳入。實際上connect的第二個參數會和第一個參數merge，做爲一個總體。

<script> /* global jsPlumb */ jsPlumb.ready(function () { var common = { endpoint: 'Rectangle', connector: ['Bezier'], anchor: ['Left', 'Right'] } jsPlumb.connect({ source: 'item_left', target: 'item_right' }, common) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.5. 給鏈接加上樣式

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/05.html

例如給連線設置不一樣的顏色，設置不一樣的粗細之類的。

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)

2.6. 給鏈接加上箭頭

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/06.html

箭頭其實是經過設置overlays去設置的，能夠設置箭頭的長寬以及箭頭的位置，location 0.5表示箭頭位於中間，location 1表示箭頭設置在連線末端。一根連線是能夠添加多個箭頭的。

overlays也是一個比較重要的概念，overlays能夠理解爲遮罩層。遮罩層不只僅能夠設置箭頭，也能夠設置其餘內容。

overlays有五種類型，下面給出簡介。具體使用方法參見 https://jsplumbtoolkit.com/community/doc/overlays.html

Arrow 一個可配置的箭頭
Label 標籤，能夠在連接上顯示文字信息
PlainArrow 原始類型的箭頭
Diamond 菱形箭頭
Custom 自定義類型

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)

2.7. 增長一個端點

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/07.html

addEndpoint方法能夠用來增長端點，具體使用請看

jsPlumb.ready(function () {
      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      })
    })

2.8. 拖動建立鏈接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/08.html

若是你將isSource和isTarget設置成true，那麼久能夠用戶在拖動時，自動建立連接。

jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: ['Straight']
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })

通常來講拖動建立的連接，能夠再次拖動，讓連接斷開。若是不想觸發這種行爲，能夠設置。

jsPlumb.importDefaults({
    ConnectionsDetachable: false
  })

2.9. 給端點增長樣式

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/09.html

經過設置各類 *Style來改變連接或者端點的樣式。

jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: 'Straight',
        endpoint: 'Dot',
        paintStyle: {
          fill: 'white',
          outlineStroke: 'blue',
          strokeWidth: 3
        },
        hoverPaintStyle: {
          outlineStroke: 'lightblue'
        },
        connectorStyle: {
          outlineStroke: 'green',
          strokeWidth: 1
        },
        connectorHoverStyle: {
          strokeWidth: 2
        }
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })

2.10. 節點改變尺寸

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/10.html

jsplumb實際上不支持改變節點大小，實際上只能經過jquery ui resizable 方法去改變。

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;"></div> </div> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="./lib/jquery.jsplumb.js"></script> <script> /* global jsPlumb, $ */ $('.item').resizable({ resize: function (event, ui) { jsPlumb.repaint(ui.helper) } }) jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle' }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>

2.11. 限制節點拖動區域

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/11.html

默認狀況下，節點能夠被拖動到區域外邊，若是想只能在區域內拖動，須要設置containment，這樣節點只能在固定區域內移動。

jsPlumb.setContainer('area-id')

2.12. 節點網格對齊

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/12.html 網格對齊其實是設置了grid屬性，使移動只能按照固定的尺寸移動。而後用一張圖做爲背景鋪開做爲網格來實現的。

#diagramContainer {
  padding: 20px;
  width: 80%;
  height: 400px;
  border: 1px solid gray;
  background-image: url(http://p3alsaatj.bkt.clouddn.com/20180227163310_1bVYeW_grid.jpeg);
  background-repeat: repeat;
}

jsPlumb.draggable('item_left', {
  containment: 'parent',
  grid: [10, 10]
})

2.13. 給連接添加點擊事件：點擊刪除連線

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/13.html

// 請單點擊一下鏈接線, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('肯定刪除所點擊的連接嗎？ 輸入1肯定') === '1') {
    jsPlumb.detach(conn)
  }
})

jsPlumb支持許多事件

jsPlumb Events列表

connection
connectionDetached
connectionMoved
click
dblclick
endpointClick
endpointDblClick
contextmenu
beforeDrop
beforeDetach
zoom
Connection Events
Endpoint Events
Overlay Events
Unbinding Events

參考用法參考：https://jsplumbtoolkit.com/community/doc/events.html#jsPlumbEvents

2.14. 刪除節點，包括節點相關的鏈接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/14.html

// nodeId爲節點id, remove方法能夠刪除節點以及和節點相關的連線
console.log('3 秒後移除左邊節點包括它的連線')
setTimeout(function () {
  jsPlumb.remove('item_left')
}, 3000)

注意remove方法有些狀況下是沒法刪除乾淨連線的，詳情

2.15. 經過編碼鏈接endPoint

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/15.html

初始化數據後，給節點加上了endPoint, 若是想編碼讓endPoint連接上。須要在addEndpoint時，就給該斷點加上一個uuid, 而後經過connect()方法，將兩個斷點連接上。建議使用node-uuid給每一個斷點都加上惟一的uuid，這樣之後連接就方便多了。

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right'],
  uuid: 'fromId'
})

jsPlumb.addEndpoint('item_right', {
  anchors: ['Left'],
  uuid: 'toId'
})

console.log('3 秒後創建連線')
setTimeout(function () {
  jsPlumb.connect({ uuids: ['fromId', 'toId'] })
}, 3000)

2.16. 鏈接前的檢查，判斷是否創建鏈接

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/16.html

有時候當用戶從A端點連接到B端點時，須要作一些檢查，若是不符合條件，就不讓連接創建。

// 當連接創建前
jsPlumb.bind('beforeDrop', function (info) {
  var a = 10
  var b = 2
  if (a < b) {
    console.log('連接會自動創建')
    return true // 連接會自動創建
  } else {
    console.log('連接取消')
    return false // 連接不會創建，注意，必須是false
  }
})

2.17. 一個端點如何拖拽出多條連線

默認狀況下，maxConnections的值是1，也就是一個端點最多隻能拉出一條連線。

你也能夠設置成其餘值，例如5，表示最多能夠有5條連線。

若是你想不限制連線的數量，那麼能夠將該值設置爲-1

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)

2.18. 整個節點做爲source或者target

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/18.html

整個節點做爲source或者target，而且將錨點設置成Continuous，那麼錨點就會隨着節點的位置改變而改變本身的位置。

jsPlumb的錨點分爲四類

Static 靜態固定位置的錨點
Dynamic jsPlumb自動選擇合適的錨點，動態錨點
Perimeter 邊緣錨點，會根據節點形狀去改變位置
Continuous 根據節點位置，自動調整位置的錨點

詳情：https://jsplumbtoolkit.com/community/doc/anchors.html

window.jsPlumb.ready(function () {
      var jsPlumb = window.jsPlumb

      jsPlumb.makeSource('A', {
        endpoint:"Dot",
        anchor: "Continuous"
      })

      jsPlumb.makeTarget('B', {
        endpoint:"Dot",
        anchor: "Continuous"
      })

      jsPlumb.draggable('A')
      jsPlumb.draggable('B')
    })

2.19. 節點縮放

demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/19.html

window.jsPlumb.ready(function () {
      var jsPlumb = window.jsPlumb
      jsPlumb.setContainer("diagramContainer")

      jsPlumb.connect({
        source: 'A',
        target: 'B',
        endpoint: 'Dot'
      })

      var baseZoom = 1
      setInterval(() => {
        baseZoom -= 0.1
        if (baseZoom < 0.5) {
          baseZoom = 1
        }
        zoom(baseZoom)
      }, 1000)
    })

    function zoom (scale) {
      $("#diagramContainer").css({
          "-webkit-transform": `scale(${scale})`,
          "-moz-transform": `scale(${scale})`,
          "-ms-transform": `scale(${scale})`,
          "-o-transform": `scale(${scale})`,
          "transform": `scale(${scale})`
      })
      jsPlumb.setZoom(0.75);
    }

3. jsPlumb默認配置簡介

參考地址: https://jsplumbtoolkit.com/community/doc/defaults.html

jsPlumb的配置項有不少，若是你不主動去設置，那麼jsPlumb就使用默認的配置。

另外建議你不要修改默認的配置，而是使用自定義的方式。

另一點要注意，若是你想修改默認配置，那麼使用importDefaults方法，而且屬性的首字母要大寫。若是你用addEndpoint, 並使用相似maxConnections的屬性，那麼首字母要小寫。

參見demo: https://wdd.js.org/jsplumb-chinese-tutorial/demos/17.html demo上須要你本身手動拖動建立連接。

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)

Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fill : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { strokeWidth : 8, stroke : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

你也能夠從jsPlumb.Defaults對象中查看默認的配置。若是你想要更加個性化的設置連線，那麼最好能夠了解一下，它的默認設置有哪些，從而方便的來完成本身的設計需求。

默認參數的簡介:

Anchor 錨點，即端點連接的位置
Anchors 多個錨點 [源錨點，目標錨點].
Connector 連接
ConnectionsDetachable 節點是否能夠用鼠標拖動使其斷開，默認爲true。即用鼠標連接上的連線，也可使用鼠標拖動讓其斷開。設置成false，可讓其拖動也不會自動斷開。
Container 連線的容器
DoNotThrowErrors 是否拋出錯誤
ConnectionOverlays 連接遮罩層
DragOptions 拖動設置
DropOptions 拖放設置
Endpoint 端點
Endpoints 數組形式的，[源端點，目標端點]
EndpointOverlays 端點遮罩層
EndpointStyle 端點樣式
EndpointStyles [源端點樣式，目標端點樣式]
EndpointHoverStyle 端點鼠標通過的樣式
EndpointHoverStyles [源端點鼠標通過樣式，目標端點鼠標通過樣式]
HoverPaintStyle 鼠標通過連接線時的樣式
LabelStyle 標籤樣式
LogEnabled 是否啓用日誌
Overlays 鏈接線和端點的遮罩層樣式
MaxConnections 端點最大鏈接線數量默認爲1，設置成-1能夠表示無數個連接
PaintStyle 連線樣式
ReattachConnections 端點是否能夠再次從新連接
RenderMode 渲染模式，默認是svg
Scope 做用域，用來區分哪些端點能夠連接，做用域相同的能夠連接

// 可使用importDefaults，來重寫某些默認設置
jsPlumb.importDefaults({
  PaintStyle : {
    strokeWidth:13,
    stroke: 'rgba(200,0,0,0.5)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }]
});