欢迎交流友情链接：laker.me--攻击攻击源Github：https://github.com/younglakerV来信：lakerHQ（请注明'来自博客')涉及两个项目Pixler：一个用于设计像素图像的应用程序(Pindou)。Easycanvas.js：Canvas绘图库开发背景我对拼豆很感兴趣。在做拼豆之前，我需要设计图纸，类似于绘制像素图。试了几个网上能找到的拼豆绘图设计应用，但没有一个适合我，所以我想自己开发一个。算法原理拼豆图类似于像素图。刚开始构思怎么开发的时候，觉得有点像下棋。所以我参考了五子棋的下棋原理。我在五子棋算法上优化了鼠标点击位置的计算方法，即当鼠标点击时，获取点击位置，计算它在哪个方格中，在那个方格中画一个像素点，用一个二维的array记录网格中绘制的位置。这样就完成了拼豆像素图的初步算法设计。在之前的开发中，每一步都要求更加细化，导致整体进度缓慢，经常停留在初级阶段，一头雾水。因此，在本次开发中，我们尝试了小步快跑、快速迭代的方法。第一版：快速开发第一版开发时，我尽量减少对性能和代码优化的思考，以最快的速度完成基本功能，即如何绘制像素和删除像素图像。这样，不受约束，只需要专心完成功能的算法，基本功能很快就实现了。当然代码也很简单粗暴，需要二版完善。第二版：性能与代码优化首先将画布分为两层，一层是参考线画布，一层是绘图画布。参考线画布初始化后不需要修改，所有操作只需要在绘图画布上进行，减少了绘图时的工作量。然后，将公共函数的代码封装成公共函数，减少冗余。第三版：封装绘图库，在应用中不断完善。Pixler的主要代码是Canvas绘图，所以可以将Canvas的主要绘图功能封装起来，形成一个单独的绘图库，减少主要代码的冗余，方便在其他项目中引用。.大学期间，在学习jQuery的时候，模仿写了一个链式结构的JavaScript框架Oct.js，熟悉一二版的Canvas界面，所以开发起来难度不大。但是我在界面设计上重复了几次，我也写了一篇文章《EasyCanvas：连续画图的一些总结》来记录我这部分的心得。Easycanvas.js的发展不仅仅是对JavaScript开发和Canvas应用的改进，更是对一个开源项目的完整实践。期间有个小伙伴加入并参与了合作，可惜没有参与太多功能就退出了，不过在开源项目中还是不错的体验。在开发代码的过程中，也编写了相关的文档。界面不断优化修改，文档也在不断调整。甚至文档格式也进行了多次调整。工作量不小，但也不累。由于时间原因，我在开发了Easycanvas.js基础版后开始做其他项目。过段时间回来再看，基本没有初期开发的熟悉度，全靠我之前写的文档。因此，良好的文档是项目的关键。就这样，像刚接触这个绘图库的用户一样，我参考了文档，将Easycanvas.js重构成了Pixler的绘图代码。同时，在应用的过程中，发现了Easycanvas.js的不足，并依次进行了改进。这两个项目相辅相成。总结与之前开发的Oct.js相比，只有开发和单元测试，并没有大规模应用到实际项目中（我试过，但是一旦项目做大，涉及到jQuery插件，所以必须要引入jQuery，和Oct.js重复，所以要删掉Oct.js）。所以，这次Pixler和Easycanvas.js的开发，从0到1再到100，是一个非常好的体验。不仅是编程能力的提升，更是项目管理经验的积累。到目前为止，Pixler和Easycanvas.js已经完成了一个比较稳定的版本，但是还有很大的改进空间。我已经在Todolist上一一记录了，我会一一突破的。
