本文是作者对ZRender前端绘图引擎的研究记录，旨在通过学习ZRender来理解其设计思想和实现。作者首先介绍了ZRender在图表库开发中的重要性，然后通过实例展示了如何使用ZRender进行基础图形元素（如直线、矩形、圆形、曲线等）的绘制，并提及了文字和图片的绘制。接下来的文章计划将深入更多图元的绘制，并在Vue框架中整合这些示例。
theme: cyanosis
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 7 天，点击查看活动详情
开篇前言
在掘金认识我的都知道，我主要是研究 Flutter 的。其实我一直希望开发出一套好用的 Flutter 的图表库，但是期间遇到了一些瓶颈。当我偶然知道 echarts 底层是由 ZRender 引擎渲染时，内心是非常激动的。无论是简单的统计图，还是复杂的雷达图、地图、关系图，本质上都是通过 ZRender 引擎渲染绘制的。
ZRender 封装了前端 canvas 的绘制逻辑，通过上层的接口去操作底层的绘制功能。从而屏蔽不同环境的差异性，提供统一的访问方式，并提供更高级的图形元素的绘制功能，方便使用者的调度，这都是封装的特点。
所以我悟了，相比于 图表库 这种复杂上层建筑，在起步阶段时，一个好的引擎作为底层基础是必不可少的。想打造一个像 echarts 这样几乎完美的图表库，在短时间内是不可能凭空实现的。所以准备研究一下 ZRender ，体会一下其中的设计思想、结构思路和逻辑实现，先打造一个符合 Flutter 框架的二维绘图引擎库 render2d。这点对于绘制小能手的我感觉还是有些希望的。
所以本系列文章将作为对前端的 ZRender 引擎研究的探索记录。我对 web 前端的知识并不是非常精通，但对于前端的 Canvas 绘制还是略知一二的，借此可能还会巩固一些小前端的知识。
1. ZRender 和基础图形元素介绍
Flutter 中对于绘制封装了 Canvas、 Paint、Path 、Matrix4 等类型，并且有自身的 Animation 动画机制。 相比而言，Html 的绘制显得更加原始一些，面向过程的味道更浓，这也是封装一个绘制引擎的必要性。 ZRender 的封装感觉要比 Flutter 绘制系统要高一层级，它封装了很多基础设施，让绘制对于使用者而言更加简易。所以有必要学习一下，它山之石可以攻玉。
ZRender 是一个开源项目，地址在 【ecomfe/zrender】，可以将其 clone 到本地，方便查看源码。<
最低0.47元/天 解锁文章
扫一扫
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
