boyongjiong 最近的时间轴更新 boyongjiong 最近的时间轴更新 | boyongjiong欢迎大家关注 LogicFlow DiDi / 前端 V2EX 第 260353 号会员，加入于 2017-10-17 18:36:59 +08:00 |
r0ger1tlearn.com
北京
boyongjiong 最近回复了
2025 年 10 月 30 日 回复了 StocksAI 创建的主题 推广 Stocks AI 积分福利 2 |
D75926
2024 年 12 月 24 日 回复了 boyongjiong 创建的主题 程序员 手把手教你实现一个流程图库，我们创建了一个专栏来介绍相关概念并编程实现，欢迎关注~ |
@v136 感觉跟 LogicFlow 不是同一赛道的产品，这个感觉跟 https://mermaid.js.org/ 是类似的产品。
我们主要是面向 JS 用户，应用场景是直接通过拖拽编辑，更新节点承载的内容，并得到流程图所表达意思的数据。
plantUML 和 Mermaid 给我的感觉就是通过解构结构化的数据，并生成对应的图。具体绘图能力我没有调研这两款产品，所以还没有对比优劣势的结论
我们主要是面向 JS 用户，应用场景是直接通过拖拽编辑，更新节点承载的内容，并得到流程图所表达意思的数据。
plantUML 和 Mermaid 给我的感觉就是通过解构结构化的数据，并生成对应的图。具体绘图能力我没有调研这两款产品，所以还没有对比优劣势的结论
2024 年 11 月 19 日 回复了 boyongjiong 创建的主题 程序员 年终将至， Star 想上 9K，欢迎各位有需要的同学关注和交流，能给个 Star 就最好啦~ |
@yuliuxuanke just do it. try 1 try
2024 年 11 月 19 日 回复了 boyongjiong 创建的主题 程序员 年终将至， Star 想上 9K，欢迎各位有需要的同学关注和交流，能给个 Star 就最好啦~ |
@Ocyss 我个人感觉 Canvas 实现的困难点：
1. 调试困难（没办法直接像 dom 一样查看元素，调试和定位问题比较复杂）
2. Canvas 位图的方式，缩放会导致失真，豆包这种表单节点配置内容多的时候，感觉可能会有缩放的需求，不太确定缩放后体验如何
3. Canvas 作为画布，节点中如果要定义表单项的话，我目前不确定是不是要重写一套；使用 SVG 技术路线的话，可以复用项目中像 element-ui 或 antd 组件库中的表单项，实现功能相对简单
4. 我个人感觉没办法用 css 实现样式的话，Canvas 实现起来略复杂
anvt/g6 是用 canvas 实现的，可以调研一下是否能实现豆包的这个配置（我之前的感受是，g6 比较适合大数据的展示，向 node_modules 结构这种的）。
卡顿可以试一下开启局部渲染，因为 svg 的方式就是堆 DOM ，当节点内容复杂且节点数量多的时候，理论上确实会有卡顿的感觉，我们当时测试的数据如下，可以参考一下：
加载元素：
初次渲染瓶颈：
初次渲染 2000 个节点，DOM 元素数量约为 1600 ，延迟为 500 毫秒 ，明显卡顿。
初次渲染 750 个节点&边，DOM 元素数量约为 1800 ，延迟为 500 毫秒 ，明显卡顿。
增量渲染瓶颈：
在初始化渲染后，持续增加等量节点的情况下，渲染时间上下波动，总体上呈现出逐渐增加的趋势。
交互帧率：
移动画布：
画布上有 12000 个节点，DOM 元素数量约为 108129 ，帧率降低为 30 帧。
画布上有 750 个节点&边，DOM 元素数量约为 17056 ，帧率降低为 30 帧。
缩放画布：
画布上有 1500 个节点，DOM 元素数量约为 13650 ，帧率降低为 30 帧。
画布上有 840 个节点&边，DOM 元素数量约为 18596 ，帧率降低为 30 帧。
拖动元素：
画布上有 7100 个节点，DOM 元素数量约为 64029 ，帧率降低为 30 帧。
画布上有 840 个节点&边，DOM 元素数量约为 18642 ，帧率降低为 30 帧。
1. 调试困难（没办法直接像 dom 一样查看元素，调试和定位问题比较复杂）
2. Canvas 位图的方式，缩放会导致失真，豆包这种表单节点配置内容多的时候，感觉可能会有缩放的需求，不太确定缩放后体验如何
3. Canvas 作为画布，节点中如果要定义表单项的话，我目前不确定是不是要重写一套；使用 SVG 技术路线的话，可以复用项目中像 element-ui 或 antd 组件库中的表单项，实现功能相对简单
4. 我个人感觉没办法用 css 实现样式的话，Canvas 实现起来略复杂
anvt/g6 是用 canvas 实现的，可以调研一下是否能实现豆包的这个配置（我之前的感受是，g6 比较适合大数据的展示，向 node_modules 结构这种的）。
卡顿可以试一下开启局部渲染，因为 svg 的方式就是堆 DOM ，当节点内容复杂且节点数量多的时候，理论上确实会有卡顿的感觉，我们当时测试的数据如下，可以参考一下：
加载元素：
初次渲染瓶颈：
初次渲染 2000 个节点，DOM 元素数量约为 1600 ，延迟为 500 毫秒 ，明显卡顿。
初次渲染 750 个节点&边，DOM 元素数量约为 1800 ，延迟为 500 毫秒 ，明显卡顿。
增量渲染瓶颈：
在初始化渲染后，持续增加等量节点的情况下，渲染时间上下波动，总体上呈现出逐渐增加的趋势。
交互帧率：
移动画布：
画布上有 12000 个节点，DOM 元素数量约为 108129 ，帧率降低为 30 帧。
画布上有 750 个节点&边，DOM 元素数量约为 17056 ，帧率降低为 30 帧。
缩放画布：
画布上有 1500 个节点，DOM 元素数量约为 13650 ，帧率降低为 30 帧。
画布上有 840 个节点&边，DOM 元素数量约为 18596 ，帧率降低为 30 帧。
拖动元素：
画布上有 7100 个节点，DOM 元素数量约为 64029 ，帧率降低为 30 帧。
画布上有 840 个节点&边，DOM 元素数量约为 18642 ，帧率降低为 30 帧。
Select Language