首页 > 技术文章 > 使用PS分割数码管字体图片

yanye0xff 2020-11-24 23:15 原文

在嵌入式UI开发中,有些场合需要进行一些数字的显示,这里可以使用点阵字库(bitmap font)或者贴图的方式来实现;这里介绍使用图片的方式,该方法的好处是在有文件系统的环境中,后期修改显示的字体样式直接替换对应文件名的图片就行了,代码不需要修改,有点像Web前端的方式,非常省事。

但这样做的前提是实现了bmp/png/jpg图片的解码显示,这里推荐bmp或jpg格式简单易实现,如果需要透明通道只能也把png实现了。
文件的存储可以是固定地址,如果需要后期任意修改/替换图片,最好再实现/移植个文件系统

例如需要显示0 ~ 9范围的数码管字体,就需要0 ~ 9对应数字的10张图片。

先到网上下载各类数字字体,ttf格式

安装到windows系统中,即可使用

在系统自带的绘图板(mspaint)中使用合适之前安装的数码管字体,选择合适的大小绘制文本;为了方便剪切,可以绘制个矩形框,字体库与矩形框左上(top,left)对齐

调整合适的大小得到一张合并图,最后的一个字体我这里选中了,只是方便演示。

接下来就轮到PS上场了,打开PS,载入先前保存的图片,左侧的工具栏中选择“切片选择工具”,再点一下图片

顶部选项栏的“提升”变成可用状态了,点击一下

点击“提升”之后,图片带上了一个蓝色边框

再次点击一下图片任意位置,“划分”变成可用状态

点击一下“划分”,出现分割图片对话框,可以选择垂直/水平划分,可以固定切片数量,也可以固定像素方式划分,这里垂直划分10个切片即可,设置完成点击“确定”

接下来保存了,选择左上角“文件”->“存储为web所用格式”

可以选择为jpg,质量100%,最后通过“存储”按钮选择一个合适的路径保存

在该文件夹下,出现了一个“images”文件夹,里面就是分割好的图片了

推荐阅读