推荐一个使用的前端页面画流程图的插件——X6

突然接到一个需要在h5页面上展示一个流程图,原想着用css配合js的写法来完成,结果大致的尝试了下感觉工作量有点巨大,有点不太划算,就到处找各种插件,各种海搜,还是有不少资源蹦跶了出来,像gojs啊,flowcanvas啊什么的,诸君也可以去看看。
但个人感觉还是X6好用点儿,简单方便明了。全称是antv/x6、相比gojs可能涉及到版权收费之类的问题,X6是开源的可以放心使用,其他很多类似画布工具般使用X6可以直接以代码方式实现流程制作与展示。有兴趣的可以看看。
[X6官网地址](https://x6.antv.vision/zh/docs/tutorial/getting-started)
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
X6 是一款强大的 JavaScript 绘图库,支持绘制流程图和其他类型的图形。你可以使用 X6 自带的导出功能来将绘制的流程图导出为多种格式,例如 PNG、SVG、PDF 等格式。X6 支持使用插件来扩展导出功能。 以下是一个示例代码,演示如何使用 X6 插件导出流程图: ```javascript import { Graph, PluginManager } from '@antv/x6' // 创建一个 Graph 对象 const graph = new Graph({ container: document.getElementById('container'), width: 800, height: 600, }) // 创建一个插件管理器对象 const pluginManager = new PluginManager(graph) // 加载导出插件 pluginManager.load('to-png') // 导出流程图为 PNG 格式 graph.toPNG((dataUri) => { // 将 dataUri 赋值给图片标签的 src 属性,即可在页面上显示导出的图片 const img = document.createElement('img') img.src = dataUri document.body.appendChild(img) }) ``` 在上述代码中,我们首先创建了一个 `Graph` 对象,然后创建了一个插件管理器对象 `pluginManager`。接下来,我们调用 `pluginManager.load('to-png')` 方法来加载导出插件,这里我们加载了一个名为 `to-png` 的插件,该插件可以将流程图导出为 PNG 格式。最后,我们调用 `graph.toPNG()` 方法来导出流程图,并在回调函数中获取导出的 PNG 图片数据,将其赋值给一个图片标签的 `src` 属性,即可在页面上显示导出的图片。 除了导出 PNG 格式,X6 还支持导出 SVG、PDF 和 JSON 等格式,你可以根据需要加载相应的插件来扩展导出功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值