解析 Rough.js 图形线填充实现:扫描线算法
· 阅读需 10 分钟
最后更新于 2024-06-16 19:11:00
由于比较好奇 Rough.js 的手绘风格是如何实现的,遂准备看看其源码实现,在这个过程中发现了一个依赖项包 hachure-fill
,类似铅笔线的图形填充依赖此包实现,其源码比较简洁,从其实现中了解到一个计算机图形学领域的概念-“扫描线算法(Scanline Algorithm)”。
最后更新于 2024-06-16 19:11:00
由于比较好奇 Rough.js 的手绘风格是如何实现的,遂准备看看其源码实现,在这个过程中发现了一个依赖项包 hachure-fill
,类似铅笔线的图形填充依赖此包实现,其源码比较简洁,从其实现中了解到一个计算机图形学领域的概念-“扫描线算法(Scanline Algorithm)”。
最后更新于 2023-11-11 21:56:00
ECharts 的 UniversalTransition 动画提供了一些复杂场景下过渡动画的解决方案,这类场景的难点在于让不规则图形或者不同形状的图形之间如何完成一个比较流畅的过渡动画,在业内比较熟知的类似技术则是 SVG Morph 动画。
查看以下 ECharts 官方示例:
最后更新于 2024-06-02 19:47:00
绘图引擎支持丰富交互的前提是拥有一套事件系统,而在画布中如何拾取元素是实现的关键,从 Konva.js 的源码来看看其事件系统是如何设计的。
(之前分析过 ZRender 的源码实现,其采用了几何判断的方式来实现元素拾取,而 Konva.js 采用了不同的方案。)