簡單易用，跨平臺，20KB！

公司主營業(yè)務：成都網(wǎng)站建設、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出嘉黎免費做網(wǎng)站回饋大家。

效果

效果預覽：

https://www.bilibili.com/video/BV1cf4y1H7Pa

無論寫代碼還是寫工具，都要明確輸入與輸出。

• 輸入：零碎的字體圖片(通常是數(shù)字)

• 處理：可動態(tài)調(diào)整參數(shù)，預覽實時效果

• 輸出：一張合圖以及字體信息文件 xxx.fnt

為何要重新寫一個輪子呢？

• Glyph Designer(Mac) 與 BMFont (Windows) 功能完善，但是有平臺限制。 個人不習慣其操作

• Cocos Store 中也有許多優(yōu)秀的 BMFont 插件，但是依賴 Cocos Creator ，可能會有對應版本限制。

實現(xiàn)

于是動手寫一個 HTML ，依賴瀏覽器的小工具，目錄設計如下：

• index.html
• renderer.js
• index.css

拖入文件

參考 mozilla 中的文檔，監(jiān)聽 ondrop 事件。

https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

拖入文件后，用一個列表維護文件數(shù)據(jù)，文件格式可以參文檔。

http://www.angelcode.com/products/bmfont/doc/file_format.html

拖入文件代碼

合成大圖

參考 Cocos Store 中的一個插件代碼，將所有圖繪制在一個 Canvas 上。

http://store.cocos.com/app/detail/2604

合成大圖代碼

預覽效果

根據(jù)圖片 xoffset yoffset xadvance 的信息，采用 Canvas 畫布渲染。

預覽效果代碼

導出文件

直接使用 FileSaver.js

https://github.com/eligrey/FileSaver.js

導出文件代碼

體驗

在線體驗地址： https://lamyoung.gitee.io/web/bitmapFont/

代碼打包下載： https://gitee.com/lamyoung/web/raw/master/bitmapFont/source.zip

以上為白玉無冰使用 HTML + JS 實現(xiàn) "位圖字體制作工具" 的過程分享。

分享題目：寫一個在線位圖字體制作工具！BitmapFont!
網(wǎng)頁網(wǎng)址：http://uogjgqi.cn/article/dpjcdpd.html