【STemWin教程】第20章 XBF外置字体方法（官方推荐）

席萌0209

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第20章 XBF外置字体方法（官方推荐）

    官方给的这种外置字体方法非常好，而且还可以支持抗锯齿，显示效果非常好，本期教程就是教会大家这种方式。用FontCvt生成的XBF格式字体文件可以在外部存储器，本期教程就以SD卡为例跟大家讲解。
    20. 1  XBF格式字体生成方法
    20. 2 移植到开发板上显示
    20. 3 总结
20.1 XBF格式字体生成方法
    这里我们使用FontCvt生成一种微软雅黑字体，字体选择36号并选带扩展的4位抗锯齿效果。

20.1.1 第一步：选择带扩展的4位抗锯齿

20.1.2 第二步：选择字体类型和大小

20.1.3 第三步：另存为XBF格式文件

此过程字体生成的时间有点长，大家要耐心等待，生成后文件大小：



20.2 移植到开发板上显示
    移植到开发上的程序主要分为两部分，一个是从SD卡中读取字体的驱动，另一个建立一个对话框显示字体。

20.2.1 创建XBF字体

1. GUI_XBF_DATA XBF_Data;
2. GUI_FONT     XBF_Font;
3. FIL          Fontfile;
5. /*
6. *********************************************************************************************************
7. *
8. *       _cbGetData
9. *
10. * Function description
11. *   Callback function for getting font data
12. *
13. * Parameters:
14. *   Off      - Position of XBF file to be read
15. *   NumBytes - Number of requested bytes
16. *   pVoid    - Application defined pointer
17. *   pBuffer  - Pointer to buffer to be filled by the function
18. *
19. * Return value:
20. *   0 on success, 1 on error
21. *********************************************************************************************************
22. */
23. static int _cbGetData(U32 Off, U16 NumBytes, void * pVoid, void * pBuffer) （1）
24. {
25. FIL *FontFile;
27. /* The pVoid pointer may be used to get a file handle */
28. FontFile = (FIL *)pVoid;
30. /*
31. * Set file pointer to the required position
32. */
33. result =f_lseek(FontFile, Off);
34. if (result != FR_OK)
35. {
36. return 1; /* Error */
37. }
39. /*
40. * Read data into buffer
41. */
42. result = f_read(FontFile, pBuffer, NumBytes, &bw);
43. if (result != FR_OK)
44. {
45. return 1; /* Error */
46. }
47. return 0;
49. }
51. /*
52. *********************************************************************************************************
53. *    函 数 名: _ShowXBF
54. *    功能说明: 使用XBF字体
55. *    形    参：无
56. *    返 回 值: 无
57. *********************************************************************************************************
58. */
59. static void _ShowXBF(void)
60. {
61. result = f_open(&Fontfile, "YaHe.xbf", FA_OPEN_EXISTING | FA_READ | FA_OPEN_ALWAYS);（2）
62. if (result != FR_OK)
63. {
64. return;
66. }
68. //
69. // Create XBF font
70. //
71. GUI_XBF_CreateFont(&XBF_Font,       // Pointer to GUI_FONT structure in RAM（3）
72. &XBF_Data,         // Pointer to GUI_XBF_DATA structure in RAM
73. GUI_XBF_TYPE_PROP_AA4_EXT, // Font type to be created
74. _cbGetData,        // Pointer to callback function
75. &Fontfile);        // Pointer to be passed to GetData function
76. }

复制代码

1. 从SD卡中读取字体文件的方法。
2. 由于没有开启FatFS的长文件名，文件的名字要符合8.3格式。
3. 创建XBF_Font字体。默认情况下，每个字符的数据字节最大值限制为200。这应该满足大部分要求。如果加载使用更多字节的字符，在调试版本中将生成警告。通过向文件GUIConf.h添加以下定义可增加默认值：
    #define GUI_MAX_XBF_BYTES 500 // Sets the maximum number of bytes/chars to 500
    默认的定义在文件GUI_ConfDefaults.h文件里面：
    #ifndef   GUI_MAX_XBF_BYTES
     #define GUI_MAX_XBF_BYTES 200
    #endif

20.2.2 主函数

1. /*
2. *********************************************************************************************************
3. *    对话框信息
4. *********************************************************************************************************
5. */
6. static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
7.     { FRAMEWIN_CreateIndirect,  "armfly",            0,                       0,  0,  800,480,FRAMEWIN_CF_MOVEABLE,0},
8.     { BUTTON_CreateIndirect,    "安富莱电子",        GUI_ID_BUTTON0,          390,40,360,100,0,0},
9.     { TEXT_CreateIndirect,      "安富莱电子",        GUI_ID_TEXT0,            5, 10, 300, 70, 0,0},
10.     { TEXT_CreateIndirect,      "安富莱电子",        GUI_ID_TEXT1,            5, 80,300, 70, 0,0},
11.     { TEXT_CreateIndirect,      "安富莱电子",        GUI_ID_TEXT2,            5, 160,300, 70, 0,0}
12. };
14. /*
15. *********************************************************************************************************
16. *    函 数 名: PaintDialog
17. *    功能说明: 重绘函数
18. *    形    参：pMsg 消息指针
19. *    返 回 值: 无
20. *********************************************************************************************************
21. */
22. void PaintDialog(WM_MESSAGE * pMsg)
23. {
24.     WM_HWIN hWin = pMsg->hWin;
25. }
27. /*
28. *********************************************************************************************************
29. *    函 数 名: InitDialog
30. *    功能说明: 对话框初始化
31. *    形    参：pMsg 消息指针
32. *    返 回 值: 无
33. *********************************************************************************************************
34. */
35. void InitDialog(WM_MESSAGE * pMsg)
36. {
37.     WM_HWIN hWin = pMsg->hWin;
38.     //
39.     //FRAMEWIN
40.     //
41.     FRAMEWIN_SetFont(hWin,&GUI_Font32B_ASCII);
42.     FRAMEWIN_SetTextAlign(hWin,GUI_TA_VCENTER|GUI_TA_CENTER);
43.     FRAMEWIN_AddCloseButton(hWin, FRAMEWIN_BUTTON_RIGHT, 0);
44.     FRAMEWIN_AddMaxButton(hWin, FRAMEWIN_BUTTON_RIGHT, 1);
45.     FRAMEWIN_AddMinButton(hWin, FRAMEWIN_BUTTON_RIGHT, 2);
46.     FRAMEWIN_SetTitleHeight(hWin,35);
47.     //
48.     //GUI_ID_BUTTON0
49.     //
50. _ShowXBF();（1）
51. GUI_UC_SetEncodeUTF8();（2）
52.     BUTTON_SetFont(WM_GetDialogItem(hWin,GUI_ID_BUTTON0),&XBF_Font);（3）
53.     //
54.     //GUI_ID_TEXT0
55.     //
56. TEXT_SetTextColor(WM_GetDialogItem(hWin,GUI_ID_TEXT0), GUI_RED);
57.     TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT0),&XBF_Font);
58. TEXT_SetTextColor(WM_GetDialogItem(hWin,GUI_ID_TEXT1), GUI_GREEN);
59. TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT1),&XBF_Font);
60. TEXT_SetTextColor(WM_GetDialogItem(hWin,GUI_ID_TEXT2), GUI_BLUE);
61. TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT2),&XBF_Font);
62. //     GUI_UC_SetEncodeNone();
63. }
65. /*
66. *********************************************************************************************************
67. *    函 数 名: _cbCallback
68. *    功能说明: 对话框回调函数
69. *    形    参：无
70. *    返 回 值: 无
71. *********************************************************************************************************
72. */
73. static void _cbCallback(WM_MESSAGE * pMsg)
74. {
75.     int NCode, Id;
76.     WM_HWIN hWin = pMsg->hWin;
77.     switch (pMsg->MsgId)
78.     {
79.         case WM_PAINT:
80.             PaintDialog(pMsg);
81.             break;
82.         case WM_INIT_DIALOG:
83.             InitDialog(pMsg);
84.             break;
85.         case WM_KEY:
86.             switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key)
87.             {
88.                 case GUI_KEY_ESCAPE:
89.                     GUI_EndDialog(hWin, 1);
90.                     break;
91.                 case GUI_KEY_ENTER:
92.                     GUI_EndDialog(hWin, 0);
93.                     break;
94.             }
95.             break;
96.         case WM_NOTIFY_PARENT:
97.             Id = WM_GetId(pMsg->hWinSrc);
98.             NCode = pMsg->Data.v;        
99.             switch (Id)
100.             {
101.                 case GUI_ID_OK:
102.                     if(NCode==WM_NOTIFICATION_RELEASED)
103.                         GUI_EndDialog(hWin, 0);
104.                     break;
105.                 case GUI_ID_CANCEL:
106.                     if(NCode==WM_NOTIFICATION_RELEASED)
107.                         GUI_EndDialog(hWin, 0);
108.                     break;
110.             }
111.             break;
112.         default:
113.             WM_DefaultProc(pMsg);
114.     }
115. }
118. /*
119. *********************************************************************************************************
120. *    函 数 名: MainTask
121. *    功能说明: GUI主函数
122. *    形    参：无
123. *    返 回 值: 无
124. *********************************************************************************************************
125. */
126. void MainTask(void)
127. {
128.     GUI_Init();
129.     WM_SetDesktopColor(GUI_WHITE);       /* Automacally update desktop window */
130.     WM_SetCreateFlags(WM_CF_MEMDEV);     /* Use memory devices on all windows to avoid flicker */
131. PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
132. FRAMEWIN_SetDefaultSkin(FRAMEWIN_SKIN_FLEX);
133. PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
134. BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);
135. CHECKBOX_SetDefaultSkin(CHECKBOX_SKIN_FLEX);
136. DROPDOWN_SetDefaultSkin(DROPDOWN_SKIN_FLEX);
137. SCROLLBAR_SetDefaultSkin(SCROLLBAR_SKIN_FLEX);
138. SLIDER_SetDefaultSkin(SLIDER_SKIN_FLEX);
139. HEADER_SetDefaultSkin(HEADER_SKIN_FLEX);
140. RADIO_SetDefaultSkin(RADIO_SKIN_FLEX);
141.     GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);
142. while(1)
143. {
144. GUI_Delay(10);
145. }
146. }

复制代码

1. 创建XBF字体。
2. 使能UTF-8解码
3. 在按钮中显示的字体使用XBF字体。
4. 还有最重要的一条，上面的这些函数都是在MainTask.c文件里面的，这个文件的编码格式必须得是UTF-8，设置方法在前面18.1.6小节有说明。
实际显示效果如下：

    特别注意，如果使用的是800*480分辨率的屏可以完成显示出来，如果是小于这个分辨率的屏只能显示出一部分，大家可以按照上面的设计方法做一个适合自己屏大小的显示或者直接拖动这个对话框即可。

20.3 总结
    推荐大家在以后的工程中采用这种方式，这种显示方式有个问题就是显示速度有点慢。比如本期教程显示微软雅黑36号字体，4位抗锯齿。显示就有缓慢，显示小字体不带抗锯齿还是没问题的。

true_casey

这种方式占用FLASH 太大了，推荐  csv 的方式

eric2013

true_casey:这种方式占用FLASH 太大了，推荐  csv 的方式 (2015-01-29 10:15) 

这个是外置的，不占用内部flash。

true_casey

外置的FLASH 也有有容量限制的， 我们设备外部FLASH 最大2M，多个语言几乎吃不消

true_casey

对了，我用的最新的526，要是能提供一个 用户级的写字符像素点函数就好了，那样，所有的字都是标准的单色图片，然后我们稍微做一点操作就可以了，这样的好处是，所有的字串，都是单色图片，这样省掉大半的FLASH
我记得看到别人帖子说 516之前是可以的，不知道526 有没有

caicaptain2

true_casey:对了，我用的最新的526，要是能提供一个 用户级的写字符像素点函数就好了，那样，所有的字都是标准的单色图片，然后我们稍微做一点操作就可以了，这样的好处是，所有的字串，都是单色图片，这样省掉大半的FLASH
我记得看到别人帖子说 516之前是可以的，不知道526 有没有 (2015-02-02 16:55) 

或许直接调用： _SetPixelIndex（）

eric2013

true_casey:对了，我用的最新的526，要是能提供一个 用户级的写字符像素点函数就好了，那样，所有的字都是标准的单色图片，然后我们稍微做一点操作就可以了，这样的好处是，所有的字串，都是单色图片，这样省掉大半的FLASH
我记得看到别人帖子说 516之前是可以的，不知道526 有没有 (2015-02-02 16:55) 

使用但图片不方便，还是XBF或者SIF字体方便，很好用。

chenyongand

我按照这个教程做了，可是显示出来的都是乱码，UTF8我开不开都不行，

eric2013

chenyongand:我按照这个教程做了，可是显示出来的都是乱码，UTF8我开不开都不行，

 (2015-07-31 16:23) 

记得设置你贴出来的函数所在C文件设置为UTF-8格式。

zhangjie

我直接移植了第20期的例程，但是改为了不带UCOS的，SD读写各方面都正常，就是在初始化对话框的时候调用到定义的GUI字体是会进入
硬件中断错误，
GUI_UC_SetEncodeUTF8();
    BUTTON_SetFont(WM_GetDialogItem(hWin,GUI_ID_BUTTON0),&XBF_Font);
   
    //
    //GUI_ID_TEXT0
    //
    TEXT_SetTextColor(WM_GetDialogItem(hWin,GUI_ID_TEXT0), GUI_RED);
//TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT0),&XBF_Font);
    TEXT_SetTextColor(WM_GetDialogItem(hWin,GUI_ID_TEXT1), GUI_GREEN);
    //TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT1),&XBF_Font);
    TEXT_SetTextColor(WM_GetDialogItem(hWin,GUI_ID_TEXT2), GUI_BLUE);
    //TEXT_SetFont(WM_GetDialogItem(hWin,GUI_ID_TEXT2),&XBF_Font);
注释掉就不会运行就不会有错误，
这是什么原因啊？

zhangjie

刚刚出现错误的原因是YaHe.xbf文件里面是空的，现在遇到一个新问题，
字体没有显示出来对话框建立和按键可以显示

eric2013

zhangjie:刚刚出现错误的原因是YaHe.xbf文件里面是空的，现在遇到一个新问题，
字体没有显示出来对话框建立和按键可以显示 (2016-06-28 16:35) 

估计是你的UTF-8编码没有设置。