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等。目前节点很多的话，渲染可能会吃力，相信大佬们会优化好渲染性能问题。

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

【angular-实践】数据监听并渲染到界面上
背景为了做一个面包屑的样式思路三个界面: 根页面: index(展示面包屑) 资金页面: fund(展示收入.支出,属于同一个页面) 步骤: 在index服务中存BehaviorSubject类 ...
Python黑客编程基础3网络数据监听和过滤
Python黑客编程3网络数据监听和过滤课程的实验环境如下: • 操作系统:kali Linux 2.0 • 编程工具:Wing IDE • Python版本:2.7. ...
Python黑客编程3网络数据监听和过滤
课程的实验环境以下: • 操作系统:kali Linux 2.0 • 编程工具:Wing IDE • Python版本:2.7.9 • 触及到的主要python ...
你值得拥有！更省钱地完成数据监听
作者 | 梁唐来源 | TechFlow(ID:techflow2019) 大家好,今天一起来了解一个新的设计模式--观察者模式. 观察者模式的思路很简单,它被广泛地应用在各种数据监控上. 很多时候 ...
Object.defineProperty与双向绑定、数据监听
一.对象赋值的两种方式一是"="赋值,一是Object.defineProperty方法,而当下流行框架中广泛应用的双向绑定和数据监听等,就是利用的第二种方式,关于此方法不多讲, ...
vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
vue，watch监听数据，数据监听
vue,watch监听数据,数据监听三个值: 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep:其值是true或false:确认是否深入监听.(一般 ...
我的Vu啊（vue 2.0，数据监听，计算属性，组件传参）
提示:个人Vue学习工作总结 (持续更新中如果有不对的地方还请前辈多多指点) 文章目录 vue 计算属性 computed vue 数据监听 wacth 提示:以下是本篇文章正文内容,下面案例可供 ...
java swing列表数据加监听,【Java Swing公开课|Java监听列表项选择事件怎么用，看完这篇文章你一定就会了】- 环球网校...
[摘要]作为一门面向对象编程语言,Java吸收了C++语言的优点,也展现了其强大的一面,我们能在各个地方看到其功能强大和简单易用的两个特征,当然,也吸引了很多程序员的注意力,所以就有人想了解Java的 ...

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

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

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

前言

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

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

2.后台json数据

二、监听

1.核心监听

2.console

总结

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

最新文章

热门文章

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

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

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

前言

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

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

2.后台json数据

二、监听

1.核心监听

2.console

总结

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

最新文章

热门文章

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