建站
咨詢
售后
建站咨詢
新聞中心
簡(jiǎn)單易用，跨平臺(tái)，20KB！
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出嘉黎免費(fèi)做網(wǎng)站回饋大家。
效果
效果預(yù)覽：
https://www.bilibili.com/video/BV1cf4y1H7Pa
無論寫代碼還是寫工具，都要明確輸入與輸出。
-
輸入：零碎的字體圖片(通常是數(shù)字)
-
處理：可動(dòng)態(tài)調(diào)整參數(shù)，預(yù)覽實(shí)時(shí)效果
- 輸出：一張合圖以及字體信息文件
xxx.fnt
為何要重新寫一個(gè)輪子呢？
-
Glyph Designer(Mac) 與 BMFont (Windows) 功能完善，但是有平臺(tái)限制。 個(gè)人不習(xí)慣其操作
Cocos Store中也有許多優(yōu)秀的 BMFont 插件，但是依賴Cocos Creator，可能會(huì)有對(duì)應(yīng)版本限制。
實(shí)現(xiàn)
于是動(dòng)手寫一個(gè) HTML ，依賴瀏覽器的小工具，目錄設(shè)計(jì)如下：
index.htmlrenderer.jsindex.css
拖入文件
參考 mozilla 中的文檔，監(jiān)聽 ondrop 事件。
https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
拖入文件后，用一個(gè)列表維護(hù)文件數(shù)據(jù)，文件格式可以參文檔。
http://www.angelcode.com/products/bmfont/doc/file_format.html
拖入文件代碼
合成大圖
參考 Cocos Store 中的一個(gè)插件代碼，將所有圖繪制在一個(gè) Canvas 上。
http://store.cocos.com/app/detail/2604
合成大圖代碼
預(yù)覽效果
根據(jù)圖片 xoffset yoffset xadvance 的信息，采用 Canvas 畫布渲染。
預(yù)覽效果代碼
導(dǎo)出文件
直接使用 FileSaver.js
https://github.com/eligrey/FileSaver.js
導(dǎo)出文件代碼
體驗(yàn)
在線體驗(yàn)地址： https://lamyoung.gitee.io/web/bitmapFont/
代碼打包下載： https://gitee.com/lamyoung/web/raw/master/bitmapFont/source.zip
以上為白玉無冰使用 HTML + JS 實(shí)現(xiàn) "位圖字體制作工具" 的過程分享。
新聞名稱：寫一個(gè)在線位圖字體制作工具！BitmapFont!
當(dāng)前地址：http://www.dlmjj.cn/article/dpjcdpd.html
