【emWin实战教程V2.0】第14章 2D图形库之绘制

席萌0209

完整65章+12章附件教程下载地址：
http://www.armbbs.cn/forum.php?mod=viewthread&tid=19834

第14章      2D图形库之绘制图形

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

    学习本章节，务必保证已经学习了第6章和第8章。本章节提供的模拟器演示代码都是可以在模拟器上面运行的，使用方法是将GUIDEMO_Start.c文件里面的所有内容删掉并将本章节提供的代码复制到GUIDEMO_Start.c文件即可运行。

14.1初学者重要提示
14.2绘制多边形
14.3绘制圆
14.4显示屏绘制的圆为什么不圆
14.4绘制椭圆
14.5绘制弧线
14.6绘制线图
14.7绘制饼图
14.8 总结



14.1  初学者重要提示

1、2D函数的图形绘制就是一些API函数，从应用上来讲，基本没有什么难度，初学者多做练习，调用几次就熟练了。

2、2D绘图的所有API函数在emWin手册中都有讲解，下图是中文版手册里面API函数的位置

    下图是英文版手册里面API函数的位置：

席萌0209

14.2 绘制多边形


    当前emWin支持的多边形函数主要有以下5个：

    下面我们通过如下三个实例来讲解这几个API函数的用法。

14.2.1    例子一


    这个例子主要涉及到以下三个函数：
（1）void GUI_DrawPolygon(constGUI_POINT * pPoint, int NumPoints, int x, int y)
     根据用户设置的坐标点（x，y）位置，将点列表pPoint中的NumPoints个坐标点连接，最终绘制出一个闭合的多边形。
（2）voidGUI_EnlargePolygon(GUI_POINT * pDest, const GUI_POINT * pSrc, int NumPoints,int Len)
     将点列表pSrc中的NumPoints个坐标点按指定的像素个数Len全方位扩展，并将最终结果赋值给新的点列表pDest，这个新的点列表就是扩展后的多边形坐标点。
（3）voidGUI_FillPolygon(const GUI_POINT * pPoint, int NumPoints, int x, int y)
     根据用户设置的坐标点（x，y）位置，将点列表pPoint中的NumPoints个坐标点连接，最终绘制出一个填充的多边形。
下面是在模拟器上实际运行的例子：

1. #include "GUI.h"
4. /* 图形的原始坐标点 */
5. const GUI_POINT aPoints[] = {
6. { 40, 20},
7. { 0, 20},
8. { 20, 0}
9. };
11. /* 用于存储放大后的坐标点 */
12. GUI_POINT aEnlargedPoints[GUI_COUNTOF(aPoints)];
14. void Sample(void) {
15.     int i;
17.      /* 清屏 */
18.     GUI_Clear();
20.     /* 设置绘图模式 */
21.     GUI_SetDrawMode(GUI_DM_XOR);
22.    
23.     /* 绘制多边形 */
24.     GUI_FillPolygon(aPoints,              /* 指向要显示和填充的多边形 */
25.                     GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
26.                     140,                  /* 原点的X位置 */
27.                     110);                 /* 原点的Y位置 */
29.     for (i = 1; i < 10; i++) {
30.         GUI_EnlargePolygon(aEnlargedPoints,      /* 指向目标多边形 */
31.                            aPoints,              /* 指向源多边形 */
32.                            GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
33.                            i * 5);               /* 扩展多边形的长度 （像素） */
35.         /* 绘制放大后的多边形 */
36.         GUI_FillPolygon(aEnlargedPoints, GUI_COUNTOF(aPoints), 140, 110);
37.     }
38. }
40. /*********************************************************************
41. *
42. *       MainTask
43. */
44. void MainTask(void) {
46.   /* emWin初始化 */
47.   GUI_Init();
49.   /* 调用测试函数 */
50.   Sample();
52.   while (1)
53.   {
54.        GUI_Delay(10);
55.   }
56. }

复制代码

显示效果如下：

14.2.2  例子二


voidGUI_MagnifyPolygon(GUI_POINT * pDest, const GUI_POINT * pSrc, int NumPoints,int Mag);

    此函数可以按照用户设置的放大系数Mag放大多边形。另外请注意，扩展和放大多边形之间的区别，比如调用函数GUI_EnlargePolygon()（参数Len= 1）是将多边形的所有边扩展1像素，而调用GUI_MagnifyPolygon()（参数Mag= 1）则没有效果。

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

1. #include "GUI.h"
4. /* 图形的原始坐标点 */
5. const GUI_POINT aPoints[] = {
6. { 0, 20},
7. { 40, 20},
8. { 20, 0}
9. };
11. /* 用于存储放大后的坐标点 */
12. GUI_POINT aMagnifiedPoints[GUI_COUNTOF(aPoints)];
14. void Sample(void) {
15.     int Mag, y = 0, Count = 4;
17.      /* 清屏 */
18.     GUI_Clear();
19.    
20.      /* 设置前景色，即所绘制图形的颜色 */
21.     GUI_SetColor(GUI_GREEN);
23.     for (Mag = 1; Mag <= 4; Mag *= 2, Count /= 2) {
24.         int i, x = 0;
26.          /* 放大多边形 */
27.         GUI_MagnifyPolygon(aMagnifiedPoints, aPoints, GUI_COUNTOF(aPoints), Mag);
29.          /* 绘制填充的多边形 */
30.         for (i = Count; i > 0; i--, x += 40 * Mag) {
31.             GUI_FillPolygon(aMagnifiedPoints, GUI_COUNTOF(aPoints), x, y);
32.         }
34.         y += 20 * Mag;
35.     }
36. }
39. /*********************************************************************
40. *
41. *       MainTask
42. */
43. void MainTask(void) {
45.   /* emWin初始化 */
46.   GUI_Init();
48.   /* 调用测试函数 */
49.   Sample();
51.   while (1)
52.   {
53.        GUI_Delay(10);
54.   }
55. }

复制代码

实际显示效果如下：

14.2.3  例子三


    这个多边形的例子是官方提供的，例子所在的位置如下：

显示效果如下：

指出官方例子的所在位置和演示现象是为了方便用户以后做项目来参考。

席萌0209

14.3   绘制圆


voidGUI_DrawCircle(int x0, int y0, int r);
    在当前窗口中的指定位置（x0， y0）绘制半径为r的圆圈。
下面是在模拟器上面实际运行的例子：

1. #include "GUI.h"
3. void ShowCircles(void)
4. {
5.     int i;
7.      /* 绘制圆圈 */
8.     for (i=10; i<50; i += 3)
9.     GUI_DrawCircle(120, 60, i);
10. }
12. /*********************************************************************
13. *
14. *       MainTask
15. */
16. void MainTask(void) {
18.   /* emWin初始化 */
19.   GUI_Init();
21.   /* 调用测试函数 */
22.   ShowCircles();
24.   while (1)
25.   {
26.        GUI_Delay(10);
27.   }
28. }

复制代码

实际显示效果如下：

席萌0209

14.4   显示屏绘制的圆为什么不圆

    这个问题经常有初学者会问，比如这个帖子：http://www.armbbs.cn/forum.php?mod=viewthread&tid=3899 。用户在显示屏上面绘制圆圈，显示出来的效果是这个样子的：

给人的感觉是圆圈不够圆，实际上是因为显示屏的每个像素点的长度和宽度不是1:1的，从而造成显示出来的效果有点扁。

席萌0209

14.5   绘制椭圆



（1）void GUI_DrawEllipse(int x0, int y0, int rx, int ry)
    在当前窗口中的指定位置（x0，y0）绘制x轴方向半径为rx，y轴方向半径为ry的椭圆。
（2）void GUI_FillEllipse(int x0, int y0, int rx, int ry)
    在当前窗口中的指定位置（x0，y0）绘制x轴方向半径为rx，y轴方向半径为ry的填充的椭圆。
下面是在模拟器上面实际运行的例子：

1. #include "GUI.h"
4. /*********************************************************************
5. *
6. *       MainTask
7. */
8. void MainTask(void) {
10.   /* emWin初始化 */
11.   GUI_Init();
13.   /* 绘制填充的椭圆 */
14.   GUI_SetColor(GUI_RED);  
15.   GUI_FillEllipse(100, 100, 50, 70);
17.   /* 绘制椭圆 */
18.   GUI_SetColor(GUI_GREEN);   
19.   GUI_DrawEllipse(100, 100, 60, 80);
21.    /* 绘制填充的椭圆 */
22.   GUI_SetColor(GUI_BLACK);   
23.   GUI_FillEllipse(100, 100, 10, 50);
25.   while (1)
26.   {
27.        GUI_Delay(10);
28.   }
30. }

复制代码

实际现象效果如下：

席萌0209

14.6 绘制弧线


voidGUI_DrawArc(int xCenter, int yCenter, int rx, int ry, int a0, int a1)
    在当前窗口中的指定位置（xCenter，yCenter）绘制x轴方向半径为rx，y轴方向半径为ry，起始角度为a0，结束角度为a1的弧线。
    注意，当前参数ry未使用，是以rx代替的，也就是说绘制的弧线是圆弧。
下面是在模拟器上面实际运行的例子：

1. #include "GUI.h"
2. #include "math.h"
3. #include "stdio.h"
6. void DrawArcScale(void)
7. {
8.     int x0 = 160;
9.     int y0 = 160;
10.     int i;
11.     char ac[4];
12.    
13.      /* 设置背景色为白色并清屏 */
14.     GUI_SetBkColor(GUI_WHITE);
15.     GUI_Clear();
16.    
17.      /* 设置画笔大小 */
18.     GUI_SetPenSize( 5 );
20.      /* 设置文本模式，字体和前景色 */
21.     GUI_SetTextMode(GUI_TM_TRANS);
22.     GUI_SetFont(&GUI_FontComic18B_ASCII);
23.     GUI_SetColor(GUI_BLACK);
25.      /* 绘制圆弧 */
26.     GUI_DrawArc( x0,y0,150, 150,-30, 210 );
28.      /* 在圆弧上面显示刻度和相应刻度的数值 */
29.     for (i=0; i<= 23; i++) {
30.         float a = (-30+i*10)*3.1415926/180;
31.         int x = -141*cos(a)+x0;
32.         int y = -141*sin(a)+y0;
34.         if (i%2 == 0)
35.         GUI_SetPenSize( 5 );
36.         else
37.         GUI_SetPenSize( 4 );
39.         GUI_DrawPoint(x,y);
40.         if (i%2 == 0) {
41.             x = -123*cos(a)+x0;
42.             y = -130*sin(a)+y0;
43.             sprintf(ac, "%d", 10*i);
44.             GUI_SetTextAlign(GUI_TA_VCENTER);
45.             GUI_DispStringHCenterAt(ac,x,y);
46.         }
47.     }
48. }
50. /*********************************************************************
51. *
52. *       MainTask
53. */
54. void MainTask(void) {
56.    /* 初始化emWin */
57.    GUI_Init();
59.    /* 绘制饼图 */
60.    DrawArcScale();
62.    while (1)
63.    {
64.        GUI_Delay(10);
65.    }
67. }

复制代码

实际显示效果如下：

席萌0209

14.7 绘制曲线


voidGUI_DrawGraph(I16 * paY, int NumPoints, int x0, int y0)
    根据用户设置的起始坐标（x0，y0），依次将NumPoints个点坐标
（x0+0,  y0+*(paY +0))）
（x0+1,  y0+*(paY +1))）
（x0+2,  y0+*(paY +2))）
（x0+3,  y0+*(paY +3))）
…………
（x0+NumPoints-2,  y0+*(paY+NumPoints-2))）
（x0+NumPoints-1,  y0+*(paY+NumPoints-1))）
     连接起来绘制成曲线。
下面是在模拟器上面实际运行的例子

1. #include "GUI.h"
2. #include <stdlib.h>
5. I16 aY[200];
7. /*********************************************************************
8. *
9. *       MainTask
10. */
11. void MainTask(void) {
12.   int i;
14.   /* 初始化emWin */
15.   GUI_Init();
17.   /* 获取随机数 */
18.   for (i = 0; i < GUI_COUNTOF(aY); i++)
19.   {
20.      aY[i] = rand() % 50;
21.   }
23.   /* 绘制波形 */
24.   GUI_SetColor(GUI_YELLOW);
25.   GUI_DrawGraph(aY, GUI_COUNTOF(aY), 0, 0);
27.   while (1)
28.   {
29.        GUI_Delay(10);
30.   }
32. }

复制代码

实际显示效果如下：

席萌0209

14.8   绘制饼图

voidGUI_DrawPie(int x0, int y0, int r, int a0, int a1, int Type)

    绘制圆形扇区。

    在当前窗口中的指定位置（x0，y0）绘制以r为半径，起始角度为a0，结束角度为a1的圆形扇区。

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

1. #include "GUI.h"
4. /* 变量 */
5. int i, a0, a1;
6. const unsigned aValues[] = { 100, 135, 190, 240, 340, 360};
7. const GUI_COLOR aColors[] = { GUI_BLUE, GUI_GREEN, GUI_RED,
8.                               GUI_CYAN, GUI_MAGENTA, GUI_YELLOW };
11. /*********************************************************************
12. *
13. *       MainTask
14. */
15. void MainTask(void) {
16.   int i;
18.   /* 初始化emWin */
19.   GUI_Init();
21.   /* 绘制饼图 */
22.   for (i = 0; i < GUI_COUNTOF(aValues); i++) {
23.      a0 = (i == 0) ?0 :aValues[i - 1];
24.      a1 = aValues[i];
25.      GUI_SetColor(aColors[i]);
26.      GUI_DrawPie(100, 100, 50, a0, a1, 0);
27.   }
29.   while (1)
30.   {
31.        GUI_Delay(10);
32.   }
34. }

复制代码

实际显示效果如下：

14.9 总结

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