Vue使用konva实现一个简便的流程图

konva

Konva是一个Canvas相关库，该库提供了各种动画、绑定事件等用于绘制图形.使用起来也很方便，如果你了解Canvas语法就能快速上手，不了解也没关系，Canvas相关的是图形属性的设置，跟着文档进行设置即可。 konva的构造很简单，首先我们先了解一下相关概念：

• state：数据的根节点。
• layer(图层)：子节点数据，里面包含着具体的图形或图形组。
• grops(组)：图形组，由多个图形组成，我们可以给一组内的图形设置样式或事件。
• shapes(图形)：图形，绘制到页面的图形，比如圆形、矩形等。图形的属性设置就跟Cansvas属性一样。konva对象是树状结构，具体构造类似于节点，由以上属性构成。

konva的工作原理与创造步骤也就是如此，根据数据结构我们可以写一个简单的demo。

启动项目我们就能看到一个红色矩形。

上述代码中我们就在图层中嵌入了一个矩形，而矩形的属性项就是Canvas相关属性。下面我们嵌入一个组：

以上就是konva绘制图形的过程，总结来说起来就是:创建state-->layer-->group/shape-->add添加-->layer.drwo()绘制。图形的具体语法可以查阅文档。除此之外，konva还有对应vue版本、与react版本。

流程图

如果我们绘制的流程图主要用于展示、交互很少，那么konva绘制流程图跟Canvas差不多，下面我们就用konva实现一个流程图。

常量属性

对于流程图里的图形来说，有些属性值比如：颜色、半径、线宽大部分图形是一样的，针对这些值我们声明一个对象保存，如果需要修改某个属性值，直接修改对象中对应的属性即可。

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

组装

流程图的绘制很简单，由一个个图形组装起来的，根据具体的需求我们将流程图分为n个图形，通过图形的x、y属性组装起来。比如我们来实现一个开始->结束的简单流程。 开始、结束我们就用defaultConfig里面的属性，节点之间的连接直接用konva的Arrow箭头进行连接。

上面流程图由五部分构成，矩形跟文字是一组的，文字的位置是相对于矩形位置设置，以此来保证文字居中，箭头跟两个矩形之间的连接是通过坐标确认的，图形与图形之间的坐标构成了流程图。流程图的拼接就是去计算各个坐标，知道了这点碰到复杂点的流程图我们只要梳理好各个图形的坐标就能绘制出来。

封装

上面例子中只有两个流程节点，但是我们声明了四个常量，节点一多常量也会更加得多，并且声明的变量主要区别就是坐标的变动，所以我们可以把创建节点封装成一个函数，将坐标等属性当成参数。按照此思路，我们把创建过程封装成一个类，想要去绘制时，直接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,
        })
      }
  }

首先我们创建根节点stage与图层layer,items用来保存每个流程节点，接下来声明创建矩形与箭头的函数。

id就是每个节点的唯一标识，type表示图形类型，shape表示图形组。接下来就是我们根据配置项去声明一个渲染函数。

   // 渲染图表
  render = (processConfig: any[]) => {
    // 循环创建图表
    processConfig.forEach((item: { type: any; params: any }) => {
      const { type, params } = item
      this['create' + type](params)
    })
    this.stage.add(this.layer)
    this.layer.draw()
  }

precessConfig表示用来声明节点的配置项，我们用封装好的类再次实现上面的流程图。

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

这样做代码的可读性大大提升了，后续维护起来也很方便，想要添加哪种图形就添加对应的函数，具体的api就去查官方文档。

总结

以上就是konva实现一个流程图的方法，文中的例子只是简单用了下konva，konva本身还有很多功能，可以让我们去实现更加复杂的需求。

到此这篇关于Vue使用konva实现一个简便的流程图的文章就介绍到这了,更多相关Vue konva流程图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论