VUE+antvx6实现拖拽⾃定义流程图
最近公司需要做⼀个流程图， 看了看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() {
container: ElementById("containerChart"), //这是画布需要挂载得ID名字
width：1000,  //画布宽度
height: 500, //画布⾼度
grid: id, //画布样式，在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 =
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: '#fff',
},
},
},
},
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#2D8CF0',
strokeWidth: 2,
fill: '#fff',
},
},
},
},
items: [
{
id: 'port1',
group: 'top',
},
{
id: 'port2',
group: 'bottom',
},
{
id: 'port3',
group: 'left',
},
{
id: 'port4',
group: 'right',
}
],
}
定义完节点和锚点以后回到vue页⾯引⼊JS⽂件
import { startDragToGraph } from "../methods.js"; //引⼊定义好的JS⽂件
去HTML层加⼊⼿动拖拽的节点内容。
<template>
<div class="warp">
<div id="containerchart"></div>
<div
v-for="(item, index) in List"
:key="index"
class="btn"
:
title="item"
@mousedown="startDrag(item, $event)"
>
<span>
{{ item }}
</span>
</div>
</div>
</template>
//循环的list是⾃⼰写的
data() {
return {
List: ["内置节点"],
grid: {
// ⽹格设置
size: 20, // ⽹格⼤⼩ 10px
visible: true, // 渲染⽹格背景
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // ⽹格线宽度/⽹格点⼤⼩
factor: 10,
},
},
};
},
然后在methods⾥定义⽅法，把type传到js⽂件⾥。
startDrag(type, e) {
aph, type, e);
},
完成以上你就可以得到如下效果，从右侧拖拽节点到画布上就可以展⽰了。
只不过现在拖拽和线条还是有问题的。  接下来解决⼀下连线的问题。
data() {
return {
List: ["内置节点"],
grid: {
/
/ ⽹格设置
size: 20, // ⽹格⼤⼩ 10px
visible: true, // 渲染⽹格背景
type: "mesh",
args: {
color: "#D0D0D0",
thickness: 1, // ⽹格线宽度/⽹格点⼤⼩
factor: 10,
},
},
connectEdgeType: {
/
/连线⽅式
vuejs流程图插件connector: "normal",
router: {
name: "",
},
},
//⾸先在data⾥定义下⾯三个内容，下⾯需要⽤到
graph: "",
type: "grid",
selectCell: "",
};
},
//然后在methods⾥的initX6⽅法⾥加上下⾯的⽅法
connecting: {
// 节点连接
anchor: "center",
connectionPoint: "anchor",
allowBlank: false,
snap: true,
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。