前端開源、易擴展、方便集成的繪圖工具（微服務架構圖、網絡拓撲圖、流程圖、活動圖等）

時間 2019-11-05

標籤前端開源擴展方便集成繪圖工具微服架構網絡拓撲流程圖活動欄目系統架構简体版

原文原文鏈接

le5le-topology是一款開源、易擴展、方便集成的在線繪圖（微服務架構圖、網絡拓撲圖、流程圖、活動圖、時序圖、類圖、動畫等）的軟件項目。前端

基於 typescript + canvas 實現的開源在線繪圖的引擎 Topology。採用引擎 + 圖形庫中間件的思路可以方便、快速的擴展、集成到前端項目。node

在線無償使用（由於操做方便問題，暫時沒有適配移動端）產品介紹git

爲何重複造輪子

筆者工做中遇到比較多的微服務架構、雲資源運維、部署與運維可視化方面的需求
開源、知足本身需求的很少
typescript + 純粹canvas架構的很少
以中間件方式可定製知足不一樣場景的很少
動畫支持

特色

開源
動畫
可定製化
簡單易用，方便集成
支持旋轉、縮放、文字屬性、邊框屬性、背景、連線動畫等
較好的性能，很是流暢
方便的數據導入導出
圖片保存/預覽
typescript + canvas

使用場景

微服務架構圖
運維時部署結構拓撲圖
流程圖

活動圖
時序圖
類圖等
類SCADA

架構設計

主要由：層、節點、連線和箭頭等組成。
es6

層：

這裏的層，主要是爲了提高性能的邏輯層；與相似ps裏面的用戶圖層無關。github

離屏層：包含全部繪圖數據，是最穩定的圖層。typescript

選中層：用戶選中部分或所有節點/連線的高亮圖層，並設置相關屬性、縮放、和旋轉等。npm

動畫層：主要用於演示動畫。canvas

活動層：主要用於箭頭鼠標交互事件，好比錨點和連線過程。api

節點：

是畫布的主要組成部分，節點內部還能夠包含圖標或文字。bash

連線和箭頭：

連線和箭頭是關聯在一塊兒的。連線兩端能夠選擇設置或不設置箭頭。

節點能夠經過控制點進行總體縮放、旋轉。

連線只表示節點描點間的連線，不存在縮放、旋轉。節點縮放或旋轉會形成控制點的重計算。連線形狀能夠由線的控制點改變。

繪畫與屬性

節點和連線各類有自身的繪畫屬性，同時還能夠設置一個附加的自定義數據

快速集成使用

es6使用示例：

github.com/le5le-com/t…

typescript使用示例：

github.com/le5le-com/t…

安裝

使用npm（或yarn）方式安裝使用。

# 安裝繪圖引擎
npm install topology-core

# 安裝圖形庫 - 流程圖
npm install topology-flow-diagram
# ...其餘圖形庫複製代碼

建立基礎畫布

// 1. 導入繪畫引擎
import { Topology } from 'topology-core';

// 2. 建立畫布
// 其中，第一個參數'topo-canvas'表示canvas的dom元素id；
// 第二個參數{}表示畫布選項，這裏表示所有使用默認值。具體選項請參考後面的api文檔。
var canvas = new Topology('topo-canvas', {});

// 3. 渲染圖形
// 其中，第一個參數{}表示圖形數據
// 第二個參數true，表示打開一個新文件；不然在當前文件打開，覆蓋已存在的圖形數據
canvas.render({}, true);複製代碼

經常使用畫布方法

// 獲取畫布數據
const data = this.canvas.data();

// 保存爲圖片blob
// toImage函數參數：type, quality, callback
this.canvas.toImage(null, null, blob => {
  // Do sth.
});

// 下載爲圖片
// saveAsImage函數參數：filename, type, quality
this.canvas.saveAsImage('canvas.png');

// 編輯相關操做
this.canvas.cut();
this.canvas.copy();
this.canvas.parse();
this.canvas.undo();
this.canvas.redo();複製代碼

引用第三方圖形庫

// 使用第三方圖形庫

// 1. 先導入註冊函數
import { registerNode } from 'topology-core/middles';

// 2. 導入圖形庫圖形及其相關元素
import {
  flowData,
  flowDataAnchors,
  flowDataIconRect,
  flowDataTextRect,
  flowSubprocess,
  flowSubprocessIconRect,
  flowSubprocessTextRect,
  flowDb,
  flowDbIconRect,
  flowDbTextRect,
  flowDocument,
  flowDocumentAnchors,
  flowDocumentIconRect,
  flowDocumentTextRect,
  flowInternalStorage,
  flowInternalStorageIconRect,
  flowInternalStorageTextRect,
  flowExternStorage,
  flowExternStorageAnchors,
  flowExternStorageIconRect,
  flowExternStorageTextRect,
  flowQueue,
  flowQueueIconRect,
  flowQueueTextRect,
  flowManually,
  flowManuallyAnchors,
  flowManuallyIconRect,
  flowManuallyTextRect,
  flowDisplay,
  flowDisplayAnchors,
  flowDisplayIconRect,
  flowDisplayTextRect,
  flowParallel,
  flowParallelAnchors,
  flowComment,
  flowCommentAnchors
} from 'topology-flow-diagram';

// 3. 向引擎註冊圖形庫圖形及其相關元素
registerNode('flowData', flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);
registerNode('flowSubprocess', flowSubprocess, null, flowSubprocessIconRect, flowSubprocessTextRect);
registerNode('flowDb', flowDb, null, flowDbIconRect, flowDbTextRect);
registerNode('flowDocument', flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect);
// ...

// 下面是簡單的註冊函數介紹，詳情請參考api文檔
// registerNode: 註冊一個自定義圖形節點node.
// name - node名稱.
// drawFn - node渲染函數。傳入canvas ctx和node數據，本身決定如何繪畫node
// anchorsFn - 計算node的錨點，若是爲null，表示使用缺省計算錨點方法
// iconRectFn - 計算node的圖標區域，若是爲null，表示使用缺省計算圖標區域方法
// textRectFn - 計算node的文字區域，若是爲null，表示使用缺省計算文字區域方法
// force - 若是已經存在同名node，是否覆蓋.
export function registerNode(
  name: string,
  drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void,
  anchorsFn?: (node: Node) => void,
  iconRectFn?: (node: Node) => void,
  textRectFn?: (node: Node) => void,
  force?: boolean
);複製代碼