第27章 抗锯齿实例讲解

    本期教程主要是通过三个官方的抗锯齿实例跟大家讲解下抗锯齿的使用。

    27. 1  例子一：AA_HiResAntialiasing

    27. 2 例子二：AA_HiResPixels

    27. 3 例子三：AA_Lines

    27. 4 总结

    这个例子主要是演示了两个动态的指针，一个具有抗锯齿效果，另一个没有抗锯齿效果。例子所在的位置如下：

    例子实际显示效果如下：

下面跟大家分析下这个程序的源码：

1. #include "GUI.h"
   
2. 
   
3. /*******************************************************************
   
4. *
   
5. *       Defines
   
6. *
   
7. ********************************************************************
   
8. */
   
9. #define countof(Obj) (sizeof(Obj)/sizeof(Obj[0]))（1）
   
10. 
    
11. /*******************************************************************
    
12. *
    
13. *       static variables
    
14. *
    
15. ********************************************************************
    
16. */
    
17. 
    
18. static const GUI_POINT _aPointer[] = {（2）
    
19.   { 0,  3},
    
20.   {85,  1},
    
21.   {90,  0},
    
22.   {85, -1},
    
23.   { 0, -3}
    
24. };
    
25. 
    
26. static GUI_POINT _aPointerHiRes[countof(_aPointer)];
    
27. 
    
28. typedef struct {
    
29.   GUI_AUTODEV_INFO AutoInfo;
    
30.   GUI_POINT aPoints[countof(_aPointer)];
    
31.   int Factor;
    
32. } PARAM;
    
33. 
    
34. /*******************************************************************
    
35. *
    
36. *       Static functions
    
37. *
    
38. ********************************************************************
    
39. */
    
40. /*******************************************************************
    
41. *
    
42. *       _DrawHiRes
    
43. *
    
44. * Function description
    
45. *   This function draws the high resolution pointer
    
46. */
    
47. static void _DrawHiRes(void * p) {
    
48.   PARAM * pParam = (PARAM *)p;
    
49.   if (pParam->AutoInfo.DrawFixed) {
    
50.     GUI_ClearRect(60, 60, 159, 159);
    
51.   }
    
52.   GUI_AA_FillPolygon(pParam->aPoints,       （3）
    
53.                      countof(_aPointer),
    
54.                      65  * pParam->Factor,
    
55.                      155 * pParam->Factor);
    
56. }
    
57. 
    
58. /*******************************************************************
    
59. *
    
60. *       _Draw
    
61. *
    
62. * Function description
    
63. *   This function draws the non high resolution pointer
    
64. */
    
65. static void _Draw(void * p) {
    
66.   PARAM * pParam = (PARAM *)p;
    
67.   if (pParam->AutoInfo.DrawFixed) {
    
68.     GUI_ClearRect(160, 60, 259, 159);
    
69.   }
    
70.   GUI_AA_FillPolygon(pParam->aPoints, countof(_aPointer), 165, 155); （4）
    
71. }
    
72. 
    
73. /*******************************************************************
    
74. *
    
75. *       _ShowHiresAntialiasing
    
76. *
    
77. * Function description
    
78. *   This function creates the memory auto devices and handle the
    
79. *   rotation of the pointers
    
80. */
    
81. static void _ShowHiresAntialiasing(void) {
    
82.   GUI_AUTODEV aAuto[2];
    
83.   PARAM       Param;
    
84.   unsigned         i;
    
85. 
    
86.   Param.Factor = 3;
    
87.   GUI_SetBkColor(GUI_BLACK);
    
88.   GUI_Clear();
    
89.   GUI_SetColor(GUI_WHITE);
    
90.   GUI_SetTextAlign(GUI_TA_HCENTER);
    
91.   GUI_SetFont(&GUI_Font24_ASCII);
    
92.   GUI_DispStringAt("AA_HiResAntialiasing - Sample", 160, 5);
    
93.   GUI_SetFont(&GUI_Font6x8);
    
94.   GUI_DispStringHCenterAt("Using\nhigh\nresolution\nmode", 110, 180);
    
95.   GUI_DispStringHCenterAt("Not using\nhigh\nresolution\nmode", 210, 180);
    
96.   //
    
97.   // Create GUI_AUTODEV objects
    
98.   //
    
99.   for (i = 0; i < countof(aAuto); i++) {（5）
    
100.     GUI_MEMDEV_CreateAuto(&aAuto[i]);
     
101.   }
     
102.   //
     
103.   // Calculate pointer for high resolution
     
104.   //
     
105.   for (i = 0; i < countof(_aPointer); i++) {
     
106.     _aPointerHiRes[i].x = _aPointer[i].x * Param.Factor;
     
107.     _aPointerHiRes[i].y = _aPointer[i].y * Param.Factor;
     
108.   }
     
109.   GUI_AA_SetFactor(Param.Factor); /* Set antialiasing factor */（6）
     
110.   while (1) {
     
111.     for (i = 0; i < 1800; i++) {
     
112.       float Angle = (i >= 900) ? 1800 - i : i;
     
113.       Angle *= 3.1415926f / 1800;
     
114.       //
     
115.       // Draw pointer with high resolution（7）
     
116.       //
     
117.       GUI_AA_EnableHiRes();
     
118.       GUI_RotatePolygon(Param.aPoints, _aPointerHiRes, countof(_aPointer), Angle);
     
119.       GUI_MEMDEV_DrawAuto(&aAuto[0], &Param.AutoInfo, _DrawHiRes, &Param);
     
120.       //
     
121.       // Draw pointer without high resolution（8）
     
122.       //
     
123.       GUI_AA_DisableHiRes();
     
124.       GUI_RotatePolygon(Param.aPoints, _aPointer, countof(_aPointer), Angle);
     
125.       GUI_MEMDEV_DrawAuto(&aAuto[1], &Param.AutoInfo, _Draw, &Param);
     
126.       GUI_Delay(2);
     
127.     }
     
128.   }
     
129. }
     
130. 
     
131. /*********************************************************************
     
132. *
     
133. *       Public code
     
134. *
     
135. **********************************************************************
     
136. */
     
137. /*********************************************************************
     
138. *
     
139. *       MainTask
     
140. */
     
141. void MainTask(void) {
     
142.   GUI_Init();
     
143.   _ShowHiresAntialiasing();
     
144. }

1. 通过这种方式可以获得数组中元素的个数。

2. 指针的坐标点，注意这些坐标点的值是相对于函数中指定的X,Y来说说的。这些数组中的值是相对值。

3. 这个函数在26.2.6小节有讲解。

4. 同上，只是这里没有使用高分辨率。

5. 创建一个内存设备，这个函数会在后面教程中再跟大家详细讲解。

6. 设置抗锯齿因子。

7. 绘制指针，带抗锯齿效果。

8. 绘制指针，不带抗锯齿效果。

27.2  例子二：AA_HiResPixels

   这个例子主要也是演示一下高分辨率，例子所在位置：

   例子实际显示效果如下：

下面跟大家分析下这个程序的源码：

1. #include "GUI.h"
   
2. #include "WM.h"
   
3. 
   
4. /*******************************************************************
   
5. *
   
6. *       Defines
   
7. *
   
8. ********************************************************************
   
9. */
   
10. #define AA_FACTOR    4
    
11. #define POLY_SIZE   19
    
12. #define POLY_POINTS  3
    
13. 
    
14. #define COORD_0(Plus, AA_Factor) (I16)(((I32)((Plus ? POLY_SIZE : -POLY_SIZE) * AA_Factor * 0.7071f * 10000)) / 10000)
    
15. #define COORD_1(Plus, AA_Factor) (I16)(((I32)((Plus ? POLY_SIZE : -POLY_SIZE) * AA_Factor * 1.2247f * 10000)) / 10000)
    
16. #define COORD_2(Plus, AA_Factor) (I16)(((I32)((Plus ? POLY_SIZE : -POLY_SIZE) * AA_Factor * 1.4142f * 10000)) / 10000)
    
17. 
    
18. /*******************************************************************
    
19. *
    
20. *       Static variables
    
21. *
    
22. ********************************************************************
    
23. */
    
24. static int _pos_x1         = 30;
    
25. static int _pos_y1         = 30;
    
26. static int _pos_x2         = 125;
    
27. static int _pos_y2         = 30;
    
28. static int _pos_x3         = 220 * AA_FACTOR;
    
29. static int _pos_y3         = 30  * AA_FACTOR;
    
30. static int _color_d        = -1;
    
31. static GUI_COLOR _color_a  = 0xFF00FE;
    
32. static GUI_COLOR _color_b  = 0x00FEFF;
    
33. static GUI_COLOR _color_c  = 0xFEFFFE;
    
34. 
    
35. static const GUI_POINT _aPolygon_src[] = { （1）
    
36.   {             0, COORD_2(0, 1) },
    
37.   { COORD_1(1, 1), COORD_0(1, 1) },
    
38.   { COORD_1(0, 1), COORD_0(1, 1) }
    
39. };
    
40. 
    
41. static const GUI_POINT _aPolygonHiRes_src[] = { （2）
    
42.   {                     0, COORD_2(0, AA_FACTOR) },
    
43.   { COORD_1(1, AA_FACTOR), COORD_0(1, AA_FACTOR) },
    
44.   { COORD_1(0, AA_FACTOR), COORD_0(1, AA_FACTOR) }
    
45. };
    
46. 
    
47. static GUI_POINT _aPolygon[POLY_POINTS];
    
48. static GUI_POINT _aPolygonHiRes[POLY_POINTS];
    
49. 
    
50. /*******************************************************************
    
51. *
    
52. *       Static code
    
53. *
    
54. ********************************************************************
    
55. */
    
56. /*******************************************************************
    
57. *
    
58. *       _cbWindow
    
59. *
    
60. * Function description
    
61. *   This is the callback for the window. A callback was used
    
62. *   for memory devices.
    
63. */
    
64. static void _cbWindow(WM_MESSAGE * pMsg) {（3）
    
65.   switch (pMsg->MsgId) {
    
66.   case WM_PAINT:
    
67.     GUI_SetBkColor(_color_a); （4）
    
68.     GUI_ClearRect( 0, 0, 250, 14);
    
69.     GUI_SetBkColor(_color_b);
    
70.     GUI_ClearRect( 0, 15, 250, 29);
    
71.     GUI_SetBkColor(GUI_BLACK);
    
72.     GUI_ClearRect( 0, 30, 250, 60);
    
73.     GUI_SetColor(_color_c);
    
74.     GUI_FillPolygon(_aPolygon, POLY_POINTS, _pos_x1, _pos_y1);（5）
    
75.     GUI_AA_FillPolygon(_aPolygon, POLY_POINTS, _pos_x2, _pos_y2);（6）
    
76.     GUI_AA_EnableHiRes();
    
77.     GUI_AA_FillPolygon(_aPolygonHiRes, POLY_POINTS, _pos_x3, _pos_y3);（7）
    
78.     GUI_AA_DisableHiRes();
    
79.     break;
    
80.   default:
    
81.     WM_DefaultProc(pMsg);
    
82.   }
    
83. }
    
84. 
    
85. /*******************************************************************
    
86. *
    
87. *       _CalcColor
    
88. *
    
89. * Function description
    
90. *   Calculates the color-fading.
    
91. */
    
92. static void _CalcColor(void) {
    
93.   _color_a += 0x000002 * _color_d;
    
94.   _color_b += 0x000200 * _color_d;
    
95.   _color_c += 0x020002 * _color_d;
    
96.   if (_color_c == 0xFEFFFE || _color_c == 0x00FF00) {
    
97.     _color_d = -_color_d;
    
98.   }
    
99. }
    
100. 
     
101. /*******************************************************************
     
102. *
     
103. *       _ShowHiResPixels
     
104. *
     
105. * Function description
     
106. *   This is frame-function for the callback. It creates the window
     
107. *   and handles the rotation of polygons and colors.
     
108. */
     
109. static void _ShowHiResPixels(void) {
     
110.   const GUI_FONT * FontOld;
     
111.   WM_HWIN          hWindow;
     
112.   float            pi;
     
113.   float            Step;
     
114.   float            Angle;
     
115.   int              i;
     
116. 
     
117.   pi   = 3.1415926f;
     
118.   Step = pi / 180;
     
119.   GUI_SetBkColor(GUI_BLACK);
     
120.   GUI_Clear();
     
121.   GUI_SetColor(GUI_WHITE);
     
122.   GUI_SetTextAlign(GUI_TA_HCENTER);
     
123.   FontOld = GUI_SetFont(&GUI_Font24_ASCII);
     
124.   GUI_DispStringAt("AA_HiResPixels - Sample", 160, 5);
     
125.   GUI_SetFont(FontOld);
     
126.   GUI_SetColor(GUI_RED);
     
127.   GUI_DispStringHCenterAt("not\nantialised", 65, 100);
     
128.   GUI_SetColor(GUI_GREEN);
     
129.   GUI_DispStringHCenterAt("antialised", 160, 100);
     
130.   GUI_SetColor(GUI_BLUE);
     
131.   GUI_DispStringHCenterAt("antialised\nwith high\nresolution", 255, 100);
     
132.   hWindow = WM_CreateWindow(35, 140, 250, 60, WM_CF_SHOW | WM_CF_MEMDEV, _cbWindow, 0);
     
133.   WM_SelectWindow(hWindow);
     
134.   GUI_AA_SetFactor(AA_FACTOR);
     
135.   while (1) {
     
136.     for (i = 0, Angle = 0; i < 360; i++) {（8）
     
137.       Angle += Step;
     
138.       GUI_RotatePolygon(_aPolygonHiRes, _aPolygonHiRes_src, POLY_POINTS, Angle);（9）
     
139.       GUI_RotatePolygon(_aPolygon,      _aPolygon_src,      POLY_POINTS, Angle);
     
140.       _CalcColor();
     
141.       WM_InvalidateWindow(hWindow);（10）
     
142.       GUI_Delay(50);
     
143.     }
     
144.   }
     
145. }
     
146. 
     
147. /*********************************************************************
     
148. *
     
149. *       Public code
     
150. *
     
151. **********************************************************************
     
152. */
     
153. /*********************************************************************
     
154. *
     
155. *       MainTask
     
156. */
     
157. void MainTask(void) {
     
158.   GUI_Init();
     
159.   _ShowHiResPixels();
     
160. }

1． 多边形的原始坐标。

2． 加入了高分辨率后的坐标点。

3． 所创建窗口的回调函数。

4． 这里主要是实现回调函数中的重绘消息。

5． 绘制多边形。

6． 绘制具有抗锯齿效果的多边形。

7． 绘制具有抗锯齿并支持高分辨率坐标的多边形。

8． 通过for循环实现图像的旋转。

9． 旋转多边形的原始坐标点，得到新的坐标点。详细可以看用户手册上面对这个函数的介绍

10． 通过使窗口无效来执行回调函数。从而实现多边形的旋转效果。

27.3  例子三：AA_HiResAntialiasing

    这个例子给大家演示一下直线的抗锯齿效果，例子所在位置：

    例子实际显示效果如下：

下面跟大家分析下这个程序的源码：

1. #include "GUI.h"
   
2. 
   
3. /*******************************************************************
   
4. *
   
5. *       Static code
   
6. *
   
7. ********************************************************************
   
8. */
   
9. /*******************************************************************
   
10. *
    
11. *       _DemoAntialiasing
    
12. *
    
13. * Function description
    
14. *   Draws lines with different antialiasing factors
    
15. */
    
16. static void _DemoAntialiasing(void) {
    
17.   const GUI_FONT * font_old;
    
18.   int              i;
    
19.   int              x1;
    
20.   int              x2;
    
21.   int              y1;
    
22.   int              y2;
    
23. 
    
24.   y1 = 65;
    
25.   y2 = 5;
    
26.   //
    
27.   // Set drawing attributes
    
28.   //
    
29.   GUI_SetColor(GUI_WHITE);
    
30.   GUI_SetBkColor(GUI_BLACK);
    
31.   GUI_SetPenShape(GUI_PS_FLAT);（1）
    
32.   GUI_Clear();
    
33.   //
    
34.   // Draw headline
    
35.   //
    
36.   font_old = GUI_SetFont(&GUI_Font24_ASCII);
    
37.   GUI_SetTextAlign(GUI_TA_HCENTER);
    
38.   GUI_DispStringAt("AA_Lines - Sample", 160, 5);
    
39.   //
    
40.   // Draw lines without antialiased  （2）
    
41.   //
    
42.   GUI_Delay(1000);
    
43.   GUI_SetFont(&GUI_Font8x16);
    
44.   GUI_SetTextAlign(GUI_TA_LEFT);
    
45.   GUI_DispStringAtCEOL("draw normal lines using", 5, 40);
    
46.   GUI_DispStringAtCEOL("GUI_DrawLine", 5, 55);
    
47.   GUI_Delay(2500);
    
48.   x1 = 20;
    
49.   x2 = 100;
    
50.   GUI_SetFont(font_old);
    
51.   GUI_DispStringHCenterAt("Normal", (x1 + x2) / 2, 30 + y1);
    
52.   for (i = 1; i < 8; i++) {
    
53.     GUI_SetPenSize(i);
    
54.     GUI_DrawLine(x1, 40 + i * 15 + y1, x2, 40 + i * 15 + y1 + y2);
    
55.   }
    
56.   //
    
57.   // Draw lines with antialiasing quality factor 2 （3）
    
58.   //
    
59.   GUI_Delay(3000);
    
60.   GUI_SetFont(&GUI_Font8x16);
    
61.   GUI_DispStringAtCEOL("", 5, 40);
    
62.   GUI_DispStringAtCEOL("", 5, 55);
    
63.   GUI_Delay(200);
    
64.   GUI_DispStringAtCEOL("draw antialiased lines using", 5, 40);
    
65.   GUI_DispStringAtCEOL("GUI_AA_DrawLine", 5, 55);
    
66.   GUI_Delay(3500);
    
67.   x1 = 120;
    
68.   x2 = 200;
    
69.   GUI_AA_SetFactor(2);
    
70.   GUI_SetFont(font_old);
    
71.   GUI_DispStringHCenterAt("Antialiased\nusing factor 2", (x1 + x2) / 2, 30 + y1);
    
72.   for (i = 1; i < 8; i++) {
    
73.     GUI_SetPenSize(i);
    
74.     GUI_AA_DrawLine(x1, 40 + i * 15 + y1, x2, 40 + i * 15 + y1 + y2);
    
75.   }
    
76.   //
    
77.   // Draw lines with antialiasing quality factor 6  （4）
    
78.   //
    
79.   GUI_Delay(1500);
    
80.   x1 = 220;
    
81.   x2 = 300;
    
82.   GUI_AA_SetFactor(6);
    
83.   GUI_SetFont(font_old);
    
84.   GUI_DispStringHCenterAt("Antialiased\nusing factor 6", (x1 + x2) / 2, 30 + y1);
    
85.   for (i = 1; i < 8; i++) {
    
86.     GUI_SetPenSize(i);
    
87.     GUI_AA_DrawLine(x1, 40 + i * 15 + y1, x2, 40 + i * 15 + y1 + y2);
    
88.   }
    
89.   GUI_Delay(7500);
    
90. }
    
91. 
    
92. /*********************************************************************
    
93. *
    
94. *       Public code
    
95. *
    
96. **********************************************************************
    
97. */
    
98. /*********************************************************************
    
99. *
    
100. *       MainTask
     
101. */
     
102. void MainTask(void) {
     
103.   GUI_Init();
     
104.   while (1) {
     
105.     _DemoAntialiasing();
     
106.   }
     
107. }

1. 这个函数在手册上面没有查到相关的说明。

2. 绘制普通的直线，不具有抗锯齿效果。

3. 绘制具有抗锯齿效果的直线，抗锯齿因子取2.

4. 绘制具有抗锯齿效果的直线，抗锯齿因子取4。

27.4  总结

    通过上面三个例子，大家要明白两点：

1、默认使用GUI_AA_XXX函数的时候，抗锯齿因子是1，也就是不使用抗锯齿效果。

2、上面说的抗锯齿和高分辨率是两码事，这个千万别搞混了。简单的理解就是通过高分辨率可以实现更好的显示效果。