记录--VUE使用antv X6实现流程图

安装npm install @antv/x6 --save
引入import { Graph, Addon } from "@antv/x6";
说明：如果没有自定义拖拽到画布的需求引入Graph就行了。

具体说明可查看官网
所有事件

graph.dispose() // 删除画布
graph.model.getNodes() // 获取画布中所有节点数据
graph.model.getEdges() // 获取画布中所有连接线数据

初始化代码：

<template><div id="container"></div>
</template>
<script>
import { Graph, Addon } from "@antv/x6";
export default {data() {return {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: "top1",group: "top"},{id: "right1",group: "right"},{id: "bottom1",group: "bottom"},{id: "left1",group: "left"}]}};},methods: {init() {let nodes = [{id:1, //节点唯一标识x:100,y:100,shape:"circle", // 节点形状height:30,width:100,attrs: { // 节点样式body: {fill: "#ffffff", // 背景颜色stroke: "#ffffff" // 边框颜色},label: {text: '节点', // 节点显示文字fill: "#000000"}},ports: this.ports // 链接桩},{id:2, //节点唯一标识x:200,y:300,shape:"circle", // 节点形状height:30,width:100,attrs: { // 节点样式body: {fill: "#ffffff", // 背景颜色stroke: "#ffffff" // 边框颜色},label: {text: '节点', // 节点显示文字fill: "#000000"}},ports: this.ports // 链接桩}]let esges = [{source: 2, // 开始节点idtarget:1, // 结束节点idlabel: x.cond,attrs: {text: {fill:"#800000",fontSize: 14,textAnchor: "middle",textVerticalAnchor: "middle",pointerEvents: "none"},line: {stroke:"#800000"}},router: { // 路由name: "manhattan",args: {} // 自定义数据}}]const graph = new Graph({container: document.getElementById("container"), // 画布snapline: { // 对齐线enabled: true,className: "my-snapline" // 自定义对齐线类名},grid: {  // 背景网格size: 10, // 网格大小 10pxvisible: true // 渲染网格背景},scroller: {enabled: true,pannable: true,autoResize: true},mousewheel: { // 缩放enabled: true,zoomAtMousePosition: true,modifiers: ["ctrl", "meta"],minScale: 0.2, // 最小缩放比例maxScale: 3 // 最大缩放比例},connecting: { // 连接线设置snap: {radius: 10}, // 自动吸附allowBlank: false, // 空白处不显示连接线allowLoop: true,allowMulti: false, // 在起始和终止节点之间只允许创建一条边highlight: true, // 高亮connector: "rounded",// 创建连接线createEdge() {return graph.createEdge({attrs: { // 连接线样式text: {fill: "#52ce60",fontSize: 14,textAnchor: "middle",textVerticalAnchor: "middle",pointerEvents: "none"},line: {stroke: "#52ce60"}},label: "pass"});},// 判断是否可以链接validateConnection({ edge, sourceView, targetView }) {// 自定义逻辑，不满足连接条件返回falsereturn true;}}});graph.fromJSON({ // 按照指定的 JSON 数据渲染节点和边nodes:nodes, // 节点数据edges:esges // 连接线数据});graph.centerContent() // 居中// 链接桩显示隐藏graph.on("node:mouseenter", () => {const ports = container.querySelectorAll(".x6-port-body");this.showPorts(ports, true);});graph.on("node:mouseleave", () => {const ports = container.querySelectorAll(".x6-port-body");this.showPorts(ports, false);});// 显示删除链接线按钮graph.on("edge:mouseenter", ({ edge }) => {edge.addTools(["source-arrowhead","target-arrowhead",{name: "button-remove",args: {distance: -30}}]);});graph.on("edge:mouseleave", ({ edge }) => {edge.removeTools();});// 显示删除节点按钮graph.on("node:mouseenter", ({ node }) => {node.addTools([{name: "button-remove",args: {x: "100%",y: 0,offset: { x: -10, y: 10 }}}]);});graph.on("node:mouseleave", ({ node }) => {node.removeTools();});},showPorts(ports, show) {for (let i = 0, len = ports.length; i < len; i = i + 1) {ports[i].style.visibility = show ? "visible" : "hidden";}}}
};
</script>

连接线以及节点的方法

记录--VUE使用antv X6实现流程图相关推荐

Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录
文章目录开始使用 Step 1 创建容器 Step 2 准备数据 Step 3 渲染画布取消节点的移动使用不同图形渲染节点画布居中和缩放修改边样式给虚线增加流动效果修改节点和边的属性鼠 ...
【VUE3+AntV X6】引入ANTV X6 的流程图编辑器应用（一）
ANTV X6 流程图编辑器应用唠唠叨叨事发背景实现效果实现思路总结参考资料唠唠叨叨唉!最近感觉非常忙,要学的东西太多,要实现的方法变幻莫测,层出不穷,越学越觉得自己不会的实在太多.项 ...
antV x6 开发流程图实例
1)使用x6背景之前本来是使用jsplumb社区版开发完成的,但是由于jsplumb社区版缩放功能不能满足,所以经过对比其他的流程图插件果断换x6.x6基本满足目前所有需求.使用起来还算顺手. 2) ...
Vue3 项目中使用 AntV X6 绘制流程图
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图.DAG 图.ER 图等图应用. 参考一些网站的写法,然后自己加上了撤销操作. 节点 ...
AntV X6流程图绘制程序（官方示例纯javascript+html+css）
直接拷贝可用,需要引入官方的x6.js(AntV X6) antvx6-flow: antv x6实现流程画图 (gitee.com) <!DOCTYPE html> <html ...
VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...
AntV X6流程图绘制程序
(官方示例纯javascript+html+css) 直接拷贝可用,需要引入官方的x6.js(AntV X6) antvx6-flow: antv x6实现流程画图 <!DOCTYPE html ...
AntV X6 流程图
安装 AntV X6 npm install @antv/x6 --save html结构 <div class="editor" ref="editor&quo ...

记录--VUE使用antv X6实现流程图

记录--VUE使用antv X6实现流程图相关推荐

最新文章

热门文章