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

第10章      2-D图形库之绘制图形

    本期主要讲解2-D图形库的图形绘制，包括绘制多边形，绘制圆，绘制椭圆，绘制弧线，绘制线图，绘制饼图。本期的例子不用在开发板上面做调试，直接用emWin5.24的模拟器即可。

    10. 1  绘制多边形

    10. 2  绘制圆

    10. 3  绘制椭圆

    10. 4  绘制弧线

    10. 5  绘制线图

    10. 6  绘制饼图

/ f" s) j& N6 o7 L

10.1  绘制多边形

    多边形的绘制主要有以下几个函数：

10.1.1      例子一

1.    GUI_DrawPolygon()：

    在当前窗口中绘制按点列表定义的多边形的轮廓，通过将终点连接到起点，绘制的多边形将自动闭合。

2.    GUI_EnlargePolygon()：

    按指定的长度 （像素）全方位扩展多边形，确保点的目标数组等于或大于源数组。

3.    GUI_FillPolygon()

    在当前窗口中绘制按点列表定义的填充的多边形，通过将终点连接到起点，绘制的多边形将自动闭合。终点无需接触到多边形的轮廓。通过为多边形的各个y位置绘制一条或多条水平直线，可对多边形进行渲染。默认情况下，为一个y位置绘制水平直线使用的最大点数量为12（意味着每个y位置需要6条直线）。如果需要增加此值，可使用宏GUI_FP_MAXCOUNT设置最大点数量。

    下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   3 N# _% C: X  X+ Q7 X
2. 
   : b* j0 b; W, o! V
3. /* 图形的原始坐标点 */
   1 P. S3 H6 \- `4 y0 A! L- S; \
4. const GUI_POINT aPoints[] = {
     T0 E0 Y" v& H0 F
5. { 40, 20},
   
6. { 0, 20},
   
7. { 20, 0}
   8 [/ @" b- \' R
8. };
   
9. 
   
10. /* 用于存储放大后的坐标点 */
    , N" k; W: j) A
11. GUI_POINT aEnlargedPoints[GUI_COUNTOF(aPoints)];
    
12. 
    
13. void Sample(void) {
    7 c# d) D9 _/ J) F0 J8 h& K: |
14.     int i;
    ; F. L. J, v: ?6 G& B
15.     GUI_Clear();
    9 D% t3 h9 ]$ k1 v: e
16.     /* 设置绘图模式 */
    % {' J/ w7 g0 @* M* B/ W% ^3 G" n4 q! }
17.     GUI_SetDrawMode(GUI_DM_XOR);
    ! N+ i: ]9 w- @+ P# |& _8 G
18.     /* 绘制多边形 */
    
19.     GUI_FillPolygon(aPoints,              /* 指向要显示和填充的多边形 */
    
20.                     GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
    2 c) }9 b' W! z* w- R# y1 ^
21.                     140,                  /* 原点的X位置 */
    7 n$ B7 T0 n. W' D& q
22.                     110);                 /* 原点的Y位置 */
    
23. 
    & {& }/ G, C; c& h" j1 o) m
24.     for (i = 1; i < 10; i++) {
    
25.         GUI_EnlargePolygon(aEnlargedPoints,                      /* 指向目标多边形 */
    7 T+ f  X  j4 r$ d; P: L
26.                                            aPoints,              /* 指向源多边形 */
    7 o, f8 h9 ^' ]& O: G" x8 D1 ^0 u
27.                                            GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
    ! |( [( K9 {7 m+ f0 J" @
28.                                             i * 5);              /* 扩展多边形的长度 （像素） */
    
29.         /* 绘制放大后的多边形 */
    , C- I* L& T! x3 V: ]
30.         GUI_FillPolygon(aEnlargedPoints, GUI_COUNTOF(aPoints), 140, 110);
    + F2 v! e8 y/ _8 S* P7 P
31.     }
    
32. }
    
33. 
    - I+ ~; a" N: c
34. void MainTask(void)
    
35. {
    0 M! B: X' g' J$ A/ r& {
36.     GUI_Init();
    : {$ J, F$ K+ o
37.     Sample();
    
38.     while(1)
    
39.     {
    4 I$ F& Z& V( u$ q
40.         GUI_Delay(100);
    - K" `" T( R% V/ g- }( X$ W: Z$ @
41.     }
    % e" B& ^- v, q: F( b# V! y2 j& p
42. }

复制代码

显示效果如下：

10.1.2      例子二

1.    GUI_MagnifyPolygon()

    按指定系数放大多边形。确保点的目标数组等于或大于源数组。请注意扩展和放大多边形之间的区别。调用函数GUI_EnlargePolygon()（参数Len= 1）将使多边形的所有边扩展1像素，而调用GUI_MagnifyPolygon()（参数Mag= 1）则没有效果。

下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   ! x8 `3 D) F. L, n
2. const GUI_POINT aPoints[] = {
   
3. { 0, 20},
     {: |1 F/ t% i$ V" J1 ]4 ?7 R
4. { 40, 20},
   ( t. J/ o) p- ~
5. { 20, 0}
   2 ?* c1 u" k. u5 ^1 |0 |  E/ ^& {$ c
6. };
   ' o5 j* y& I( A/ I. W. B
7. 
   : d# p: S" f5 s0 y) M
8. GUI_POINT aMagnifiedPoints[GUI_COUNTOF(aPoints)];
   0 [8 l6 A5 C" _4 \6 B' I" \
9. 
   3 U4 Z3 ~, k8 S+ }" K  ~  ?
10. void Sample(void) {
    6 \" N/ F+ m3 w$ _( w: b; ]: q
11.     int Mag, y = 0, Count = 4;
    " w* w$ f% o/ p% U! D$ S$ J( h" F
12.     GUI_Clear();
    
13.     GUI_SetColor(GUI_GREEN);
    ; d0 j0 a9 A- P" G7 Q3 x. w  e/ K
14.     for (Mag = 1; Mag <= 4; Mag *= 2, Count /= 2) {
    " P! h3 X( L# c) T
15.         int i, x = 0;
    $ Y' D9 [5 c. e% O* F
16.         GUI_MagnifyPolygon(aMagnifiedPoints, aPoints, GUI_COUNTOF(aPoints), Mag);
    
17.         for (i = Count; i > 0; i--, x += 40 * Mag) {
    5 D. D. J- |1 A
18.             GUI_FillPolygon(aMagnifiedPoints, GUI_COUNTOF(aPoints), x, y);
    ) j! F$ F' G+ c, k
19.         }
    
20.         y += 20 * Mag;
    ' o- H, @2 h4 d1 |' q, }
21.     }
    ! f  \2 x) K8 d( v1 p3 @( {
22. }
    
23. void MainTask(void)
    
24. {
    
25.     GUI_Init();
    
26.     Sample();
    
27.     while(1)
    
28.     {
      X7 ~" U$ o! y- H- i% g7 {
29.         GUI_Delay(100);
    : x) m! _0 z* \4 R% ?" H
30.     }
    ' o# g# s$ X& p8 j; t( Z
31. }

复制代码

实际显示效果如下：

10.1.3      例子三

    这个例子是官方提供的一个例子，具体文件如下：

7 a: S$ v4 W5 I3 Y显示效果如下：
9 F! g! c$ y. G& I

5 I# i2 ]- h0 y; g

多谢分享。

10.2  绘制圆

1.    GUI_DrawCircle()
8 m. S2 B  Z' |5 u" g, a& ]    在当前窗口中的指定位置绘制指定尺寸的圆的轮廓。此例程无法处理大于180的半径，因为它使用整数计算，否则将导致溢出。不过，对于大多数嵌入式应用程序而言，这不是问题，因为直径为360的圆比显示器还要大。

下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   
2. 
   
3. void ShowCircles(void)
   & p& A; I2 @; V+ o$ l1 n
4. {
   
5.     int i;
   # n* J- O6 o9 d, ~+ J  T1 O
6.     for (i=10; i<50; i += 3)
   7 Z5 {/ ~! S/ u; [/ S' F( Q
7.     GUI_DrawCircle(120, 60, i);
   2 R9 z7 i* M. E9 r) Q, [5 X
8. }
   5 `) J* a/ J4 S$ _+ U
9. void MainTask(void)
   
10. {
    + F8 @  E* x1 I; p* h1 d
11.     GUI_Init();
    
12.     ShowCircles();
    ' }! \6 z( b- c2 o
13.     while(1)
    
14.     {
    / N" Q& Q9 }0 c, ^$ U2 ?4 C
15.         GUI_Delay(100);
    # t* d/ w7 W- N  M/ I% U6 k' F
16.     }
    
17. }

复制代码

实际显示效果如下：

                              

10.3  绘制椭圆

1.    GUI_DrawEllipse()

    在当前窗口中的指定位置绘制指定尺寸的椭圆的轮廓。

    此例程无法处理大于180的rx/ry参数，因为它使用整数计算，否则将导致溢出。

2.    GUI_FillEllipse()

    在当前窗口中的指定位置绘制指定尺寸的填充的椭圆。此例程无法处理大于180的rx/ry参数。

下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   
2. 
   
3. void MainTask(void)
   % c1 E5 H. v6 x7 u) i4 a1 r7 ?7 y
4. {
   
5.     GUI_Init();   
   ! {7 [5 V/ v  G# p' O5 W2 [
6.     GUI_SetColor(0xff);  
   5 @  z  s: r5 x& \/ L# I
7.     GUI_FillEllipse(100, 150, 50, 70);
   
8.     GUI_SetColor(0x0);   
   
9.     GUI_DrawEllipse(100, 150, 50, 70);
   6 h- a  u! v' W, u+ b0 a6 ^+ T+ @
10.     GUI_SetColor(0x000000);   
    
11.     GUI_FillEllipse(100, 150, 10, 50);
    - x) L: S$ ?5 |# _# Y& i" L
12.     while(1)   
    
13.     {
    
14.         GUI_Delay(100);   
    
15.     }
    0 d- @  [  g0 U
16. }

复制代码

实际现象效果如下：

4 u) Q2 o+ {6 j5 \$ H

10.4  绘制弧线

1.    GUI_DrawArc()

    在当前窗口中的指定位置绘制指定尺寸的弧线。弧线是圆轮廓的一部分。当前未使用ry参数，而使用rx参数代替。GUI_DrawArc()使用浮点库。它无法处理大于180的rx/ry参数，因为它使用整数计算，否则将导致溢出。

下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   7 P, }4 l# |8 ~  ^/ O
2. #include "math.h"
   
3. #include "stdio.h"
   
4. 
   . r9 ~" t# p: g  j7 L" \. D; W; B
5. void DrawArcScale(void)
   
6. {
   1 v1 T4 J8 u8 L
7.     int x0 = 160;
   5 U0 \' b- x8 ^  K
8.     int y0 = 180;
   / A1 l4 Q+ N8 N% k# v/ c
9.     int i;
   
10.     char ac[4];
    % P# K9 w6 f/ z+ |0 N% a/ ~- a
11.     GUI_SetBkColor(GUI_WHITE);
    
12.     GUI_Clear();
    3 W$ q* _( V9 p5 h0 O
13.     GUI_SetPenSize( 5 );
    - U, G7 k6 L( k7 E2 |
14.     GUI_SetTextMode(GUI_TM_TRANS);
    
15.     GUI_SetFont(&GUI_FontComic18B_ASCII);
    3 p4 @+ c% L; \; J9 t8 y$ i
16.     GUI_SetColor(GUI_BLACK);
    
17.     GUI_DrawArc( x0,y0,150, 150,-30, 210 );
    
18.     GUI_Delay(1000);
    6 A0 U! {7 N, @+ R/ _. m
19. 
    ) n" \; n6 H% X+ Y$ ], _
20. 
    ! r  G* @7 G/ F8 j9 q7 c
21.     for (i=0; i<= 23; i++) {
    
22.         float a = (-30+i*10)*3.1415926/180;
    , s) ^  W+ L/ k* i6 ]
23.         int x = -141*cos(a)+x0;
    
24.         int y = -141*sin(a)+y0;
    
25. 
    7 z8 c, E* R3 w7 u9 j; Y
26. 
    
27.         if (i%2 == 0)
    $ C( N; c1 b" a
28.         GUI_SetPenSize( 5 );
    
29.         else
    
30.         GUI_SetPenSize( 4 );
    
31. 
    
32.         GUI_DrawPoint(x,y);
    5 m. M& f2 y9 Q# l
33.         if (i%2 == 0) {
    
34.             x = -123*cos(a)+x0;
    
35.             y = -130*sin(a)+y0;
    8 b! t4 s( @( Y0 ]; N
36.             sprintf(ac, "%d", 10*i);
    
37.             GUI_SetTextAlign(GUI_TA_VCENTER);
    
38.             GUI_DispStringHCenterAt(ac,x,y);
    
39.         }
    & D% R: s% O! k
40.     }
    
41. }
    9 Q; @; K- d2 r* E5 {
42. 
    
43. void MainTask(void)
    
44. {
    
45.     GUI_Init();
    + ]9 a5 D4 [8 S) O
46.     DrawArcScale();
    , V: _4 G0 c6 N  P8 F' V, K, `
47.     while(1)
    - [2 a" B" J) p- X
48.     {
    
49.         GUI_Delay(100);
    
50.     }
    : t! u- ^; ]9 G! Y
51. }

复制代码

实际显示效果如下：

                              

10.5  绘制曲线

    这个比较有代表意义，后面会单独的开一期专门的将这个函数，现在只是提供一个基本的例子。

1.    GUI_DrawGraph()

    该函数首先设置到使用x0、y0和给定数组的第一个Y值所指定位置的直线光标。然后，将开始绘制到x0 + 1、y0 + *(paY + 1)、x0 + 2、y0 + *(paY + 2)等位置的线

下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   
2. #include <stdlib.h>
   
3. 
   
4. I16 aY[100];
   ! K4 u2 R% n$ {# h, a, O5 b# p
5. 
   
6. void MainTask(void)
   
7. {   
   ( f. }. d* m  y% B$ Y2 U! u7 {
8.     int i;
   
9.     GUI_Init();
   9 T3 a7 M: j, O% v8 m" e
10.     for (i = 0; i < GUI_COUNTOF(aY); i++)
    
11.      {
    ' G& p( _& d- e4 B9 G# t* X
12.         aY[i] = rand() % 50;
    / Q* K! s' L6 @
13.     }
    & P  C/ _& V/ a8 g! R
14.     GUI_DrawGraph(aY, GUI_COUNTOF(aY), 0, 0);
    
15.     while(1)
    . t* [1 r# w: i, |5 H
16.     {
    
17.         GUI_Delay(100);
    ( y5 t  X! k. |9 [- S2 w6 X- c
18.     }
    ! }/ `; Q6 n( H# T! r
19. }

复制代码

实际显示效果如下：

( G7 V5 i7 M$ |: g# L9 W

10.6  绘制饼图

1.    GUI_DrawPie()

    绘制圆形扇区。

下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
   # D3 |, v, G/ r% i
2. 
   
3. int i, a0, a1;
   8 R; `8 k" u2 S+ Z* B& v2 ~: Q
4. const unsigned aValues[] = { 100, 135, 190, 240, 340, 360};
   ; R6 o$ j- O8 D7 U
5. const GUI_COLOR aColors[] = { GUI_BLUE, GUI_GREEN, GUI_RED,
   
6. GUI_CYAN, GUI_MAGENTA, GUI_YELLOW };
   " W8 G9 e) Z  A4 u
7. 
   
8. 
   
9. void MainTask(void)
   : o$ L' I  t; v  y
10. {   
    
11.     GUI_Init();
    
12.     for (i = 0; i < GUI_COUNTOF(aValues); i++) {
    
13.         a0 = (i == 0) ?0 :aValues[i - 1];
    % r, p3 \: E3 B' W1 s# b4 Y8 ]
14.         a1 = aValues[i];
    + X0 n' F: k& p$ F  g5 U" c
15.         GUI_SetColor(aColors[i]);
    0 d% L) i- \. x6 f6 A' o5 ^3 b
16.         GUI_DrawPie(100, 100, 50, a0, a1, 0);
    
17.     }
    " L: ?5 F- T6 @+ H  A& X6 R
18.     while(1)
    3 ~0 [$ W8 \$ L  i( e* l/ y0 r
19.     {
    
20.         GUI_Delay(100);
    
21.     }
    
22. }

复制代码

实际显示效果如下：

                              

10.7  实验总结

    关于2-D图形库的绘图部分就跟大家讲这么多，还是那句话，多多练习，熟能生巧。