Vue使用konva實現(xiàn)一個簡便的流程圖

更新時間：2023年08月29日 08:55:53 作者：躺平使者

日常開發(fā)中我們可能碰到流程圖的需求,實現(xiàn)流程圖的庫有很多,如果我們想要實現(xiàn)一個簡便的流程圖可以使用konva庫來實現(xiàn),下面我們就來看一下具體的實現(xiàn)過程,需要的朋友可以參考下

konva

Konva是一個Canvas相關庫，該庫提供了各種動畫、綁定事件等用于繪制圖形.使用起來也很方便，如果你了解Canvas語法就能快速上手，不了解也沒關系，Canvas相關的是圖形屬性的設置，跟著文檔進行設置即可。 konva的構造很簡單，首先我們先了解一下相關概念：

state：數(shù)據(jù)的根節(jié)點。
layer(圖層)：子節(jié)點數(shù)據(jù)，里面包含著具體的圖形或圖形組。
grops(組)：圖形組，由多個圖形組成，我們可以給一組內的圖形設置樣式或事件。
shapes(圖形)：圖形，繪制到頁面的圖形，比如圓形、矩形等。圖形的屬性設置就跟Cansvas屬性一樣。konva對象是樹狀結構，具體構造類似于節(jié)點，由以上屬性構成。

konva的工作原理與創(chuàng)造步驟也就是如此，根據(jù)數(shù)據(jù)結構我們可以寫一個簡單的demo。

啟動項目我們就能看到一個紅色矩形。

上述代碼中我們就在圖層中嵌入了一個矩形，而矩形的屬性項就是Canvas相關屬性。下面我們嵌入一個組：

以上就是konva繪制圖形的過程，總結來說起來就是:創(chuàng)建state-->layer-->group/shape-->add添加-->layer.drwo()繪制。圖形的具體語法可以查閱文檔。除此之外，konva還有對應vue版本、與react版本。

流程圖

如果我們繪制的流程圖主要用于展示、交互很少，那么konva繪制流程圖跟Canvas差不多，下面我們就用konva實現(xiàn)一個流程圖。

常量屬性

對于流程圖里的圖形來說，有些屬性值比如：顏色、半徑、線寬大部分圖形是一樣的，針對這些值我們聲明一個對象保存，如果需要修改某個屬性值，直接修改對象中對應的屬性即可。

   const defaultConfig = {
      radius: 30, //圓半徑
      arrowRadius: 10, //箭頭圓半徑
      rectWith: 60, // 矩形的寬
      rectHeight: 40,// 矩形的高
      yellow: 'rgb(254, 187, 29)',
      blue: 'rgb(0,117,255)',
      grey: 'rgb(155,162,160)'
}

組裝

流程圖的繪制很簡單，由一個個圖形組裝起來的，根據(jù)具體的需求我們將流程圖分為n個圖形，通過圖形的x、y屬性組裝起來。比如我們來實現(xiàn)一個開始->結束的簡單流程。開始、結束我們就用defaultConfig里面的屬性，節(jié)點之間的連接直接用konva的Arrow箭頭進行連接。

上面流程圖由五部分構成，矩形跟文字是一組的，文字的位置是相對于矩形位置設置，以此來保證文字居中，箭頭跟兩個矩形之間的連接是通過坐標確認的，圖形與圖形之間的坐標構成了流程圖。流程圖的拼接就是去計算各個坐標，知道了這點碰到復雜點的流程圖我們只要梳理好各個圖形的坐標就能繪制出來。

封裝

上面例子中只有兩個流程節(jié)點，但是我們聲明了四個常量，節(jié)點一多常量也會更加得多，并且聲明的變量主要區(qū)別就是坐標的變動，所以我們可以把創(chuàng)建節(jié)點封裝成一個函數(shù)，將坐標等屬性當成參數(shù)。按照此思路，我們把創(chuàng)建過程封裝成一個類，想要去繪制時，直接new一個，傳入相關配置。

   export class DrawGraph {
      el: any | string
      layer: Layer
      items: any[]
      stage: Stage
      constructor(el: string | HTMLDivElement) {
        if (typeof el === 'string') {
          this.el = document.querySelector(el)
        } else {
          this.el = el
        }
        this.layer = new Layer()
        this.items = []
        this.stage = new Stage({
          container: this.el,
          width: 500,
          height: 500,
        })
      }
  }

首先我們創(chuàng)建根節(jié)點stage與圖層layer,items用來保存每個流程節(jié)點，接下來聲明創(chuàng)建矩形與箭頭的函數(shù)。

id就是每個節(jié)點的唯一標識，type表示圖形類型，shape表示圖形組。接下來就是我們根據(jù)配置項去聲明一個渲染函數(shù)。

   // 渲染圖表
  render = (processConfig: any[]) => {
    // 循環(huán)創(chuàng)建圖表
    processConfig.forEach((item: { type: any; params: any }) => {
      const { type, params } = item
      this['create' + type](params)
    })
    this.stage.add(this.layer)
    this.layer.draw()
  }

precessConfig表示用來聲明節(jié)點的配置項，我們用封裝好的類再次實現(xiàn)上面的流程圖。

   const initGraph = () => {
  const config = document.querySelector('#wrapper') as HTMLDivElement
  const graph = new DrawGraph(config)
  graph.render(processConfig)
}
onMounted(() => {
  initGraph()
})