从3.11日开始换了公司,然后一直在学习英语和加强基础知识,本仓库后续应该会暂停了。期待再见面。 2019年04月15日
我是一个标题党,也不是。
不知道有没有童鞋和我一样,学习了canvas基础用法之后只能画几个图形和文字,对如何实现想要的动画仍然无从下手,看着别人家canvas酷炫的效果只能徒生艳羡。而我接触Echarts后更是想知道其如何做到的。几番搜索只能找到如何实现粒子动画这样的教程,或者介绍一些流行的canvas库和其用法,离实现echarts以及其它canvas库或引擎相去甚远,没有诸如自己实现vue、自己打造react这样的东西。而搜索Echarts源码解析也结果寥寥。我想了想可能有这样几个原因。
- 和
react等解析不同,canvas库解析需要用到较多的数学或图形学知识,有的比较复杂,而对于一个图标库更是如此,文章写起来费时费力看的人也少。 - 对此感兴趣的人可能并不多。
- 我不会搜索。
- 待定。
总之,在这方面,前人提供的经验和教学,我能找到的比较少,只有自己去尝试阅读,并写下这些笔记以便加深理解和回忆,如果能对你有所帮助,就更好了!
但是本文并不是echarts源码解析,而是而是尝试理解并照着echarts的设计过程,自己实现一个简易版的echarts,即自己的可视化库。
- 根据数据输入生成对应的图表,当然只会实现几种,并保留可扩展性。
- 实现
tootip等基础功能。 - 可个性化。
- 有动画。
虽然目标看起来还算简单,也许不用深入echarts源码,自己瞎写也能实现。但是这只是代码要实现的目标,而不是我,或者作为本文读者的你的目标。我的目的是深入理解canvas库的实现原理以及其软件架构,熟悉canvas和涉及到的多方面知识,做到知其然也知其所以然,更能自己随便然。
- 已有
js和canvas基础。 - 懂一点点
ts即可,我也不太会,只是为了方便类型提示,所以很多地方写得并不规范,且个人认为不影响阅读。 - 对
canvas库和细节感兴趣。 - 不浮躁愿意慢慢探究。
- 待定。
能看到这里说明你对本文有一点兴趣,在继续下去之前想先说一下我的情况,避免你看了之后大呼上当。
- 前端码农。
- 非计算机专业,计算机基础不佳,更别提图形学了。
- 18年毕业,工作经验不多,接触的项目也不大,但是类型挺多的。
- 前端相关技能和知识掌握程度还可以,杂七杂八的都知道一些。
- 开源贡献暂无,源码阅读方面只深入了解过
vue。参考这里。 - 写作本文时还没开始看
echarts源码。
以上就是我的基础情况,如果你愿意尝试从一个半吊子笔下发现一些闪光点,欢迎继续。