X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。接下来就看看vue如何使用它
0x0 前言
因为项目用到流程图，并且需求也算是不详细，所以选择比较灵活的 x6 图形编辑器作为流程图编辑器，从文档来看不算复杂，这边就是作为参考教程。
Antv X6 文档
0x1 安装
根据教程提示安装 x6 依赖即可，然后新建个容器进行实例化：
<div class="area-center-container" />
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，节点标签 }, { id: 'node2', // String，节点的唯一标识 x: 160, // Number，必选，节点位置的 x 值 y: 180, // Number，必选，节点位置的 y 值 width: 80, // Number，可选，节点大小的 width 值 height: 40, // Number，可选，节点大小的 height 值 label: 'world', // String，节点标签 }, ], // 边 edges: [ { source: 'node1', // String，必须，起始节点 id target: 'node2', // String，必须，目标节点 id }, ], } function initGraph() { const graph = new Graph({ container: this.$refs.containerRef, grid: { size: 10, // 网格大小 10px visible: true // 渲染网格背景 }, snapline: { enabled: true, // 对齐线 sharp: true }, scroller: { enabled: true, pageVisible: false, pageBreak: false, pannable: true } }) // 画布居中<a style="color:transparent">来@源gao*daima.com搞@代#码网</a> graph.centerContent() graph.fromJSON(data) }
就这样最简单例子实现了，上面不同的参数请参考文档对应的解释。
0x2 节点侧边栏
根据文档的 stencil 例子，可以简化很多代码量，直接用封装好的业务就行了，和上面一样直接写个容器实例化即可：
this.stencil = new Stencil({ title: '流程节点侧边栏', target: graph, search: false, collapsable: true, stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth, stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight, groups: [ { name: 'group', title: '流程图节点', collapsable: false } ], getDropNode: node => { let cloneNode = node.clone() switch (node.shape) { case 'rect': cloneNode = new RectShape() break case 'circle': cloneNode = new CircleShape() break case 'polygon': cloneNode = new PolylineShape() break } cloneNode.updateInPorts(graph) return cloneNode } }) // 加载节点 this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')
0x3 整合例子
在线：https://codesandbox.io/s/icy-meadow-rqihx
以上就是Vue.js 使用Antv X6的示例步骤的详细内容，更多关于Vue.js 使用 Antv X6的资料请关注gaodaima搞代码网其它相关文章！
以上就是Vue.js 使用AntV X6的示例步骤的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue.js 使用AntV X6的示例步骤
转载请注明原文链接：Vue.js 使用AntV X6的示例步骤
