2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析 开篇 环境配置及基本分工

2021SC@SDUSC

目录

一、GitHub代码地址

二、下载代码

三、环境配置

四、运行演示

 五、总结

---

一、GitHub代码地址

quark-renderer: 一款轻量且强大的 Canvas(&SVG) 渲染引擎，从 ZRender 改进而来。

二、下载代码

注册GitHub账号后可免费下载代码压缩包

下载完毕后进行解压 

三、环境配置

首先要确保电脑已经安装了node.js，因为需要用到npm进行安装相关依赖。

测试可以打开cmd并输入node --version，如果结果如图则为已安装（显示版本号）

有了node以后我们就可以给之前下载的文件加载依赖了。 

用cd命令转入解压文件所在的文件夹，使用npm install 命令即可进行安装加载

之后还要进行运行编译，继续输入npm run-script build 即可

 结束如图

接下来就可以运行了

四、运行演示

 我们可以直接运行test文件夹中的文件

这样会默认在你选定的浏览器上运行一些已经编辑好的html文件。

也可以选择用webstorm打开文件

下面是一些典型文件的运行效果

 

 

 

 

 五、总结

       Quark Renderer 不是从零开始构建的，它是由开发者从 ZRender 魔改而来，ZRender 是 ECharts 底层的渲染引擎。由此而来的 Quark-Renderer是一款轻量且强大的Canvas渲染引擎它支持多种环境，对于微信小程序开发、node、浏览器环境等都有不错的支持。

       Quark Renderer 强大的补间算法不仅仅可以对位置、尺寸进行补间，对颜色、字符串也可以进行补间，这是同类技术中比较特殊的。Quark Renderer 的接口简单而统一，所有图元的配置项都是完全一致的。只要熟悉其中一个，就熟悉了所有，学习成本非常低，极易上手，对开发者友好。作为开篇，今后主要研究Quark-Renderer。

       从整体的结构来看，它分成这么几个子系统，首先是动画系统、渲染、事件、基本形状接口、Canvas渲染器，SVG渲染器。可以分为动画系统，渲染系统，事件系统以及最后的多引擎切换机制（Canvas/SVG），这些将在接下来的文章中进行具体的分析和展示。