自開發的EasyCanvas繪圖庫實踐、Pixeler項目開發小結

歡迎交換友鏈： laker.me--進擊的程序媛
Github： https://github.com/younglaker
V信: lakerHQ （請註明‘來自博客’）

涉及的兩個項目

Pixler：一個用於設計像素圖片（拼豆）的應用。

Easycanvas.js： Canvas 繪圖庫

開發背景

我對拼豆感興趣，在作拼豆前要設計圖紙，相似畫像素圖。我試用了網上能搜到的幾個拼豆圖紙設計的應用，可是沒有適合個人，我就想着本身開發一個。

算法原理

拼豆圖紙就相似於像素圖，我剛開始構思如何開發的時候，想着它有點像下棋。因此我參考了五子棋的下棋原理。我在五子棋的算法上優化了鼠標點擊時落腳的位置的計算方法，即鼠標點擊時，獲取點擊位置，計算出它處於哪一個方格中，在那個方格中畫上一個像素點，用一個二維數組記錄方格中已繪製的位置。這就完成了初步的拼豆像素圖的算法設計。

在以往的開發中，我都要求每一步都精益求精，致使總體進度緩慢，經常停留在初步階段，就把本身繞暈。因此在這次開發中，嘗試了小步快跑、快速迭代的方法。

初版：快速開發

初版本開發的時候，我儘可能減小對性能、代碼優化的思考，在最快的速度完成基本功能，也就是如何繪製像素點和刪除像素圖。

這樣沒有束縛的狀況下，只須要集中精力完成功能的算法，很快就實現基本功能。

固然，代碼也是很簡單粗暴的，就須要第二版的完善。

第二版：性能和代碼優化

首先，把畫布分爲兩層，一層是參考線畫布，一層是繪圖畫布。參考線畫布在初始化後就不須要修改，全部操做只須要在繪圖畫布上進行，減小了繪圖時候的工做量。

而後，把通用功能的代碼封裝成公共函數，減小冗餘。

第三版：封裝繪圖庫，並在應用中不斷完善

Pixler 主要代碼是 Canvas 繪圖，因此能夠把 Canvas 主要繪圖功能封裝一下，單獨成一個繪圖庫，減小主代碼冗餘，也方便在其餘項目中引用。

在大學期間，我研究 jQuery 的時候就仿着寫了一個鏈式結構的 JavaScript 框架 Oct.js，加上第1、第二版本對 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 上了，等我一一突破。