当前位置: 首页 > news >正文

Vue3使用AntV | X6绘制流程图:开箱即用

x6官方地址X6·图编辑引擎 | AntV

官方文档仔细地介绍了很多丰富的功能,这里的demo可以满足基本的使用,具体拓展还需要仔细看文档内容

先上效果图

1、安装

通过 npm 或 yarn 命令安装 X6。

# npm
npm install @antv/x6 --save# yarn
yarn add @antv/x6

初始化画布

<div id="container"></div>
import { Graph } from '@antv/x6'const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},
})

使用插件

import { Snapline } from '@antv/x6-plugin-snapline'graph.use(new Snapline({enabled: true,}),
)

数据导出

graph.toJSON()

具体依赖package.json

{"@antv/x6": "^2.0.0","@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能,需要安装此包"@antv/x6-plugin-history": "^2.0.0", // 如果使用撤销重做功能,需要安装此包"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能,需要安装此包"@antv/x6-plugin-minimap": "^2.0.0", // 如果使用小地图功能,需要安装此包"@antv/x6-plugin-scroller": "^2.0.0", // 如果使用滚动画布功能,需要安装此包"@antv/x6-plugin-selection": "^2.0.0", // 如果使用框选功能,需要安装此包"@antv/x6-plugin-snapline": "^2.0.0", // 如果使用对齐线功能,需要安装此包"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能,需要安装此包"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能,需要安装此包"@antv/x6-plugin-transform": "^2.0.0", // 如果使用图形变换功能,需要安装此包"@antv/x6-plugin-export": "^2.0.0", // 如果使用图片导出功能,需要安装此包"@antv/x6-react-components": "^2.0.0", // 如果使用配套 UI 组件,需要安装此包"@antv/x6-react-shape": "^2.0.0", // 如果使用 react 渲染功能,需要安装此包"@antv/x6-vue-shape": "^2.0.0" // 如果使用 vue 渲染功能,需要安装此包
}

本文依赖

"dependencies": {"@element-plus/icons-vue": "^2.3.1","element-plus": "^2.7.6","pinia": "^2.1.7","vue": "^3.4.29","vue-router": "^4.3.3","@antv/x6": "latest","@antv/x6-plugin-clipboard": "latest","@antv/x6-plugin-history": "latest","@antv/x6-plugin-keyboard": "latest","@antv/x6-plugin-selection": "latest","@antv/x6-plugin-snapline": "latest","@antv/x6-plugin-stencil": "latest","@antv/x6-plugin-transform": "latest","@antv/x6-plugin-node-editor": "latest","insert-css": "latest"},

完整代码,开箱即用


http://www.mrgr.cn/news/61789.html

相关文章:

  • 深入计算机语言之C++:类与对象(中)
  • vue3+vite5 打包优化
  • Java 虚拟机是什么?——探秘 JVM 的核心机制!
  • 安卓取消触摸屏幕的指针效果
  • 6,000 个网站上的假 WordPress 插件提示用户安装恶意软件
  • 【Linux知识】linux磁盘管理深入了解
  • Nginx 反向代理流程,以及缓冲区详解
  • 才正式发布两个月GitHub高达星标29.7K!如果你想入门LLM大模型,那这就是最好的教程!
  • LoRA微调,真的有毒!
  • 一篇文章让你彻底掌握 Python【可保存下载】
  • 沈阳乐晟睿浩科技有限公司抖音小店运营创新
  • Hierarchical Supervised Contrastive Learning for Multimodal Sentiment Analysis
  • 没有对象来和我手撕红黑树吧
  • keepalived+脚本抢占模式和非抢占模式
  • ComfyUI 轻松实现二次元线稿上色,快速生成精美动漫图像(附工作流)
  • 直播美颜SDK平台开发指南:美颜API的应用与性能提升方案详解
  • 图解Redis 07 | HyperLogLog数据类型的原理及应用场景
  • 供需指标(Supply and Demand ),供给与需求,寻找支撑压力位神器 MT4免费公式!
  • DICOM标准:深入详解DICOM数据模型,理解DICOM数据模型
  • SAP系统与快递100系统集成案例
  • Helm全链路精通:从入门到实战,Kubernetes应用管理新高度
  • 机器学习中回归任务、分类任务常用的算法
  • CSP/信奥赛C++刷题训练:经典前缀和例题(4):洛谷P3662:Why Did the Cow Cross the Road II S
  • 技术星河中的璀璨灯塔 —— 青云交的非凡成长之路
  • 2024网鼎杯青龙组Web+Misc部分WP
  • 群控系统服务端开发模式-应用开发-业务架构逻辑开发Base开发总结