EasyCanvas繪圖庫在Pixeler項目開發(fā)中使用實戰(zhàn)總結(jié)

涉及的兩個項目

Pixler：一個用于設(shè)計像素圖片（拼豆）的應(yīng)用。

Easycanvas.js： Canvas 繪圖庫

開發(fā)背景

我對拼豆感興趣，在做拼豆前要設(shè)計圖紙，類似畫像素圖。我試用了網(wǎng)上能搜到的幾個拼豆圖紙設(shè)計的應(yīng)用，但是沒有適合我的，我就想著自己開發(fā)一個。

算法原理

拼豆圖紙就類似于像素圖，我剛開始構(gòu)思如何開發(fā)的時候，想著它有點像下棋。所以我參考了五子棋的下棋原理。我在五子棋的算法上優(yōu)化了鼠標點擊時落腳的位置的計算方法，即鼠標點擊時，獲取點擊位置，計算出它處于哪個方格中，在那個方格中畫上一個像素點，用一個二維數(shù)組記錄方格中已繪制的位置。這就完成了初步的拼豆像素圖的算法設(shè)計。

在以往的開發(fā)中，我都要求每一步都精益求精，導(dǎo)致整體進度緩慢，常常停留在初步階段，就把自己繞暈。所以在此次開發(fā)中，嘗試了小步快跑、快速迭代的方法。

第一版：快速開發(fā)

第一版本開發(fā)的時候，我盡量減少對性能、代碼優(yōu)化的思考，在最快的速度完成基本功能，也就是如何繪制像素點和刪除像素圖。

這樣沒有束縛的情況下，只需要集中精力完成功能的算法，很快就實現(xiàn)基本功能。

當(dāng)然，代碼也是很簡單粗暴的，就需要第二版的完善。

第二版：性能和代碼優(yōu)化

首先，把畫布分為兩層，一層是參考線畫布，一層是繪圖畫布。參考線畫布在初始化后就不需要修改，所有操作只需要在繪圖畫布上進行，減少了繪圖時候的工作量。

然后，把通用功能的代碼封裝成公共函數(shù)，減少冗余。

第三版：封裝繪圖庫，并在應(yīng)用中不斷完善

Pixler 主要代碼是 Canvas 繪圖，所以可以把 Canvas 主要繪圖功能封裝一下，單獨成一個繪圖庫，減少主代碼冗余，也方便在其他項目中引用。

在大學(xué)期間，我研究 jQuery 的時候就仿著寫了一個鏈式結(jié)構(gòu)的 JavaScript 框架 Oct.js，加上第一、第二版本對 Canvas 接口的熟悉，所以開發(fā)起來并不困難。但在接口設(shè)計上重復(fù)弄了幾次，這部分的經(jīng)驗我也寫了一篇文章 《EasyCanvas：連續(xù)畫圖的一些總結(jié)》 記錄了一下。

開發(fā) Easycanvas.js，不僅是在 JavaScript 開發(fā)、Canvas 運用上的提升，還是一個開源項目的完整實踐。期間有一個小伙伴加入?yún)⑴c了合作，可惜沒參與太多功能就退出了，但還是一次很好的開源項目的體驗。

在開發(fā)代碼的過程中，還編寫了相關(guān)的文檔。接口不斷優(yōu)化修改，文檔也不斷的調(diào)整，就連文檔格式也做了多次調(diào)整，工作量是不小，但也不厭其煩。

由于時間原因，在開發(fā)完 Easycanvas.js 基礎(chǔ)版本后就去做別的項目。間隔一段時間回來再看，基本沒有有最初開發(fā)時候的熟悉感，這就得靠我之前寫的文檔了。所以，好的文檔是項目的開門鑰匙。

就這樣，我像一個剛接觸這個繪圖庫的用戶一樣，參照文檔，把 Easycanvas.js 重構(gòu)了 Pixler 的繪圖代碼。同時，在應(yīng)用的過程中發(fā)現(xiàn)了 Easycanvas.js 的不足，又反過來進行完善。兩個項目相輔相成。

小結(jié)

相比之前開發(fā)的 Oct.js，只有開發(fā)和單元測試，并沒有大規(guī)模地應(yīng)用到實際項目中（我也嘗試過，但一旦項目做大，就涉及到 jQuery 插件 ，就不得不引入 jQuery，就和 Oct.js 重復(fù)了，就只好把 Oct.js 刪掉）。

所以，這次 Pixler 和 Easycanvas.js 的開發(fā)，從0到1再到100，是一個很好的經(jīng)歷。不僅是編程技能上的提升，還是項目管理上積累了經(jīng)驗。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

React結(jié)合TypeScript和Mobx步驟詳解

avalon前端項目中使用解析

Chart.js輕量級圖表庫使用案例解析

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com