特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接
3 q9 q# h4 N0 w" k3 \  k* q. @

第26章      抗锯齿基础介绍

    本期教程主要是跟大家讲解一下抗锯齿，关于抗锯齿，在第16章讲解字体显示的时候也讲了点。本期教程就是跟大家详细的讲解一下抗锯齿方面的知识。

     线条由一系列必须位于显示坐标处的像素近似构成。因此，可能看起来呈锯齿状，尤其是近似水平线或近似垂直线。这种现象称为锯齿(aliasing)。抗锯齿是对线条和曲线进行平滑处理。可以减少不完全水平或垂直的线条的楼梯状锯齿。STemWin支持不同的抗锯齿质量、无锯齿字体和高分辨率坐标。

    26. 1  介绍

    26. 2 抗锯齿API函数实例演示

    26. 3 总结

26.1  介绍

    抗锯齿通过使背景色与前景色相“混合”的方法来平滑曲线和对角线。背景色与前景色之间使用的阴影越多，抗锯齿效果越好 （计算时间越长）。

26.1.1      抗锯齿质量

    抗锯齿处理的质量由GUI_AA_SetFactor()函数设定，通过下面的截图给大家介绍一下抗锯齿因子与对应结果之间的关系。

    第一条线未经抗锯齿处理（因子1）。第二条线以因子2进行了抗锯齿处理。也就是说，从前景到背景的阴影数为2 x 2 = 4。下一条线以抗锯齿因子3绘制，因而有3 x 3 = 9个阴影，如此等等，不一而足。因子4足以处理多数应用。进一步增加抗锯齿因素不会大幅改善结果，但会增加计算时间。

26.1.2      抗锯齿字体

    在前面第16章介绍字体的时候讲解过2bpp和4bpp字体显示效果，下面再给大家展示下不使用抗锯齿和使用两种抗锯齿下字母C的显示效果：

   

    无锯齿字体可以通过STemWin字体转换器创建。使用无锯齿字体的一般目的是改进文字的外观。虽然高质量抗锯齿比低质量搞锯齿处理看起来更好美观，但计算时间和存储器占用量也会相应增加。低质量(2bpp)字体需要两倍于无抗锯齿处理(1bpp)字体的存储器容量；高质量(4bpp)字体则需要四倍的存储器容量。

26.1.3      高分辨率坐标

    在使用抗锯齿法绘制项目时，使用的是与常规 （无抗锯齿处理）绘图程序相同的坐标。这是默认模式。在函数参数中无需考虑抗锯齿因子。例如，要从(50, 100)到(100, 50)绘制一条抗锯齿线条，则需写入以下代码：

       GUI_AA_DrawLine(50, 100, 100, 50);

    借助STemWin的高分辨率功能，大家可以使用取决于抗锯齿因子和显示尺寸的虚拟空间。使用高分辨率坐标的优势在于，项目不但可以置于显示器的物理位置上，而且可以置于物理位置之间。

    下图展示的是一个高分辨率像素的虚拟空间，其抗锯齿因素为3：

     以抗锯齿因子3，从像素(50,100)到像素(100, 50)绘制一条高分辨率线条，则需写入以下代码：

        GUI_AA_DrawLine(150, 300, 300, 150);

     高分辨率坐标必须通过GUI_AA_EnableHiRes()程序启用，并用GUI_AA_DisableHiRes()禁用。

26.2  抗锯齿API函数实例演示

    STemWin支持的抗锯齿函数主要如下：

, n2 L$ W! b8 l. U% u26.2.1      函数GUI_AA_DrawArc

模拟器上运行代码如下：

1. #include "GUI.h"
   4 x7 W: N0 L2 A
2. 
   : D: z4 d* w- d. S
3. void MainTask(void)
   
4. {
   
5.      GUI_Init();
   : A; F/ _2 I% Z, Z! V
6. 
   
7.      /* 设置画笔粗细 */
   
8.      GUI_SetPenSize(4);
   
9.      GUI_SetColor(GUI_RED);
   
10.    
    # y# p: m- G) ~* P. L0 `, e
11.      /* 使能高分辨率 */
    ; c( }5 X, |4 A& ^. i
12.      GUI_AA_EnableHiRes();
    
13. 
    6 U: @; l6 a9 W* K
14.      /* 抗锯齿因数选择1 */
    
15.      GUI_AA_SetFactor(1);
    % [+ V, q  W5 {4 ^
16.      GUI_AA_DrawArc(50,120,50,50,0,180);
    
17. 
    ; b8 y; B$ l  A% J
18.      /* 抗锯齿因数选择3 */
    
19.      GUI_AA_SetFactor(3);
    
20.      GUI_AA_DrawArc(160*3,120*3,50*3,50*3,0,180);
    9 Y* M5 \" B3 h
21. 
    0 Z  B4 ?4 H) s4 C
22.      /* 抗锯齿因数选择3 */
    5 ^+ F2 e* L0 e# F6 h
23.      GUI_AA_SetFactor(6);
    # \- }/ r8 |1 J$ A+ b% l; l( O! T
24.      GUI_AA_DrawArc(270*6,120*6,50*6,50*6,0,180);
    
25.    
    
26.      while(1)
    
27.      {
    
28.          GUI_Delay(100);
    ) y$ ^% z7 q3 Z
29.      }
    
30. }

复制代码

     要注意选择了抗锯齿因数后，绘制是得乘以相应的因数。

显示效果如下：

26.2.2      函数GUI_AA_DrawLine

    模拟器上运行程序如下：

1. #include "GUI.h"
   
2. 
   
3. void MainTask(void)
   5 C9 I) r( T  J' A
4. {
   8 y0 M6 L0 m8 _6 Q9 t: H
5.      GUI_Init();
   
6. 
   % C8 P# S# M# S$ {# u3 D& z! @+ Y& i
7.      /* 设置画笔粗细 */
   
8.      GUI_SetPenSize(40);
   1 N# k$ {! ~3 c0 T" f
9.      GUI_SetColor(GUI_RED);
   
10.    
    
11.      /* 使能高分辨率 */
    + O* o, l9 i9 C0 H/ \
12.      GUI_AA_EnableHiRes();
    ) A2 G4 K$ |$ H, @% Z
13. 
    
14.      /* 抗锯齿因数选择1 */
    & o8 n, f, u6 O7 p: K! r7 Z! T
15.      GUI_AA_SetFactor(1);
    
16.      GUI_AA_DrawLine(50,40,50,120);
    9 M4 E, o8 W6 m: ?- S
17. 
    
18.      /* 抗锯齿因数选择3 */
    & k4 |1 H! C$ Z/ K8 B
19.      GUI_AA_SetFactor(3);
    
20.      GUI_AA_DrawLine(150*3,40*3,150*3,120*3);
    0 L0 I) k5 d5 R8 @* \
21. 
    
22.      /* 抗锯齿因数选择3 */
    
23.      GUI_AA_SetFactor(6);
    6 n, j7 @* `) Q) S8 Q9 n' U
24.      GUI_AA_DrawLine(250*6,40*6,250*6,120*6);
    
25.    
    
26.      while(1)
    
27.      {
    
28.          GUI_Delay(100);
    * n8 F: m& `% t3 f
29.      }
    
30. }

复制代码

实际效果如下：

26.2.3      函数GUI_AA_DrawPolyOutline

    模拟器上运行代码如下：

1. #define countof(Array) (sizeof(Array) / sizeof(Array[0]))
   " v2 A9 q1 C8 R8 b: N
2. 
   ! E* \) s: z1 p
3. static GUI_POINT aPoints[] = {
   
4.      { 0, 0 },
   
5.      { 15, 30 },
   
6.      { 0, 20 },
   
7.      {-15, 30 }
   
8. };
   
9. 
   + v% f7 V& C+ e  [1 i+ f- n
10. void MainTask(void)
    
11. {
    ) r7 r! F2 E; z. L
12.      GUI_Init();
    
13. 
    
14.      GUI_SetPenSize(10);
    
15.      GUI_SetColor(GUI_RED);
    - {# Q  g! [- q' A3 n
16. 
    5 [1 ^8 m% x  I: u# z& v
17.      GUI_AA_DrawPolyOutline(aPoints, countof(aPoints), 3, 150, 40);
    ! d) l; {% l5 d2 j/ U4 z% A: [
18.    
    
19.      while(1)
    : y) N. E1 A$ w! H4 B% x
20.      {
    
21.          GUI_Delay(100);
    
22.      }
    
23. }

复制代码

    使用这个函数要注意：通过连接终点和起点，可使绘制的多线条自动闭合。起点不得再次指定为终点。

    如果采用高分辨率模式，则必须使用高分辨率坐标。否则，必须指定为像素值。默认情况下，该函数处理的定义点不超过10个。如果多边形由10个以的点构成，则必须使用GUI_AA_DrawPolyOutlineEx()函数。

实际效果如下：

+ F4 ~: B1 j$ T+ z26.2.4      函数GUI_AA_DrawRoundedRect

    模拟器上运行的代码如下：

1. #include "GUI.h"
   5 B8 s& X# w3 M! F" Y# O! M  H
2. 
   8 G2 }; ~* W: q
3. void MainTask(void)
   , f3 D* T+ k6 h; ]; J4 x# g
4. {
   
5.      GUI_Init();
   
6.      GUI_SetBkColor(GUI_WHITE);
   * V$ t7 F  v$ Q4 f) k# s8 ]
7.      GUI_Clear();
   & I  V8 s* F0 ]; z- L& n" U
8.      GUI_SetColor(GUI_DARKBLUE);
   - G) \0 m. ~0 k8 ?- y9 I5 L1 q
9.      GUI_SetPenSize(5);
   ) [3 p/ M' i! p0 `
10.      GUI_AA_DrawRoundedRect(10, 10, 50, 50, 5);
    
11.    
    " Q( G7 O# v  f3 R  s- A
12.      while(1)
    
13.      {
    
14.          GUI_Delay(100);
    
15.      }
    7 c* H- {2 c- J
16. }

复制代码

实际显示效果如下：

26.2.5      函数GUI_AA_FillCircle

    模拟器上运行的代码如下：

1. #include "GUI.h"
   2 N5 K! O7 r5 o' U
2. 
   
3. void MainTask(void)
   
4. {
   ) i% @: l2 S% `/ m. g, T5 U
5.      GUI_Init();
   ( a6 _. N' Y: ]* i+ a1 T
6.      GUI_AA_EnableHiRes();
   ) [% R" w( q  X7 w$ ^% D* i: K6 Q
7.      GUI_SetBkColor(GUI_WHITE);
   
8.      GUI_Clear();
   0 ~9 \) l2 |/ @% u$ e8 j: J4 {1 i
9.      GUI_SetColor(GUI_DARKBLUE);
   
10.      GUI_SetPenSize(5);
    $ k0 |+ y' j" Q9 s2 w* p
11.      GUI_AA_SetFactor(3);
    ( ~, L; g1 _3 Q+ F- B& Q
12.      GUI_AA_FillCircle(160*3, 120*3, 80*3);
    . T8 A8 c! s) o7 y* I: I
13.    
    9 w5 [! T. g7 w* h
14.      while(1)
    
15.      {
    " t8 f8 Z  t) F+ E& r3 l
16.          GUI_Delay(100);
    
17.      }
    
18. }

复制代码

实际显示效果如下：

26.2.6      函数GUI_AA_FillPolygon

    模拟器上运行的代码如下：

1. #include "GUI.h"
   
2. 
   
3. #define countof(Array) (sizeof(Array) / sizeof(Array[0]))
   / W2 W8 p5 o' s; ^
4. 
   
5. static GUI_POINT aPoints[] = {   (1)
   ; O2 Q7 S1 }* |) o- Z
6.      { 0, 0 },
   
7.      { 70, -30 },
   
8.      { 0, 50 },
   ( t6 X: c2 @. S* V6 |" J4 |
9.      {-70, -30 }
   " U: w- {) \3 _
10. };
    
11. 
    
12. void MainTask(void)
    
13. {
    & W$ F: ^/ w& T" J! r
14.      GUI_Init();
    
15. 
    & B" r' y" J" ]& N$ {- J' v
16.      GUI_SetPenSize(10);
    
17.      GUI_SetColor(GUI_RED);
    $ R" C/ \& Y# j- k9 f$ Z3 W0 @8 D
18. 
    " {0 `7 L- E5 Y5 h. I3 S4 b* j+ ^
19.      GUI_AA_FillPolygon(aPoints, countof(aPoints), 150, 40);
    / [! }9 U2 }% M/ P3 e
20.    
    * \8 g$ }) `5 {2 p
21.      while(1)
    $ l* Q% q! f  ?( z% h* \# h! Q% {
22.      {
    - n/ z5 |5 q9 o! S6 M/ |
23.          GUI_Delay(100);
    & m& P& @& f! Q0 ]
24.      }
    
25. }

复制代码

1.    这些坐标点是相对于函数GUI_AA_FillPolygon中的X,Y坐标而言的。

实际运行效果如下：

26.2.7      函数GUI_AA_FillRoundedRect

    模拟器上运行的代码如下：

1. #include "GUI.h"
   % t9 }% g, L3 X$ `( G8 Z! s
2. 
   
3. void MainTask(void) {
   ( f5 Q; T; Y" t& ?" {# d- p& a  a
4.      GUI_Init();
   
5.      GUI_SetBkColor(GUI_WHITE);
   
6.      GUI_Clear();
   
7.      GUI_SetColor(GUI_DARKBLUE);
   
8.      GUI_AA_FillRoundedRect(10, 10, 54, 54, 5);
   0 S# X) ?; D; R# V
9.      while (1);
   9 g' F6 a( z+ ^6 M) v8 w% \
10.      {
    
11.      }
    
12. }

复制代码

实际显示效果如下：

9 G0 O1 ^) p4 ]( F% {/ n  X

26.3  总结

    本期教程就跟大家讲这么多，下期教程再跟大家详细的讲解两个抗锯齿相关的应用例子。

' s/ _: t" _; x& C5 l- A

谢谢分享

很好的资料，谢谢分享

好东西，收藏了哈