|
最近使用Vue开发中，需要实现流程图的编辑和绘制，发现了一款好用的图编辑框架antv x6 点击查看官网api
安装
通过 npm 或 yarn 命令安装 X6。
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
使用
<!--绘图面板组件-->
<div id="container" class="x6-graph"/>
// 导入 Graph
import { Graph } from '@antv/x6';
// 初始化面板
const graph = new Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
// 格子属性
grid: {
size: 10,// 网格大小 10px
visible: true,// 渲染网格背景
type: 'dot',// 网格类型
},
});
const data = {
// 节点
nodes: [
{
id: 'node1', // String，可选，节点的唯一标识
x: 40, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: 'hello', // String，节点标签
},
],
// 边
edges: [
{
source: 'node1', // String，必须，起始节点 id
target: 'node2', // String，必须，目标节点 id
},
],
};
// 渲染节点数据
graph.fromJSON(data)
实际项目
效果图
vue项目结构
开发步骤
流程图组件结构
建立graph文件初始化流程图相关配置 多余代码...源码到git下载
const graphData = {
cells: [
{
// 设置节点位置
position: {
x: 420,
y: 40
},
size: {
width: 80,// 节点 widrth 值
height: 42// 节点 height 值
},
// 设置节点样式
attrs: {
text: {
text: '开始',
nodeType: 'start'
}
},
shape: 'flow-chart-rect',
zIndex: 1
},
}
export default graphData
注意：
1.自定义节点的时候，图片引入通过require导入
2.ports：链接桩是节点上的固定连接点。很多图应用都有链接桩，并且有些应用还将链接桩分为输入链接桩和输出连接桩。
建节点时我们可以通过 ports 选项来配置链接桩，像下面这样：
ports: {
groups: { ... }, // 链接桩组定义
items: [ ... ], // 链接桩
}
// 或者
ports: [ ... ], // 链接桩
import { Graph, Dom, Node } from '@antv/x6'
export const ChartH5Rect = Graph.registerNode('flow-H5-rect', {
inherit: 'rect',
...
attrs: {
body: {...},
image: {
'xlink:href':
require('../../../assets/h5.png'),
...
}
},
markup: [
...
{
tagName: 'image',
selector: 'image'
},
],
ports: {
groups: {...},
items: [
{
group: 'top'
},
...
]
}
})
Graph.registerNode('groupNode', NodeGroup)
注意：
1.grid是网格，
2.selecting内是点选/框选，默认禁用。创建画布时，通过selecting的配置开启选择交互，开启后可以通过点击或者套索框选节点。
3.connecting:配置全局的连线规则
import { Graph, FunctionExt, Shape, Addon } from '@antv/x6'
import './shape'
import graphData from './data'
export default class FlowGraph {
// 类构造方法
constructor () {
this.initGraph()
this.initStencil()
this.initEvent()
}
initGraph () {// 初始化面板
this.graph = new Graph({
container: document.getElementById('container'),
// 格子属性
grid: {...},
selecting: {....},
connecting: {....},
})
}
initStencil () { // 初始化左侧组件
this.stencil = new Addon.Stencil({
target: this.graph,
...
})
}
initGraphShape () { // 面板渲染
this.graph.fromJSON(graphData)
}
initEvent () {// 初始化事件
...
}
}
在页面中创建用于容纳 X6 绘图的容器元素
1.stencil 左侧节点库
2.panel 操作栏
3.container画布
<!--左侧工具栏-->
<div id="stencil" class="sider"></div>
<div class="panel">
<div class="toolbar">
<tool-bar :flowGraph="flowGraph" />
</div>
</div>
<!--绘图面板组件-->
<div id="container" class="x6-graph"/></div>
<!--配置面板组件：传递flowGraph给子组件使用-->
<div class="config">
<config-panel :flowGraph="flowGraph"/>
</div>
| 
转播
