jsplumb 中文教程 連線繪圖工具庫介紹 附簡單在線demo與實戰項目

時間  2019-11-08
標籤 jsplumb 中文 教程 連線 繪圖 工具 介紹 簡單 在線 demo 實戰 項目 简体版
原文   原文鏈接

1. jsplumb 中文基礎教程

後續的更新會直接在github上，如需查看最新文檔，請直接訪問原始倉庫。
另外用了七牛的測試域名作圖片託管，如今發現不少圖片都沒法顯示了，建議直接參看git倉庫裏的, 倉庫中的示例圖片不是用的七牛雲，都能正常顯示。
倉庫地址：https://github.com/wangduandu...css

1.1. 什麼是jsplumb？

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

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

1.2. jsplumb能幹什麼？

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

1.3. 基本概念

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

2. 基礎demos

注意：點擊標題便可查看demo的在線效果webpack

2.1. 鏈接兩個節點

demo: https://wdd.js.org/jsplumb-ch...git

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

<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 connectionweb

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

>>> connect方法詳情segmentfault

2.2. 可拖動節點

demo: https://wdd.js.org/jsplumb-ch...api

使用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-ch...

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

<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-ch...

不少連線都是相同設置的狀況下，能夠將配置抽離出來，做爲一個單獨的變量，做爲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-ch...

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

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-ch...

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

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-ch...

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

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

2.8. 拖動建立鏈接

demo: https://wdd.js.org/jsplumb-ch...

若是你將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-ch...

經過設置各類 *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-ch...

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-ch...

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

jsPlumb.setContainer('area-id')

2.12. 節點網格對齊

demo: https://wdd.js.org/jsplumb-ch...
網格對齊其實是設置了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. 點擊刪除連線

// 單點擊了鏈接線, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (confirm('肯定刪除所點擊的連接嗎？')) {
    jsPlumb.detach(conn)
  }
})

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

// nodeId爲節點id, remove方法能夠刪除節點以及和節點相關的連線
jsPlumb.remove(nodeId)

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

2.15. 經過編碼鏈接endPoint

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

jsPlumb.addEndpoint(id, {
    anchors: 'Top',
    uuid: uuid() // 這裏須要惟一的一個Id, 
}, config)

jsPlumb.connect({ uuids: [fromId, toId] })

2.16 一個端點如何拖拽出多條連線？

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

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

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

參見 https://wdd.js.org/jsplumb-ch...

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

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

圖片描述

3. 有沒有稍微複雜一點，帶有拖放的栗子？

項目地址：https://github.com/wangduandu... ，將views目錄下的drag-drop-demo.html拖放到瀏覽器中，就能夠愉快的玩耍了。

從該demo中除了能夠學到基本的jsplumb的api, 也能夠學到其餘的關於拖放的知識點。其中目前只作了語音節點的拖放，其餘的還時間作。該demo沒有使用webpack打包，代碼寫的有點亂，你們湊合着看，有問題能夠提issue, 或者評論。

4. 實戰項目 一個可視化IVR編輯器

項目地址：https://github.com/wangduandu... 該項目還在開發完善中，不過已經具有基本功能。

該項目是用webpack打包的項目，全部文件都在src目錄下。

5. 參考資源

掃碼訂閱個人微信公衆號：洞香春天。天天一篇技術短文，讓知識再也不高冷。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程