Antv踩坑—导入画布数据监听画布渲染完成事件

Antv 踩坑记录之监听画布渲染完成事件

前言

一、导入后台返回的json数据

1.页面判断 新增/详情页

 2.后台json数据

二、监听

1.核心监听

2.console

总结

---

Antv 踩坑记录之监听画布渲染完成事件

事件监听 目前来说 antv文档写的不够完善，如果完善 工作量非常大...废话少说，今天遇到的问题是画布渲染完成如何进行监听，来进行后续操作。

---

前言

项目中，新增流程图 编辑流程图 详情页数据流程图，基本上用的是一个画布组件，组件内进行了页面props判断，来进行左侧栏stencil显示与否，toolbar显示与否，画布的Node、Edge、Label是否可编辑，可拖拽。写起来比较头大，判断有时候写着写着就走true了，很是难受。像刚才说的那些，逻辑清晰基本可以搞，但是文档的不完整，造就了摸石头过河，全程看ts文件摸索事件挨个敲。

项目中详情页想实现，从后台获取到的序列化json画布数据&后台返回的特殊节点的后台数据，导入进画布内，监听画布渲染完成事件利用后台返回的数据进行特殊节点数据的新增节点，以及label标签插入。最终呈现如下（2093、4.19、95.81这些是后台数据）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、导入后台返回的json数据

1.页面判断 新增/详情页

if (this.showType === 'update' || this.showType === 'details') {
        graph.fromJSON(this.cells)
}

 2.后台json数据

id可能为edgeId nodeId portId...需要整张画布过滤插入对应区域

count 画布所需数据

[
    {
        "id": "e4959e36-9c87-4757-9dcc-3b1588b1d712",
        "count": 4
    },
    {
        "id": "03039a2e-a8b8-4a95-ada3-3cd78ceda24e",
        "count": 16
    },
    {
        "id": "fd54f6c9-3338-417b-baf4-3588acb002a1",
        "count": 16
    }    
]

二、监听

1.核心监听

代码如下（示例）：

graph.on('model:reseted', ({ current, options, previous }) => {
        console.log('model:reseted')
        console.log(current, options, previous)
})

2.console

这样就可以针对某个node edge进行画布装填新元素了。后续操作有时间在写吧。狗命要紧，(¦3[▓▓] 晚安

---

总结

导入画布数据，渲染完成需要后续操作，就必须用到事件监听，如果不知道什么事件就会卡住，毕竟第三方都懂得，反正会用就行了，目前来说，文档写的有点小乱，项目大文档乱很正常，相比之下echarts文档还是可以的，功能性的话各有千秋，大家选着来就行。

希望Antv文档可以在全面一些，流程图目前antv够用，自由度很大，可以react设置节点，vue模板设置节点以及Html、svg等。目前节点很多的话，渲染可能会吃力，相信大佬们会优化好渲染性能问题。