使用SVG绘制流程图
本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图:
节点可以任意拖拽,曲线跟随变化
正在连接的线
1、节点实现
流程图是基于SVG绘制的,节点主要利用 g
和 foreignObject
的特性来实现:
<g class="pane-node">
<foreignObject width="180" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<div class="pane-node-content">
<span class="iconfont icon-datas"></span>
<span class="name" :title="item.name">{{item.name}}</span>
<!-- 节点进 -->
<div class="pane-port-list in">
......
</div>
<!-- 节点出 -->
<div class="pane-port-list out">
......
</div>
</div>
</body>
</foreignObject>
</g>
- g元素:特性是可以包裹元素,并进行位置变化,这样拖拽的时候获取对应的坐标改变
transform
的值就可以整体移动了; - foreignObject标签:借助
<foreignObject>
标签,可以直接在SVG内部嵌入XHTML元素,尤其一些需要css进行控制的样式类,但是这个兼容性较差,主要是IE浏览器。
2、曲线的绘制
核心代码:
<g class="pane-link">
<path class="connector-wrap" :d="`M ${pos.startS} Q ${pos.curveS} T ${pos.endS}`"></path>
<path
class="target-marker"
d="M 5 0 L 0 3.6327126400268037 L 5 7.265425280053607 Z"
:transform="`translate(${item.endPosX - 4},${item.endPosY + 4}) scale(1,1) rotate(-90)`"
></path>
</g>
这里使用的是svg
中的path
中的M Q T
:
M
:moveto
这里是初始节点的底部连接点Q
:quadratic Bézier curve
二次贝塞尔曲线
【截图源于网络】T
:smooth quadratic Bézier curveto
二次贝塞尔曲线平滑延伸
【截图源于网络】
这里的
T
指的是通过一个控制点推断出一个新的控制点,T前面必须是一个Q命令或者是另一个T命令
由此可见,只要确认三个点(起点,控制点,终点),就可以绘制出平滑好看的曲线啦~
/**
* startPosX 起节点的左上角x
* endPosX 终节点的左上角x
* sizeX 节点的一半宽度 sizeY 是节点的高度
/
// 起始点
let startS = `${startPosX + sizeX} ${startPosY + sizeY}`;
// 二次贝尔曲线
let curveS = `${startPosX + sizeX} ${startPosY + sizeY + 40} ${
this.endNode
? (startPosX + endPosX+ 2 * sizeX) / 2
: (startPosX + endPosX+ sizeX) / 2
} ${(startPosY + endPosY + 20) / 2}`;
// 终点
let endS = `${this.endNode ? endPosX + sizeX : endPosX} ${endPosY}`;
至于节点的拖拽就比较简单了,点击移动的时候获取位置信息更transform
的translate
属性即可。
使用SVG绘制流程图的更多相关文章
- 使用SVG绘制湖南地图
项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...
- SVG Drawing Animation - SVG 绘制动画
一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...
- html 5新特性 --用SVG绘制的微信logo
一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...
- SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...
- 18个超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...
- svg绘制一个简单地饼图
一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- 程序猿必备的10款超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...
- SVG绘制图形
一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...
- 划词标注1——使用svg绘制换行文本并自动识别库中字典数据
业务需求 给出一段文本,自动识别出文本中包含的关键字信息,关键字是库里已知的数据,根据类型的不同显示出不同的颜色 业务分析 1)采用css:文本识别出来后,根据识别出的文本更改对应文本的dom,通过更 ...
随机推荐
- the type initializer for 'system.drawingcore.gdiplus' threw an exception
Centos 7 yum install libgdiplus-devel reboot之后生效 apt install libgdiplus cp /usr/lib/libgdiplus.so ~/ ...
- AssertJ断言系列-----------<数据库断言二>
那么,在实际的接口测试中,我们除了要断言响应的数据正确之外,可能有的还需要断言数据层是否数据真的有入库. assertj db是可以直接对数据库进行断言和操作的. 一.创建一个students表 CR ...
- 2. 需要对测试用的数据进行MD5加密
import hashlib phone_num = open("D:/testdata/phone10.txt","r") out_file = open(& ...
- mysql工具——mysqlcheck(MYISAM)
基本介绍 演示: 使用optimize的时候,可能会出现 Table does not support optimize, doing recreate + analyze instead 这时候参考 ...
- session_destroy()和session_unset()的理解
session_destroy 是注销所有的session变量,并且结束session会话目前是删除当前用户对应的session文件以及释放session id值 ,但是但是 内存中的$_SESSIO ...
- Q673 最长递增子序列的个数
给定一个未排序的整数数组,找到最长递增子序列的个数. 示例 1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列,分别是 [1, 3, 4, 7] 和[1, 3, 5, 7] ...
- (热死你)Resin https ssl Linux 配置,实战可用
(热死你)Resin https ssl Linux 配置,实战可用 一.配置resin 1.在resin服务器中创建目录keys文件和openssl.conf,格式内容如下: #先复制以下的内容: ...
- Django 中文乱码问题&富文本显示
1.起源:从后台管理添加中文对象,正常,但是再次点击编辑的时候,抛出异常,显示编码问题. 解决:在项目的manage.py 的文件头部添加 import sys reload(sys) sys. ...
- mysql exceeded the 'max_questions' resource 记录
最近Hive Meta的 Mysql 常报错 'user' has exceeded the 'max_questions' resource (current value: 10000) 解决:调 ...
- Linux下iptables 禁止端口和开放端口
1.关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放.下面是命令实现: iptables -P INPUT DROP iptables -P FORWARD DROP iptab ...