vue项目中画出优雅的线条

时间:2024-04-12 13:52:01

需求:运行监控图模块,模块之间用虚线或者实线连接,且带有箭头

vue项目中画出优雅的线条

实现方法:

1、canvas绘制

2、echarts专业的表格软件(画带箭头的虚线有难度)

3、svg方法

4、leader-line插件

5、背景图

  •    刚开始项目比较紧急,也没时间研究怎么划线比较好,就用了最笨的方法:背景图。就是让ui出一张背景图,只留下线条和背景色,其它元素的位置通过配置数据来动态渲染

      难点:屏幕缩放时保证相对位置精确,这就需要以一个屏幕的宽高为基准进行比例计算,把其它元素的left和top值转化为百分比,并调节数值,使元素和背景图上线条的位置达到需要的效果

文档相当详细,支持虚线、线条粗细、箭头、线性等的配置,就是不支持90度折线的圆角设置,于是在项目中使用了leader-line来划线

vue项目中画出优雅的线条

我的做法是在页面mounted时根据配置好的数据渲染线条,然后将线条对象存到store里,beforeDestroy时调用hide()方法隐藏,下次进入页面时就只需要调用show()方法显示就行,避免过多的渲染。当然也可以离开页面前调用remove()方法移除线条对象,下次进来再重新渲染,都是可以的。

注意点:渲染线条实例时需要获取dom结构,所以要等页面渲染完成后再调用绘制函数,最好在nextTick后再加个500ms的延时,确保需要的dom结构完全渲染完成,我之前没加就导致绘制了却无法显示的问题。

  • canvas划线没试过,肯定是可以的
  • svg划线,其它项目已经用的svg画线,正在研究当中,研究好了更新