写一个在线位图字体制作工具！BitmapFont!

简单易用，跨平台，20KB！

公司主营业务：成都网站建设、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出嘉黎免费做网站回馈大家。

效果

效果预览：

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

无论写代码还是写工具，都要明确输入与输出。

• 输入：零碎的字体图片(通常是数字)

• 处理：可动态调整参数，预览实时效果

• 输出：一张合图以及字体信息文件 xxx.fnt

为何要重新写一个轮子呢？

• Glyph Designer(Mac) 与 BMFont (Windows) 功能完善，但是有平台限制。 个人不习惯其操作

• Cocos Store 中也有许多优秀的 BMFont 插件，但是依赖 Cocos Creator ，可能会有对应版本限制。

实现

于是动手写一个 HTML ，依赖浏览器的小工具，目录设计如下：

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

拖入文件

参考 mozilla 中的文档，监听 ondrop 事件。

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

拖入文件后，用一个列表维护文件数据，文件格式可以参文档。

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

拖入文件代码

合成大图

参考 Cocos Store 中的一个插件代码，将所有图绘制在一个 Canvas 上。

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

合成大图代码

预览效果

根据图片 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 实现 "位图字体制作工具" 的过程分享。

当前文章：写一个在线位图字体制作工具！BitmapFont!
当前网址：http://www.mswzjz.cn/qtweb/news17/40967.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能