SVG绘制流程图

项目中需要绘制流程图,在网上找了几个开源插件,了解后项目要求都不完全匹配,改代码几乎不可能,代码太长了,看懂都是一个问题!!

因此从零手写,参考了wps和ProcessOn的流程图前端代码,想出两种方案:一、div+canvas;二:svg或div+svg,我们流程图元素不多所以不涉及到性能问题,因此不用考虑太多,两个都可用,本例中使用纯SVG制作流程图,效果如下:

上图是其中一列,可以根据需求绘制出不同的流程图,目前约有1000行代码,还在不断的完善和升级中,代码太多,给出开发过程中重点代码,关键是思路 代码大家看看文档 都会写:

1、如何移动矩形:使用svg的mousemove事件,不断改变矩形的坐标,同时还要改变矩形四个边框中间的圆和矩形相关的箭头,菱形同理;

2、箭头使用什么绘制:使用line和path画直线,其中箭头使用defs;

<svg>
    <!--箭头-->
    <defs xmlns="http://www.w3.org/2000/svg">
        <marker id='markerArrow' markerWidth='8' markerHeight='13' refx='9' refy='5' orient='auto'>
            <path d='M2,2 L2,8 L8,5 L2,2' style='fill: rgb(255, 106, 0)' />
        </marker>
    </defs>
</svg>

3、如何画菱形:使用path,关键点在“d”参数:

	//菱形封装 {id:, type:"pathDiamond", x:,  y:,  width:,  height,text:""}
	getPathD: function (paras) {
		if (!paras.height) paras.height = paras.width*0.6;
		let line1x = paras.x + paras.width / 2;
		let line1y = paras.y - paras.height / 2;
		let line2x = paras.x + paras.width;
		let line2y = paras.y;
		let line3x = paras.x + paras.width / 2;
		let line3y = paras.y + paras.height / 2;
		let d = `m${paras.x},${paras.y} L${line1x},${line1y} L${line2x},${line2y} L${line3x},${line3y} L${paras.x},${paras.y}`;
		paras.d = d;
		return d;
	},

4、如何在矩形上写文字:svg元素不支持直接写文字,只能使用text或相关的元素写文字 ,然后根据矩形的位置定位text的位置,在移动矩形时也要移动text,菱形同理。

我认为关键点就这4点,另外此程序还在开发中,目前只调试了webkit内容的浏览器,像火狐等其他内核还没有调试过,有兴趣的可以一起交流(微信:gbcore)。

本篇使用纯svg实现流程图,也可以看另一篇“div+svg”实现,可下载源码:审批流程图vue+div+svg_高彬的博客-CSDN博客前段时间手写一个画审批流程的功能,当时使用的纯svg实现的,使用期间遇到了一些问题,纯svg实现逻辑会复杂一些,比如:svg矩形不能写文字、元素内不能放子元素等,所以这次使用“DIV+SVG”重新开发一版。上一个纯SVG纯地址是:SVG绘制流程图_高彬的博客-CSDN博客_svg流程图项目中需要绘制流程图,在网上找了几个开源插件,了解后项目要求都不完全匹配,改代码几乎不可能,代码太长了,看懂都是一个问题!!因此从零手写,参考了wps和ProcessOn的流程图前端代码,想出两种方案:一、div+canvhttps://blog.csdn.net/dystocia/article/details/124569587?spm=1001.2014.3001.5501

最后推荐一个:https://github.com/joyceworks/flowchart-vue

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值