快捷導(dǎo)航

Vue使用konva實(shí)現(xiàn)一個(gè)簡(jiǎn)便的流程圖

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

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

konva

Konva是一個(gè)Canvas相關(guān)庫(kù)，該庫(kù)提供了各種動(dòng)畫(huà)、綁定事件等用于繪制圖形.使用起來(lái)也很方便，如果你了解Canvas語(yǔ)法就能快速上手，不了解也沒(méi)關(guān)系，Canvas相關(guān)的是圖形屬性的設(shè)置，跟著文檔進(jìn)行設(shè)置即可。 konva的構(gòu)造很簡(jiǎn)單，首先我們先了解一下相關(guān)概念：

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

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

啟動(dòng)項(xiàng)目我們就能看到一個(gè)紅色矩形。

上述代碼中我們就在圖層中嵌入了一個(gè)矩形，而矩形的屬性項(xiàng)就是Canvas相關(guān)屬性。下面我們嵌入一個(gè)組：

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

流程圖

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

常量屬性

對(duì)于流程圖里的圖形來(lái)說(shuō)，有些屬性值比如：顏色、半徑、線(xiàn)寬大部分圖形是一樣的，針對(duì)這些值我們聲明一個(gè)對(duì)象保存，如果需要修改某個(gè)屬性值，直接修改對(duì)象中對(duì)應(yīng)的屬性即可。

   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)'
}

組裝

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

上面流程圖由五部分構(gòu)成，矩形跟文字是一組的，文字的位置是相對(duì)于矩形位置設(shè)置，以此來(lái)保證文字居中，箭頭跟兩個(gè)矩形之間的連接是通過(guò)坐標(biāo)確認(rèn)的，圖形與圖形之間的坐標(biāo)構(gòu)成了流程圖。流程圖的拼接就是去計(jì)算各個(gè)坐標(biāo)，知道了這點(diǎn)碰到復(fù)雜點(diǎn)的流程圖我們只要梳理好各個(gè)圖形的坐標(biāo)就能繪制出來(lái)。

封裝

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

   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é)點(diǎn)stage與圖層layer,items用來(lái)保存每個(gè)流程節(jié)點(diǎn)，接下來(lái)聲明創(chuàng)建矩形與箭頭的函數(shù)。

id就是每個(gè)節(jié)點(diǎn)的唯一標(biāo)識(shí)，type表示圖形類(lèi)型，shape表示圖形組。接下來(lái)就是我們根據(jù)配置項(xiàng)去聲明一個(gè)渲染函數(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表示用來(lái)聲明節(jié)點(diǎn)的配置項(xiàng)，我們用封裝好的類(lèi)再次實(shí)現(xiàn)上面的流程圖。

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