) S' D+ j. G  t5 g3 Q( N3 B
( k8 x0 C1 O; v3 p特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第8章      2-D图形库之基本绘图

    本期主要讲解2-D图形库的基本绘图方法。这些图形库是基于快速高效的算法。当前，只有GUI_DrawArc()函数需要浮点计算，这些函数用PC端的emWin模拟器练习就行，不需要在开发板上面做，太麻烦。

    基本绘制例程可以在显示器中的任意位置绘制单个点、水平线和垂直线以及图形。所有可用的绘制模式均能使用。由于大多数应用程序会频繁调用这些例程，因此对它们的速度尽可能进行了优化。例如，水平线和垂直线函数不需要使用单点例程。

    8. 1  画笔大小

    8. 2  基本绘制

    8. 3  Alpha混合

    8. 5  实验总结

+ h) ~4 D. O  P; l( ^2 G! h

8.1  画笔大小

        GUI_GetPenSize()  返回当前的画笔大小 （像素）。

        GUI_SetPenSize()    设置画笔大小 （像素）。

    画笔大小决定以下矢量绘制操作的厚度：

l  GUI_DrawPoint()

l  GUI_DrawLine()

l  GUI_DrawLineRel()

l  GUI_DrawLineTo()

l  GUI_DrawPolyLine()

l  GUI_DrawPolygon()

l  GUI_DrawEllipse()

l  GUI_DrawArc()

    这里要切记画笔大小只支持上面的几个2D绘图函数，有些是不支持的，下面以GUI_DrawLine()举一个例子，这个例子直接复制到STemWin模拟器下面就可以跑的，主要是画三条不同粗细的直线。

1. #include "GUI.h"
   ) M! n  d% v5 m5 F) k4 z
2. 
   
3. void MainTask(void) {
   
4.     GUI_Init();   
   
5.     GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
   - s9 l, B. i6 R! f' q; s* V
6.     GUI_Clear();                /* 这里只要清屏了，上面设置背景颜色才能起到作用 */   
   7 o- T, X, G  N, _3 q, p
7.     GUI_CURSOR_Show();          /* 显示游标       */
   
8.     GUI_SetColor(GUI_RED);      /* 设置画笔颜色   */   
   2 ]! O5 g& \* A3 ^. H1 W8 A
9.     GUI_SetPenSize(1);          /* 设置画笔大小   */
   ; r4 N: l/ g6 Q' y+ m! Y" s  z
10.     GUI_DrawLine(0,             /* X起始位置      */                        
    , ]. i+ S8 @& _* E
11.                  10,            /* Y起始位置      */
    ; A3 C5 r( C9 _4 S7 S; x
12.                  200,           /* X结束位置      */               
    
13.                  10);           /* Y结束位置      */
    
14.     GUI_SetPenSize(4);   
    
15.     GUI_DrawLine(0, 100, 200, 100);
    : e% T/ m+ i2 ?" K' T# G
16.     GUI_SetPenSize(8);   
    
17.     GUI_DrawLine(0, 200, 200, 200);
    9 s; T& L/ H" X; E4 ]
18.     while(1)   
    
19.     {
    0 K7 a4 G' X# q3 t$ `' [% t( r+ {
20.         GUI_Delay(100);   
    
21.     }
    
22. }

复制代码

实际显示效果如下：

8.2  基本绘制

    STemWin支持的2D基本绘图函数有如下的几个，我这里就不跟大家一一举例了，举几个典型的函数用法：

   

     下面这个例程主要用到以下几个函数

        GUI_DrawGradientRoundedH()      绘制用水平颜色梯度填充的圆角矩形。

        GUI_DrawRectEx()                          在当前窗口中的指定位置绘制矩形。

        GUI_DrawRoundedFrame()            在当前窗口中的指定位置绘制指定宽度的圆角框。

        GUI_FillRoundedRect()                   在当前窗口中的指定位置绘制填充的圆角矩形。

     在模拟器上演示例子如下：

1. #include "GUI.h"
   
2. 
   
3. void MainTask(void)
   
4. {
   9 Y  c& r9 o; m1 P* f" L
5.     GUI_RECT Rect = { 120, /* Upper left X-position. */
   7 F& [$ j6 y3 {6 E! m
6.                       0,   /* Upper left Y-position. */
   3 F8 O$ G. J8 e: R: z
7.                       219, /* Lower right X-position. */
   ! Q  F; w) l: A0 p8 ?0 V+ ^5 q: C
8.                       99}; /* Lower right Y-position. */
   
9.     GUI_Init();
   
10.     GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
    
11.     GUI_Clear();                /* 这里只要清屏了，上面设置背景颜色才能起到作用 */
    
12.     GUI_CURSOR_Show();          /* 显示游标 */
    " T$ T8 U0 \6 p* X0 \
13.     GUI_SetColor(GUI_RED);
    + m$ r! j& A1 s9 G# O1 |
14.     GUI_DrawGradientRoundedH(0, 0, 99, 99, 25, 0x0000FF, 0x00FFFF);
    
15.     GUI_DrawRectEx(&Rect);
    
16.     GUI_DrawRoundedFrame(0, 110, 99, 210, 20, 10);
    
17.     GUI_FillRoundedRect( 120, 110, 219, 210, 20);
    
18.     while(1)
    6 ?6 w1 J. E6 D5 o, u" f1 ]
19.     {
    
20.         GUI_Delay(100);
    
21.     }
    
22. }

复制代码

实际显示效果如下：

- A; K" Y; \9 S# Y" _

5 m4 d  A. _( {; Z, d

8.3  Alpha混合

    Alpha混合是个非常好的功能，有了这个绘制出来的界面才能更加的华丽，下面详细的介绍一下。Alpha混合是一种合并前景图像与背景来创建半透明效果的方法。Alpha值决定可见的像素数以及背景透露的像素数。

颜色信息

    STemWin内部适用于32位的颜色信息：

l  0-7位：红色

l  8-15位：绿色

l  16-23位：蓝色

l  24-31位：Alpha信息

    Alpha值为0表示不透明，值为255表示完全透明。

工作原理

    Alpha混合完全自动执行。唯一需要做的就是使用GUI_EnableAlpha()启用Alpha混合。在此，8位以上的颜色信息将作为Alpha值管理。下面举一个例子

1. #include "GUI.h"
   
2. 
   
3. void MainTask(void)
   * b0 e7 @8 Z$ J# `/ i8 c" d# J
4. {
   ' Q, i: W, p: n+ _% u- J
5.     GUI_Init();   
   * m& |0 @# I9 w. T3 {% p' B
6.     GUI_EnableAlpha(1);          /* 启用或禁用自动Alpha混合 */
   2 K: c4 P% l3 m' n9 ^! G2 m
7.     GUI_SetBkColor(GUI_WHITE);   /* 设置背景颜色 */  
   ) [# m& H# [4 S* d# O' j
8.     GUI_Clear();                 /* 这里只要清屏了，上面设置背景颜色才能起到作用 */
   % z& [" e. w! C% p/ G5 ^
9.     GUI_SetColor(GUI_BLACK);     /* 设置字体显示颜色 */   
   ) f8 n1 f0 V5 p. N2 R: S
10.     GUI_DispStringHCenterAt("Alphablending", 45, 41);
    5 o% K9 W' |' ~9 s
11.      /* 显示带alpha效果的填充矩形 */
    6 Q/ o3 W: l' R( l
12.     GUI_SetColor((0x40uL << 24) | GUI_RED);   
    % O' t, _' I* v, w
13.     GUI_FillRect(0, 0, 49, 49);
    ) G$ m4 q3 O& H
14.     GUI_SetColor((0x80uL << 24) | GUI_GREEN);
    
15.     GUI_FillRect(20, 20, 69, 69);   
    . `' s: }& n0 f7 e. @
16.     GUI_SetColor((0xC0uL << 24) | GUI_BLUE);   
    
17.     GUI_FillRect(40, 40, 89, 89);
    
18.     while(1)   
    
19.     {
    
20.         GUI_Delay(100);  
    5 ]1 A. s8 h  E3 n4 s$ H! W, o. D
21.      }
    : B9 F1 {) C% q6 _# H! v; [
22. }

复制代码

实际显示效果如下：

    说一下这个函数GUI_SetAlpha()，这个函数基本处于弃用的状态，主要以上面说的那个函数为主。该函数设置用于所有后续绘制操作的Alpha值。参数Alpha值为0表示不透明（禁用Alpha混合），值为255表示完全透明 （不可见）。请注意，软件Alpha混合会增加CPU负荷。此外，强烈建议在绘制操作完成后，将Alpha值设回默认值。下面针对这个函数举一个例子。

1. GUI_CONST_STORAGE GUI_BITMAP bmarmfly = {
   $ S0 o: l2 g' r3 V) d: C
2.   198, // xSize
   
3.   80, // ySize
   
4.   792, // BytesPerLine
   + Z1 U7 Y. N- g% G& _1 F
5.   32, // BitsPerPixel
   . M& I7 P; I' H* K8 }2 q
6.   (unsigned char *)_acarmfly,  // Pointer to picture data
   9 u3 V5 A& R/ f8 R$ K4 T6 p+ _
7.   NULL,  // Pointer to palette
   
8.   GUI_DRAW_BMP8888
   - e" z2 Z7 `/ _2 z; {, [( i
9. };
   2 u' y0 F0 o7 M! z  D
10. 
    
11. void MainTask(void)
    9 X- y' y, `' a' k  ^
12. {
    + c# _% p2 W5 n; c) o7 R1 b
13.      int i;
    
14.    
    
15.      GUI_Init();
    * Q1 F4 w6 {. `- e% U
16. //   GUI_EnableAlpha(1);         /* 启用或禁用自动Alpha混合 */
    % i4 l& v: w- M4 m& k6 E
17. 
    & t  k# h3 q: b' M; A
18.      /* 绘制蓝色填充的圆圈 */
    
19.      GUI_SetColor(GUI_BLUE);
    
20.      GUI_FillCircle(100, 50, 49);
    
21. 
    
22.      GUI_SetColor(GUI_YELLOW);
    ' y0 E. ~4 U" i# V/ n: u/ x7 L
23.      for (i = 0; i < 100; i++)
    , _$ ^- \- w9 c5 |% k
24.      {
    - I9 ^  _: h+ X8 o
25.          U8 Alpha;
    8 v2 ?+ c& u/ A
26.          Alpha = (i * 255 / 100);
    
27.          GUI_SetAlpha(Alpha);
    - l% i: m# J- n
28.          GUI_DrawHLine(i, 100 - i, 100 + i);
    
29.      }
    ! K' o3 _, @" Z; G+ h5 A7 r
30. 
    
31.      GUI_SetAlpha(0x80);
    
32.      GUI_DrawBitmap(&bmarmfly, 30, 30);
    ( z8 S( X7 s, D1 ~
33.      GUI_SetColor(GUI_MAGENTA);
    
34.      GUI_SetFont(&GUI_Font24B_ASCII);
    
35.      GUI_SetTextMode(GUI_TM_TRANS);
    ( f& M2 `) r: t  h# R" [% @
36.      GUI_DispStringHCenterAt("Alphablending", 100, 3);
    
37.      GUI_SetAlpha(0); /* Set back to default (opaque) */
    
38.    
    
39.      while(1)
    
40.      {
    
41.          GUI_Delay(100);
    * O2 p, a! t3 j) c. |; m
42.      }
    $ i1 W# ]. T, W5 b0 G3 O
43. }

复制代码

实际显示效果如下：

' e% ]) D# V- Y3 V% H8 Z" i- G' I

    有这个例子涉及到大量的图片数据，完整的运行例子在本期教程配套的里面有。

    关于alpha函数还有如下两个函数

         GUI_SetUserAlpha()            设置其他值以用于计算要使用的实际Alpha值。

         GUI_RestoreUserAlpha()    恢复用户Alpha混合之前的状态。保存在所指向的结构中。

    看函数说明不好看懂，下面也举一个例子

1. #include "GUI.h"
   9 G& R: K1 x4 j: Z9 `
2. 
   
3. void MainTask(void)
   
4. {      
   & g* W6 t! c. h
5.     GUI_ALPHA_STATE AlphaState;
   ) X1 ?1 h' K. K# Z' h
6.     GUI_Init();   
   ; D& @1 H3 E6 ?
7.     GUI_EnableAlpha(1);   
   
8.     GUI_SetBkColor(GUI_WHITE);   
   7 N' P& ], S1 h/ n& O  P9 O; @3 ^
9.     GUI_Clear();  
   
10.     GUI_SetColor(GUI_BLACK);   
    
11.     GUI_DispStringHCenterAt("Alphablending", 45, 41);   
    
12.     GUI_SetUserAlpha(&AlphaState, 0xC0);  
    
13.     GUI_SetColor(GUI_RED);   
    + T" |& ~! r* s6 |
14.     GUI_FillRect(0, 0, 49, 49);  
    
15.     GUI_SetColor(GUI_GREEN);   
    3 z8 ^7 `+ ^+ K% ?) o
16.     GUI_FillRect(20, 20, 69, 69);   
    6 O0 w" \  i/ c0 @9 G  x
17.     GUI_SetColor(GUI_BLUE);  
    # I" x1 Y% C$ `  z5 k( {! G- H& X. V6 @
18.     GUI_FillRect(40, 40, 89, 89);   
    
19.     GUI_RestoreUserAlpha(&AlphaState);      
    + V' @- w$ g- f
20.     while(1)   
      i( J, Y2 W. h# x
21.     {      
    8 T# N9 S# B; n+ f
22.         GUI_Delay(100);   
    8 r/ H+ s, g4 d$ d% s' Z3 E9 p. P9 n% a
23.     }
    
24. }

复制代码

实际显示效果如下：

! [$ H2 |( M  A: H; K2 b& C

8.4  实验总结

     这些基本的2-D绘图函数很重要，特别是Alpha函数，绚丽的界面设计就靠这些函数了。

7 l, [$ P) |- R8 N. k- x

谢谢分享

好帖。。。。。。。。