最近公司需要做一个流程图, 看了看antv/X6感觉挺合适,就研究了半个月。 网上也没什么资料,又怕自己忘,就自己记录一下用到得一些事件方法,方便以后再用到可以查阅。
一:实现流程图最重要得就是画布了,官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。
首先最重要得就是下载依赖了, x6在vue中下载得话需要下载两个依赖;
npm install @antv/x6 --save
npm install @antv/x6-vue-shape
把这两个依赖下载好就可以在vue中使用X6了
首先在页面引入依赖
import "@antv/x6-vue-shape";
import { Graph } from '@antv/x6';
下面开始写代码
在methods里定义一个initX6方法, 然后拿到mounted里调用
initX6() {
this.graph = new Graph({
container: document.getElementById("containerChart"), //这是画布需要挂载得ID名字
width:1000, //画布宽度
height: 500, //画布高度
grid: this.grid, //画布样式, 在modou层自己定义用this调用
autoResize: true, //跟随窗口自动变化大小
});
},
需要定义画布背景网格得话可以自己定义, 下面是我自己定义得一个背景网格,直接在grid后面使用this.名字调用就可以。
data(){
return{
grid: {
// 网格设置
size: 20, // 网格大小 10px
visible: true, // 渲染网格背景
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // 网格线宽度/网格点大小
factor: 10,
},
},
}
}
这个时候在css里给你的挂载容器定义一个宽高你就可以在页面上看到一个画布了。 给他调整一个位置就开始写节点吧。
新建一个JS文件, 用来定义节点和写拖拽代码。
import '@antv/x6-vue-shape';
import { Addon} from '@antv/x6';
// 拖拽生成四边形
export const startDragToGraph = (graph,type,e) =>{
const node =
graph.createNode({
width: 100, //节点的宽度
height: 60, //节点的高度
attrs: {
label: {
text: type,
fill: '#000000',
fontSize: 14,
textWrap: {
width: -10 ,
height: -10,
ellipsis: true,
},
},
body: {
stroke: '#000000',
strokeWidth: 1,
fill: '#ffffff',
}
},
ports: ports
})
const dnd = new Addon.Dnd({target:graph})
dnd.start(node,e)
}
//下面是锚点的代码。 知道就行了 我就不一一写了。
const ports = {
groups: {
// 输入链接桩群组定义
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
// 输出链接桩群组定义
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: &