【STemWin教程】第10章 2-D图形库之绘制图形

席萌0209

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

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

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

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. /* 图形的原始坐标点 */
4. const GUI_POINT aPoints[] = {
5. { 40, 20},
6. { 0, 20},
7. { 20, 0}
8. };
10. /* 用于存储放大后的坐标点 */
11. GUI_POINT aEnlargedPoints[GUI_COUNTOF(aPoints)];
13. void Sample(void) {
14.     int i;
15.     GUI_Clear();
16.     /* 设置绘图模式 */
17.     GUI_SetDrawMode(GUI_DM_XOR);
18.     /* 绘制多边形 */
19.     GUI_FillPolygon(aPoints,              /* 指向要显示和填充的多边形 */
20.                     GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
21.                     140,                  /* 原点的X位置 */
22.                     110);                 /* 原点的Y位置 */
24.     for (i = 1; i < 10; i++) {
25.         GUI_EnlargePolygon(aEnlargedPoints,                      /* 指向目标多边形 */
26.                                            aPoints,              /* 指向源多边形 */
27.                                            GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
28.                                             i * 5);              /* 扩展多边形的长度 （像素） */
29.         /* 绘制放大后的多边形 */
30.         GUI_FillPolygon(aEnlargedPoints, GUI_COUNTOF(aPoints), 140, 110);
31.     }
32. }
34. void MainTask(void)
35. {
36.     GUI_Init();
37.     Sample();
38.     while(1)
39.     {
40.         GUI_Delay(100);
41.     }
42. }

复制代码

显示效果如下：


10.1.2      例子二
1.    GUI_MagnifyPolygon()
    按指定系数放大多边形。确保点的目标数组等于或大于源数组。请注意扩展和放大多边形之间的区别。调用函数GUI_EnlargePolygon()（参数Len= 1）将使多边形的所有边扩展1像素，而调用GUI_MagnifyPolygon()（参数Mag= 1）则没有效果。
    下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
2. const GUI_POINT aPoints[] = {
3. { 0, 20},
4. { 40, 20},
5. { 20, 0}
6. };
8. GUI_POINT aMagnifiedPoints[GUI_COUNTOF(aPoints)];
10. void Sample(void) {
11.     int Mag, y = 0, Count = 4;
12.     GUI_Clear();
13.     GUI_SetColor(GUI_GREEN);
14.     for (Mag = 1; Mag <= 4; Mag *= 2, Count /= 2) {
15.         int i, x = 0;
16.         GUI_MagnifyPolygon(aMagnifiedPoints, aPoints, GUI_COUNTOF(aPoints), Mag);
17.         for (i = Count; i > 0; i--, x += 40 * Mag) {
18.             GUI_FillPolygon(aMagnifiedPoints, GUI_COUNTOF(aPoints), x, y);
19.         }
20.         y += 20 * Mag;
21.     }
22. }
23. void MainTask(void)
24. {
25.     GUI_Init();
26.     Sample();
27.     while(1)
28.     {
29.         GUI_Delay(100);
30.     }
31. }

复制代码

实际显示效果如下：


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



    显示效果如下：






10.2  绘制圆
1.    GUI_DrawCircle()
    在当前窗口中的指定位置绘制指定尺寸的圆的轮廓。此例程无法处理大于180的半径，因为它使用整数计算，否则将导致溢出。不过，对于大多数嵌入式应用程序而言，这不是问题，因为直径为360的圆比显示器还要大。
    下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
3. void ShowCircles(void)
4. {
5.     int i;
6.     for (i=10; i<50; i += 3)
7.     GUI_DrawCircle(120, 60, i);
8. }
9. void MainTask(void)
10. {
11.     GUI_Init();
12.     ShowCircles();
13.     while(1)
14.     {
15.         GUI_Delay(100);
16.     }
17. }

复制代码

实际显示效果如下：



10.3  绘制椭圆
1.    GUI_DrawEllipse()
    在当前窗口中的指定位置绘制指定尺寸的椭圆的轮廓。
    此例程无法处理大于180的rx/ry参数，因为它使用整数计算，否则将导致溢出。
2.    GUI_FillEllipse()
    在当前窗口中的指定位置绘制指定尺寸的填充的椭圆。此例程无法处理大于180的rx/ry参数。
    下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
3. void MainTask(void)
4. {
5.     GUI_Init();   
6.     GUI_SetColor(0xff);  
7.     GUI_FillEllipse(100, 150, 50, 70);
8.     GUI_SetColor(0x0);   
9.     GUI_DrawEllipse(100, 150, 50, 70);
10.     GUI_SetColor(0x000000);   
11.     GUI_FillEllipse(100, 150, 10, 50);
12.     while(1)   
13.     {
14.         GUI_Delay(100);   
15.     }
16. }

复制代码

实际现象效果如下：

席萌0209

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

1. [size=3]#include "GUI.h"[/size]
2. [size=3]#include "math.h"[/size]
3. [size=3]#include "stdio.h"[/size]
5. [size=3]void DrawArcScale(void)[/size]
6. [size=3]{[/size]
7. [size=3]int x0 = 160;[/size]
8. [size=3]int y0 = 180;[/size]
9. [size=3]int i;[/size]
10. [size=3]char ac[4];[/size]
11. [size=3]GUI_SetBkColor(GUI_WHITE);[/size]
12. [size=3]GUI_Clear();[/size]
13. [size=3]GUI_SetPenSize( 5 );[/size]
14. [size=3]GUI_SetTextMode(GUI_TM_TRANS);[/size]
15. [size=3]GUI_SetFont(&GUI_FontComic18B_ASCII);[/size]
16. [size=3]GUI_SetColor(GUI_BLACK);[/size]
17. [size=3]GUI_DrawArc( x0,y0,150, 150,-30, 210 );[/size]
18. [size=3]GUI_Delay(1000);[/size]
21. [size=3]for (i=0; i<= 23; i++) {[/size]
22. [size=3]float a = (-30+i*10)*3.1415926/180;[/size]
23. [size=3]int x = -141*cos(a)+x0;[/size]
24. [size=3]int y = -141*sin(a)+y0;[/size]
27. [size=3]if (i%2 == 0)[/size]
28. [size=3]GUI_SetPenSize( 5 );[/size]
29. [size=3]else[/size]
30. [size=3]GUI_SetPenSize( 4 );[/size]
32. [size=3]GUI_DrawPoint(x,y);[/size]
33. [size=3]if (i%2 == 0) {[/size]
34. [size=3]x = -123*cos(a)+x0;[/size]
35. [size=3]y = -130*sin(a)+y0;[/size]
36. [size=3]sprintf(ac, "%d", 10*i);[/size]
37. [size=3]GUI_SetTextAlign(GUI_TA_VCENTER);[/size]
38. [size=3]GUI_DispStringHCenterAt(ac,x,y);[/size]
39. [size=3]}[/size]
40. [size=3]}[/size]
41. [size=3]}[/size]
43. [size=3]void MainTask(void)[/size]
44. [size=3]{[/size]
45. [size=3]GUI_Init();[/size]
46. [size=3]DrawArcScale();[/size]
47. [size=3]while(1)[/size]
48. [size=3]{[/size]
49. [size=3]GUI_Delay(100);[/size]
50. [size=3]}[/size]
51. [size=3]}[/size]

复制代码

实际显示效果如下：



10.5  绘制曲线
这个比较有代表意义，后面会单独的开一期专门的将这个函数，现在只是提供一个基本的例子。
1.     GUI_DrawGraph()
该函数首先设置到使用x0、y0和给定数组的第一个Y值所指定位置的直线光标。然后，将开始绘制到x0 + 1、y0 + *(paY + 1)、x0 + 2、y0 + *(paY + 2)等位置的线
下面是在模拟器上面实际运行的例子

1. [size=3]#include "GUI.h"[/size]
2. [size=3]#include <stdlib.h>[/size]
4. [size=3]I16 aY[100];[/size]
6. [size=3]void MainTask(void)[/size]
7. [size=3]{[/size]
8. [size=3]int i;[/size]
9. [size=3]GUI_Init();[/size]
10. [size=3]for (i = 0; i < GUI_COUNTOF(aY); i++)[/size]
11. [size=3]{[/size]
12. [size=3]aY[i] = rand() % 50;[/size]
13. [size=3]}[/size]
14. [size=3]GUI_DrawGraph(aY, GUI_COUNTOF(aY), 0, 0);[/size]
15. [size=3]while(1)[/size]
16. [size=3]{[/size]
17. [size=3]GUI_Delay(100);[/size]
18. [size=3]}[/size]
19. [size=3]}[/size]

复制代码

实际显示效果如下：



10.6  绘制饼图
1.     GUI_DrawPie()
绘制圆形扇区。
下面是在模拟器上面实际运行的例子

1. [size=3]#include "GUI.h"[/size]
3. [size=3]int i, a0, a1;[/size]
4. [size=3]const unsigned aValues[] = { 100, 135, 190, 240, 340, 360};[/size]
5. [size=3]const GUI_COLOR aColors[] = { GUI_BLUE, GUI_GREEN, GUI_RED,[/size]
6. [size=3]GUI_CYAN, GUI_MAGENTA, GUI_YELLOW };[/size]
9. [size=3]void MainTask(void)[/size]
10. [size=3]{[/size]
11. [size=3]GUI_Init();[/size]
12. [size=3]for (i = 0; i < GUI_COUNTOF(aValues); i++) {[/size]
13. [size=3]a0 = (i == 0) ?0 :aValues[i - 1];[/size]
14. [size=3]a1 = aValues[i];[/size]
15. [size=3]GUI_SetColor(aColors[i]);[/size]
16. [size=3]GUI_DrawPie(100, 100, 50, a0, a1, 0);[/size]
17. [size=3]}[/size]
18. [size=3]while(1)[/size]
19. [size=3]{[/size]
20. [size=3]GUI_Delay(100);[/size]
21. [size=3]}[/size]
22. [size=3]}[/size]

复制代码

实际显示效果如下：



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

clarkma

[s:138]  [s:138]  [s:138]  [s:138]  [s:138]  [s:138]  [s:138]  [s:138]  [s:138]  [s:138]