解析 Rough.js 图形线填充实现：扫描线算法
· 阅读需 10 分钟
最后更新于 2024-06-16 19:11:00
由于比较好奇 Rough.js 的手绘风格是如何实现的，遂准备看看其源码实现，在这个过程中发现了一个依赖项包 hachure-fill，类似铅笔线的图形填充依赖此包实现，其源码比较简洁，从其实现中了解到一个计算机图形学领域的概念-“扫描线算法（Scanline Algorithm）”。
6 篇博文 含有标签「数据可视化」
查看所有标签AIGC 在可视化生成场景的探索路径
· 阅读需 20 分钟
最后更新于 2024-01-22 16:51:00
2022 年接近年底时 OpenAI 发布了 ChatGPT3，实际上一开始业界还没有太大的反响，但在过了大概一个月即 12 月的时候，ChatGPT3 突然引爆了 AI 技术发展新的潮流，业内大部分企业与开发者都开始讨论 OpenAI 与它的产品 ChatGPT3，紧接着 2023 年则成了 “AI 元年”，业内都开始积极探索如何将这种对话聊天 AI 机器人的技术能力结合到自己的业务和产品中去，实现“智能化升级”，抓住下一个风口。
这里则是记录一下自 2023 年中以来大概半年多时间中结合 AIGC 技术在可视化自动生成场景进行的探索尝试和实践经验。通过对这段经历的回顾也能认识到对目前 AI 技术的认知变化，对未来更好的开发 AI 应用产品有一定的借鉴意义。
解析 ECharts 设计：UniversalTransition 动画
· 阅读需 12 分钟
最后更新于 2023-11-11 21:56:00
ECharts 的 UniversalTransition 动画提供 了一些复杂场景下过渡动画的解决方案，这类场景的难点在于让不规则图形或者不同形状的图形之间如何完成一个比较流畅的过渡动画，在业内比较熟知的类似技术则是 SVG Morph 动画。
查看以下 ECharts 官方示例：
解析 Konva 设计：事件系统
· 阅读需 13 分钟
最后更新于 2024-06-02 19:47:00
绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 Konva.js 的源码来看看其事件系统是如何设计的。
（之前分析过 ZRender 的源码实现，其采用了几何判断的方式来实现元素拾取，而 Konva.js 采用了不同的方案。）
解析 ECharts 设计：交互状态系统
· 阅读需 22 分钟
最后更新于 2023-01-09 23:37:00
通常，对于 Web 页面的交互处理中，尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的，但如果是普通对象呢？问题似乎变得复杂起来了，这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现，讨论一下在复杂场景中处理交互状态的设计方案，如何将命令式编码的复杂性通过声明式编码来降低，该怎样应对复杂场景下的状态叠加问题。
解析 ZRender 设计：事件系统
· 阅读需 13 分钟
最后更新于 2024-06-16 16:09:00
绘图引擎支持丰富交互的前提是拥有一套事件系统，而在画布中如何拾取元素是实现的关键，从 ZRender 的源码来看看其事件系统是如何设计的。