vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue konva流程图

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

作者:躺平使者

日常开发中我们可能碰到流程图的需求,实现流程图的库有很多,如果我们想要实现一个简便的流程图可以使用konva库来实现,下面我们就来看一下具体的实现过程,需要的朋友可以参考下

konva

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

1693141929050.png

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

1693144060632.png

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

1693144200029.png

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

1693149331606.png

1693149375497.png

以上就是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箭头进行连接。

1693214304999.png

1693214395125.png

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

封装

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

1693217135671.png

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表示用来声明节点的配置项,我们用封装好的类再次实现上面的流程图。

1693218510413.png

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

1693218605743.png

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

总结

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

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

您可能感兴趣的文章:
阅读全文