需求:运行监控图模块,模块之间用虚线或者实线连接,且带有箭头
实现方法:
1、canvas绘制
2、echarts专业的表格软件(画带箭头的虚线有难度)
3、svg方法
4、leader-line插件
5、背景图
- 刚开始项目比较紧急,也没时间研究怎么划线比较好,就用了最笨的方法:背景图。就是让ui出一张背景图,只留下线条和背景色,其它元素的位置通过配置数据来动态渲染
难点:屏幕缩放时保证相对位置精确,这就需要以一个屏幕的宽高为基准进行比例计算,把其它元素的left和top值转化为百分比,并调节数值,使元素和背景图上线条的位置达到需要的效果
- 后续维护的时候发现了一个划线的专业插件leader-line,原理是使用svg绘制,https://anseki.github.io/leader-line/
文档相当详细,支持虚线、线条粗细、箭头、线性等的配置,就是不支持90度折线的圆角设置,于是在项目中使用了leader-line来划线
我的做法是在页面mounted时根据配置好的数据渲染线条,然后将线条对象存到store里,beforeDestroy时调用hide()方法隐藏,下次进入页面时就只需要调用show()方法显示就行,避免过多的渲染。当然也可以离开页面前调用remove()方法移除线条对象,下次进来再重新渲染,都是可以的。
注意点:渲染线条实例时需要获取dom结构,所以要等页面渲染完成后再调用绘制函数,最好在nextTick后再加个500ms的延时,确保需要的dom结构完全渲染完成,我之前没加就导致绘制了却无法显示的问题。
- canvas划线没试过,肯定是可以的
- svg划线,其它项目已经用的svg画线,正在研究当中,研究好了更新