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

第26章      抗锯齿基础介绍

" g& a2 \# f- k2 X/ m" _* h

    本期教程主要是跟大家讲解一下抗锯齿，关于抗锯齿，在第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支持的抗锯齿函数主要如下：

26.2.1      函数GUI_AA_DrawArc

模拟器上运行代码如下：

1. #include "GUI.h"
   
2. 
   
3. void MainTask(void)
   
4. {
   1 T9 L! a3 x" n7 u8 K5 A/ _
5.      GUI_Init();
   . F) V( W: h( p' a5 S8 _
6. 
   
7.      /* 设置画笔粗细 */
   
8.      GUI_SetPenSize(4);
   - g- @5 A, I7 i  V' C
9.      GUI_SetColor(GUI_RED);
   9 v, t6 V! o! U8 r) [# F. a* \+ a
10.    
    8 ]- F: O9 E- f' {
11.      /* 使能高分辨率 */
    
12.      GUI_AA_EnableHiRes();
    
13. 
    
14.      /* 抗锯齿因数选择1 */
    
15.      GUI_AA_SetFactor(1);
    $ l+ w$ Q" Y5 U+ Z& A+ z1 q: @
16.      GUI_AA_DrawArc(50,120,50,50,0,180);
    
17. 
    
18.      /* 抗锯齿因数选择3 */
    ! C) N( u& S/ b& C4 u9 P
19.      GUI_AA_SetFactor(3);
    
20.      GUI_AA_DrawArc(160*3,120*3,50*3,50*3,0,180);
      u& l" A+ F: p
21. 
    
22.      /* 抗锯齿因数选择3 */
    
23.      GUI_AA_SetFactor(6);
    
24.      GUI_AA_DrawArc(270*6,120*6,50*6,50*6,0,180);
    8 n0 p  h; ?7 W/ |
25.    
    ; X- f' b: S2 z) \4 n: ?, n
26.      while(1)
      J+ B- x: [& [( n. M
27.      {
    + [( h2 h: ]0 h7 L) @
28.          GUI_Delay(100);
      G$ C+ v% g  i* Q" V) Y
29.      }
    / P9 h% h1 k$ A# |3 w: f# O1 j2 |
30. }

复制代码

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

显示效果如下：

* [* M9 J, [0 E% w, c; V! C26.2.2      函数GUI_AA_DrawLine

    模拟器上运行程序如下：

1. #include "GUI.h"
   % u5 s$ \+ v7 h0 Z
2. 
   ; r8 @1 o3 t/ P1 p  {- M: M& x
3. void MainTask(void)
   0 k9 x% n% g: ?$ S/ {' J# B+ ?
4. {
   ( M# s( X% J: i5 x- C1 c
5.      GUI_Init();
   * V2 A' R# c0 X  a" M; d) P
6. 
   * X, h: L' W9 ?) g
7.      /* 设置画笔粗细 */
   : `# W6 b7 U! C
8.      GUI_SetPenSize(40);
   ' s0 w# A2 Y/ _0 [( n
9.      GUI_SetColor(GUI_RED);
   
10.    
    % S2 i, y8 C$ q1 |
11.      /* 使能高分辨率 */
    5 s! e- O  G, |- m4 A, t
12.      GUI_AA_EnableHiRes();
    
13. 
    3 I- ^. p- h0 I3 ]1 T
14.      /* 抗锯齿因数选择1 */
    ' D, v( f" s9 ]- ?9 ~" y
15.      GUI_AA_SetFactor(1);
    & B( V9 U8 t* K* y. z6 Y
16.      GUI_AA_DrawLine(50,40,50,120);
    
17. 
    
18.      /* 抗锯齿因数选择3 */
    
19.      GUI_AA_SetFactor(3);
    $ X. H6 d6 v  @6 w
20.      GUI_AA_DrawLine(150*3,40*3,150*3,120*3);
    
21. 
    
22.      /* 抗锯齿因数选择3 */
    4 |) h' E; G% J3 Z
23.      GUI_AA_SetFactor(6);
    ' ^/ X2 p) B7 Q( l
24.      GUI_AA_DrawLine(250*6,40*6,250*6,120*6);
    
25.    
    
26.      while(1)
    
27.      {
    
28.          GUI_Delay(100);
    . r! Y% n# k, V2 q  L
29.      }
    : i; b! v! v8 v# \, E+ f
30. }

复制代码

实际效果如下：

5 N: T+ d5 a( @; i. X2 }# X& {* S26.2.3      函数GUI_AA_DrawPolyOutline

    模拟器上运行代码如下：

1. #define countof(Array) (sizeof(Array) / sizeof(Array[0]))
   4 P$ x( |. [# k* X; L! I
2. 
   - z6 I$ i" P8 M" a8 `7 E
3. static GUI_POINT aPoints[] = {
   
4.      { 0, 0 },
   
5.      { 15, 30 },
   & ]. f, z" X3 d+ w$ L# O5 L( V. B
6.      { 0, 20 },
   ) e. V( o3 J0 ]
7.      {-15, 30 }
   
8. };
   
9. 
   
10. void MainTask(void)
    $ X- m( D. `7 h& y: k+ V
11. {
      k; m9 R, T4 c
12.      GUI_Init();
    
13. 
    
14.      GUI_SetPenSize(10);
    & \0 J$ e4 q. g$ g
15.      GUI_SetColor(GUI_RED);
    ; a& Q6 h# c/ b: |/ Y, s
16. 
    $ }  A/ Q3 W. G1 x% l
17.      GUI_AA_DrawPolyOutline(aPoints, countof(aPoints), 3, 150, 40);
    . Y* ?5 l( I9 y/ ?( S. y. s
18.    
    ; B( T) @3 T0 X& K) o8 T$ X
19.      while(1)
    
20.      {
    * {1 m& a% `& o7 B$ H2 S. L
21.          GUI_Delay(100);
    
22.      }
    
23. }

复制代码

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

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

实际效果如下：

" m% f; n1 d) F& A& b, A26.2.4      函数GUI_AA_DrawRoundedRect

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

1. #include "GUI.h"
   
2. 
   % A1 [) e& n& a6 `
3. void MainTask(void)
   
4. {
   
5.      GUI_Init();
   & _5 \, x  q& W4 d# F7 R0 y
6.      GUI_SetBkColor(GUI_WHITE);
   0 O1 Q2 \$ B) ]; Q3 y8 `+ M
7.      GUI_Clear();
   # _9 t$ Y+ j( @  }# u. t- W3 T) E) m
8.      GUI_SetColor(GUI_DARKBLUE);
   
9.      GUI_SetPenSize(5);
   
10.      GUI_AA_DrawRoundedRect(10, 10, 50, 50, 5);
    " B2 K0 v$ O6 _& x& ^8 P, K- I
11.    
    
12.      while(1)
    $ c' p9 V, P# n) _& j
13.      {
    . S7 s0 {1 d" M
14.          GUI_Delay(100);
    ' ~' A$ G% [+ l4 P
15.      }
    + h0 a* K8 I- x( b) `
16. }

复制代码

实际显示效果如下：

26.2.5      函数GUI_AA_FillCircle

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

1. #include "GUI.h"
   
2. 
   - h! D- @2 o* g5 w4 N& {+ K% ]3 M9 C
3. void MainTask(void)
   
4. {
   8 ?+ h3 z1 |+ j' G' W9 c
5.      GUI_Init();
   ( S! o4 w- _) n* {9 e/ l) ?0 `1 b
6.      GUI_AA_EnableHiRes();
   , L+ e" b" X  ]) x3 i+ l
7.      GUI_SetBkColor(GUI_WHITE);
   1 ^# i4 Y9 @8 }) R) n
8.      GUI_Clear();
   
9.      GUI_SetColor(GUI_DARKBLUE);
   
10.      GUI_SetPenSize(5);
    
11.      GUI_AA_SetFactor(3);
    $ ]1 ^. b7 K' B/ b( z
12.      GUI_AA_FillCircle(160*3, 120*3, 80*3);
    
13.    
    
14.      while(1)
    
15.      {
    
16.          GUI_Delay(100);
    3 g2 m+ y. m% O
17.      }
    
18. }

复制代码

实际显示效果如下：

26.2.6      函数GUI_AA_FillPolygon

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

1. #include "GUI.h"
   
2. 
   
3. #define countof(Array) (sizeof(Array) / sizeof(Array[0]))
   
4. 
   
5. static GUI_POINT aPoints[] = {   (1)
   
6.      { 0, 0 },
     v5 ]4 Z/ {5 u7 j
7.      { 70, -30 },
   
8.      { 0, 50 },
   ! T, }( U  M; W7 ~/ |* F
9.      {-70, -30 }
   ! u" |9 S0 F$ @
10. };
    
11. 
    
12. void MainTask(void)
    
13. {
    
14.      GUI_Init();
    
15. 
    8 ]% g3 g; ~3 U6 u8 U* C5 x# n1 v
16.      GUI_SetPenSize(10);
    2 a: |: U* d, T2 K8 M9 i
17.      GUI_SetColor(GUI_RED);
    ( j9 m% C# F4 u) x1 H* _3 d) b4 \
18. 
    
19.      GUI_AA_FillPolygon(aPoints, countof(aPoints), 150, 40);
    . ]8 |" `8 A! N8 C6 G) [' s2 O
20.    
    
21.      while(1)
    4 C. g9 F# x# O
22.      {
    
23.          GUI_Delay(100);
    
24.      }
    
25. }

复制代码

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

实际运行效果如下：

! n) m+ F6 s/ j. \, c8 O4 B! e& J& t26.2.7      函数GUI_AA_FillRoundedRect

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

1. #include "GUI.h"
   
2. 
   
3. void MainTask(void) {
   ! W" @: G& _) K4 X
4.      GUI_Init();
   5 _; I  n* X& @) z0 c0 V& a8 S. u$ h
5.      GUI_SetBkColor(GUI_WHITE);
   
6.      GUI_Clear();
   2 U: K' P" a4 }# w- V# G
7.      GUI_SetColor(GUI_DARKBLUE);
   
8.      GUI_AA_FillRoundedRect(10, 10, 54, 54, 5);
   7 ^% e6 L$ m/ ?
9.      while (1);
   % T( Q! S1 {. I9 Q7 B- @1 R- @/ r
10.      {
    $ F9 L( C8 L5 }( U( O  z6 _
11.      }
    8 ]8 [9 E8 q; C$ ]/ W0 E3 e
12. }

复制代码

实际显示效果如下：

5 L+ K: o4 e9 K& o

26.3  总结

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

谢谢分享

很好的资料，谢谢分享

好东西，收藏了哈