資訊專欄INFORMATION COLUMN
摘要：所以在此次開發(fā)中，嘗試了小步快跑快速迭代的方法。開發(fā)，不僅是在開發(fā)運用上的提升，還是一個開源項目的完整實踐。由于時間原因，在開發(fā)完基礎(chǔ)版本后就去做別的項目。所以，好的文檔是項目的開門鑰匙。兩個項目相輔相成。
歡迎交換友鏈： laker.me--進擊的程序媛涉及的兩個項目
Github：https://github.com/younglaker
V信: lakerHQ （請注明‘來自博客’）
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)基本功能。
當然，代碼也是很簡單粗暴的，就需要第二版的完善。
第二版：性能和代碼優(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)驗。
至此 Pixler 和 Easycanvas.js 完成了一個較為穩(wěn)定的版本，但還有很大的提升空間，我都一一記錄在 Todolist 上了，等我一一突破。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95202.html
摘要：在彈一彈游戲中，小球不能向上發(fā)射。這里又有一個坑彈一彈游戲中，剛射擊出去的小球是不受重力影響的不然瞄準還有什么意義。 前言 半年前用js和canvas仿了熱血傳奇網(wǎng)游（地址），基本功能寫完之后，剩下的都是堆數(shù)據(jù)、堆時間才能完成的任務(wù)了，沒什么新鮮感，因此進度極慢。這次看到微信《彈一彈》比較火，因為涉及到物理引擎（為了真實），于是動手試了一下。一共用了10個小時，不僅完成了這個demo，...
摘要：游戲開發(fā)實戰(zhàn)主要講解使用來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。HTML5 Canvas游戲開發(fā)實戰(zhàn)主要講解使用HTML5 Canvas來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在本書...
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
閱讀 1717·2021-11-16 11:44
閱讀 7689·2021-09-22 15:00
閱讀 4702·2021-09-02 10:20
閱讀 2070·2021-08-27 16:20
閱讀 2459·2019-08-26 14:00
閱讀 2964·2019-08-26 11:44
閱讀 1732·2019-08-23 18:33
閱讀 1971·2019-08-22 17:28
