正点原子开拓者Nios II资料连载第十五章uC/GUI显示汉字/图片实验

1）实验平台：正点原子开拓者FPGA 开发板

2）摘自《开拓者 Nios II开发指南》关注官方微信号公众号，获取更多资料：正点原子

3）全套实验源码+手册+视频下载地址：http://www.openedv.com/docs/index.html

第十五章uC/GUI显示汉字/图片实验

打开手机界面，我们会看到有一排排的图标，图标下面有对应的汉字，这是怎么做到的呢？

在上一章里我们成功移植了 uC/GUI 的工程，并实现了基本的打点画线的功能，本章我们用

uC/GUI 显示汉字和图片，实现一个最简单的图标界面。本章包括以下几个部分：

15.1 简介

15.2 实验任务

15.3 硬件设计

15.4 软件设计

15.5 下载验证

简介

在 μC/GUI 的 Font 目录下我们会看到很多以 F 开头的.c 文件，这些都是 μC/GUI 自带的常

用的 C 字体文件，而且所有文件均包含 ASCII 字符集，所以如果用来显示英文字母和一些符

号是没有问题的，但由于μC/GUI没有自带中文字体文件，所以我们需要自己生成需要的字体。

能用于 μC/GUI 的字体必须在 C 文件中定义为 GUI_FONT 结构，该结构或者由这些结构引用

的与之相当的字体数据，可能相当大。手工产生这些字体时耗时巨大且效率很低。因此我们推

荐使用字体转换器，它能够从字体自动产生 C 文件。

字体转换器是一个简单的 Windows 程序。你只需在程序中载入一种 Windows 安装字体，

如果有需要则对其进行编辑，然后将其保存为 C 文件。该 C 文件可以进行编译，你需要的字

体就可以随 μC/GUI 一道在屏幕上显示。默认情况下，字符代码 0x00-0x1F 和 0x80-0x9F 是被

禁用的。下面我们从微软雅黑中导入“正点原子”四个汉字入手介绍如何在 uC/GUI 中使用汉

字。

首先在开发板所随附的资料中“6_软件资料/1_软件/uC/GUI_tool”目录下找到“uC-GUI

FontConvert”软件，需要说明的是这个软件是 emWin V5.20 版本使用的，有很多功能 uC/GUI

3.90 不支持，但我们只需要基本功能就可以了。为什么用这个软件呢？因为 uC/GUI 3.90 版本

自带的字体转换器用起来太麻烦，有些功能还不能很好的支持，而用这个版本会大大方便我们

的使用。

我们双击打开这个软件。在弹出的下图所示的字体生成选项界面中我们选择“Type of font

to generate”为“Standard”，编码（Encoding）方式为“16 Bit UNICODE”，因为该编码支持汉

字，其余保持默认即可。

图 15.1.1 字体生成选项

我们在这里大概说一下“Type of font to generate”的这些选项有什么区别。

Standard：标准比例字体（如：8x8,8x16,16x32 等），每个字符的高度相同，宽度可能不同，

像素信息保存为 1bpp（bit/pixel 即位/像素），包含对应比例的所有像素点（如：8x16 字体上

下空白处也算在一个字符之内）

Antialiased,2bpp：2bpp，带有抗锯齿显示效果，使字体边缘变得圆滑，其它同 Standard

Antialiased,4bpp：4bpp，带有抗锯齿显示效果，其它同 Standard

Extended：与 Standard 不同的是每个字符的宽度和高度可能不一样且不包含上下的空行

Extended,framed：在某些情况下（例如编译时背景颜色未知），可以使用带边框的字体。

带边框的字体始终在透明模式下绘制，与当前设置无关。字符像素按当前所选的前景颜色绘制，

边框按背景颜色绘制。前景颜色和背景颜色之间明显的对比可以确保能够阅读文本，而与背景

无关。需要注意的是，这种类型的字体不适用于复合字符，例如泰语。另外，也不适用于 Arabic

字体。

Extended,antialiased,2bpp：2bpp，带有抗锯齿显示效果，其它同 Extended

Extended,antialiased,4bpp：4bpp，带有抗锯齿显示效果，其它同 Extended

现在我们单击“OK”按钮，弹出下图所示字体选择界面。

图 15.1.2 选择字体

这里字体我们选择“微软雅黑”，字形保持默认“常规”即可，大小输入为 32，Unit of Size

保持默认“Pixels”即可，然后单击“确定”按钮，弹出下图所示界面。

图 15.1.3 加载后的界面

拖动右边的滚动条，可以发现包含的字符非常多，现在我们来寻找要显示的“正点原子”

四个字，该怎么弄呢？

有人说可以搜索，不过很抱歉的是这个软件不支持搜索功能。那全部导出呢？全部导出会

使字库变得非常大，很多用不到的字体会占用很多的存储空间，可能使原本紧缺的存储空间变

得更紧缺。那我们只能一个字一个字的去找嘛？这无异于大海捞针，一两个字也许还可以勉强

接受，字多了，实在很麻烦而且效率低下。那有没有一种简单高效的方法呢？有，而且可以非

常快速的帮助我们选中想要的汉字，不过这种方法在自带的字体转换器中虽然有这个功能，但

实际效果很不好，这就是为什么我们改用这个软件的原因。现在我们开始手把手的来使用这种

方法。

第一步：先屏蔽所有字符。

因为我们不需要微软雅黑所有的字符，只需选择需要的汉字，所以这里我们先屏蔽所有字

符，在“Edit”菜单栏下，选择“Disable all characters”，即可，如下图所示。

图 15.1.4 屏蔽所有字符

第二步：新建文本，输入需要的字符或汉字，并保存为 Unicode 编码

现在，我们打开一个文本软件（电脑自带的记事本或 Notepad++都可以），这里我们用电

脑自带的记事本。打开之后，输入“正点原子”，如下图所示：

图 15.1.5 输入需要的字符或汉字

输入完需要显示的汉字后，选择保存或另存为后，在下图所示界面中，我们先任取一个文

件名，这里我们取名为“显示的汉字”，然后到了最重要的一步，这里的编码我们选择为

“Unicode”，而且必须是 Unicode，然后点击保存。

图 15.1.6 保存为Unicode编码

第三步：加载刚才新建的文本，并另存为 C 格式文件即可

我们点击“Edit”菜单栏下的”Read pattern file...”选项，如下图所示，

图 15.1.7 加载写有显示字符的文本

加载刚才保存的文本，然后单击“File”菜单栏下的“Save As...”，如下图所示

图 15.1.8 另存为

在弹出的下图所示页面中，取一合适的文件名，这里我们取名为“Chinese_WRYH32”，

保存类型为 C-files，

图 15.1.9 另存为C文件

现在我们来看一下，是否正确生成了。打开刚才生成的.C 文件，我们可以看到“正点原子”

四个汉字，这里截取一下生成的“正”字。

图 15.1.10 生成的“正”字

使用这种方式可以快速的生成任何我们想要生成的字符。当然了，网络上有许多 uC/GUI

字体转换器，使用起来也很方便，不过基本上都不是 uC/GUI 官方支持的，转换的效果如何没

试过，有兴趣的可以尝试一下。

现在我们已经生成了需要显示的汉字，接下来我们将正点原子的 logo 图标转换成 uC/GUI

显示的位图。

能用于 μC/GUI 的位图通常定义为“C”的 GUI_BITMAP 结构。该结构或者由这些结构引

用的相当的图片数据，可能相当大。在手工产生这些位图时，耗时巨大且效率很低，特别是在

处理相当大的图片及多级灰度梯度或颜色时。因此，我们推荐使用位图转换器。

位图转换器是一个很容易使用的 Windows 程序。仅仅载入一幅位图（.bmp 格式）到程序

中，如果需要则转换该位图，然后将结果保存为一个“C”文件，供 μC/GUI 使用，这样就能

在屏幕上显示这幅位图了。另外需要注意的是进行色彩转换，会使得最终得到的“C”代码很

大，所以可以适当减少像素深度，这样可以减少内存的消耗。位图转换器中可以执行有限数量

的一些简单函数，包括水平或垂直反转，旋转，转换位图索引或颜色（这些特性都可以在“Image”

菜单下找到）。更进一步的图像处理要使用一个位图处理软件，诸如 Adobe Photoshop 或 Corel

Photopaint。位图转换器仅仅达到转换的目的。

uC/GUI3.90 版本的位图转换器仅支持.bmp 格式文件的位图，其它格式的图像文件需先转

换成.bmp 文件。有关位图转换器更多的信息可参考资料《uC/GUI 中文手册》，这里我们不再

做过多的介绍，接下来我们手把手的来使用位图转换器。

第一步：打开位图转换器

首先在开发板所随附的资料中“6_软件资料/1_软件/uC/GUI_tool”目录下找到“uC-GUI

BitmapConvert”软件并双击打开，打开后的显示界面如下：

图 15.1.11 打开位图转换器

第二步：加载需转换的 bmp 图片

选择“File”菜单栏下的“Open”选项，加载需要转换的 bmp 图片，这里需要注意的是 bmp

图片的像素大小不要超过屏幕显示的大小。我们选择的图片为正点原子的 logo，像素大小为

140×140。加载后见下图。

图 15.1.12 加载转换的bmp图片

第三步（可选）：根据需要选择转换位图模式

选择“Image/Convert Into”，再选择所希望的调色板，一般选择“Best palette”（最佳调

色板），如果只用灰度显示的话，可以选择“Gray256”或其它 Gray。这样做的目的是为了减少

存储空间的消耗，但有时会降低图片显示的质量——减少了色彩空间。这里我们仅做介绍，不

做选择。

图 15.1.13 根据需要选择转换位图模式

第四步：将位图另存为“C”文件

选择“File/Save As”，为这个“C”文件起一个名字，这里取名为 ATK_logo，并选择一个

保存位置，如下图所示

图 15.1.14 位图另存为 “C”文件

单击“保存（s）”按钮后弹出下图所示格式指定界面，我们选项“High color[565]”，如

下图所示

图 15.1.15 格式指定界面

至此，我们已经生成了需要显示的汉字和图标。下面我们用 uC/GUI 显示汉字和图标。

实验任务

本章的实验任务是用 μC/GUI 显示汉字和图标从而制作一个简单的图标界面。

硬件设计

本章的实验工程完全可以基于上一章 uC/GUI 实现打点画线的工程，所以这里我们直接用

上一章的工程。

软件设计

我们将生成的字体 C 文件 Chinese_WRYH32.c 复制到 uCGUI/Font 目录下，并在软件工程

下新建一个 pictures 文件夹，将生成的图标 C 文件放到该文件夹下，如下图所示：

图 15.4.1 添加文件后

然后我们打开 uCGUI/Core 目录下的 GUI.h 文件，添加下面一条语句：

图 15.4.2 添加extern语句

此语句方便我们使用生成的汉字 C 文件，当然了也可以在 main.c 文件中添加，为了方便

字体管理，所以添加到 GUI.h 文件中。另外该语句中 extern 后面的语句是 Chinese_WRYH32.c

文件最后的结构体。这里需要注意的是：使用汉字时，该文件应为 UTF-8 编码。设置 NiosII

IDE Eclipse 工程的文件编码方式为 UTF-8 的设置方法如下：

打开文件后，点击 Edit 菜单栏下的“Set Encoding…”选项，在弹出的设置编码界面中选择

UTF-8，如下图所示

图 15.4.3 设置文件编码

现在我们将上一章的 main.c 文件的代码修改如下：

1 #include <stdio.h>

2 #include "system.h"

3 #include "io.h"

4 #include "alt_types.h"

5 #include "altera_avalon_pio_regs.h"

6 #include "sys/alt_irq.h"

7 #include "unistd.h"

8 #include <string.h>

9 #include "mculcd.h"

10 #include "GUI.h"

11

12 _lcd_gui lcdgui;

13 extern _lcd_dev lcddev; //管理 LCD 重要参数

14 extern GUI_CONST_STORAGE GUI_BITMAP bmATK_logo;

15

16 //SDRAM 显存的地址

17 alt_u16 *ram = (alt_u16 *)(SDRAM_BASE + SDRAM_SPAN - 2049000);

18

19 int main()

20 {

21 printf("Hello from NiosII!\n");

22

23 MY_LCD_Init(); //LCD 初始化

24 GUI_Init(); //uC/GUI 初始化

25

26 lcdgui.width = lcddev.height;

27 lcdgui.height = lcddev.width;

28

29 GUI_SetBkColor(GUI_VERYLIGHTCYAN); //设置 GUI 背景色

30 GUI_SetColor(GUI_DEEPDARK); //设置前景色

31 GUI_Clear(); //GUI 清屏

32

33 GUI_UC_SetEncodeUTF8(); //设置汉字编码格式

34 GUI_DrawBitmap(&bmATK_logo, 0, 0); //显示图片

35 GUI_SetTextMode(GUI_TM_TRANS); //设置文本绘图模式

36 GUI_SetFont(&GUI_FontChinese_WRYH32); //设置用于输出的字体

37 GUI_SetTextAlign(GUI_TA_HCENTER); //设置当前文本对齐模式

38 GUI_DispStringAt("正点原子",70,145); //在指定坐标显示字符串

39

40 alt_dcache_flush_all();

41

42 return 0;

43 }

GUI_DrawBitmap()函数用来显示图片，并且从左上角开始显示，“正点原子”显示在图片

的下方。因为图片的大小为 140×140，汉字显示的位置在图片下方 5 个像素点，所以 y 坐标为

145。这里使用的函数都是 uC/GUI 自带的函数，可以从《uC/GUI 中文手册》中找到详细的用

法，这里我们就不过多介绍

软件部分就介绍到这里，接下来我们进行下载验证。

下载验证

讲完了软件工程，接下来我们就将该实验下载至我们的开拓者开发板进行验证。

首先我们将 4.3 寸的 ATK-4.3’RGBLCD 与开发板上的 RGB LCD 接口连接。再将下载器一端连电脑，另一端与开发板上对应端口连接，最后连接电源线并打开电源开关。

我们在 Quartus II 软件中将 lcd_all_colorbar.sof 文件下载至我们的开拓者开发板，下载完

成后，我们还需要在 Nios II SBT for Eclipse 软件中将 qsys_gui.elf 文件下载至我们的开拓者开

发板，qsys_gui.elf 下载完成以后，我们的 C 程序将会执行在我们的开拓者开发板上。显示的

效果如下图所示。

图 15.5.1 实验结果图

至此，我们使用 uC/GUI 显示汉字和图片制作一个简单的图标界面的实验就完成了。