微波EDA网，见证研发工程师的成长！
首页 > 研发问答 > 嵌入式设计讨论 > MCU和单片机设计讨论 > 第10章 2-D图形库之绘制图形

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

时间：10-02 整理：3721RD 点击：

第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. }

复制代码


实际现象效果如下：





10.4 绘制弧线

1. GUI_DrawArc()

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

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

  1. #include "GUI.h"
  2. #include "math.h"
  3. #include "stdio.h"

  5. void DrawArcScale(void)
  6. {
  7. int x0 = 160;
  8. int y0 = 180;
  9. int i;
  10. char ac[4];
  11. GUI_SetBkColor(GUI_WHITE);
  12. GUI_Clear();
  13. GUI_SetPenSize( 5 );
  14. GUI_SetTextMode(GUI_TM_TRANS);
  15. GUI_SetFont(&GUI_FontComic18B_ASCII);
  16. GUI_SetColor(GUI_BLACK);
  17. GUI_DrawArc( x0,y0,150, 150,-30, 210 );
  18. GUI_Delay(1000);


  21. for (i=0; i<= 23; i++) {
  22. float a = (-30+i*10)*3.1415926/180;
  23. int x = -141*cos(a)+x0;
  24. int y = -141*sin(a)+y0;


  27. if (i%2 == 0)
  28. GUI_SetPenSize( 5 );
  29. else
  30. GUI_SetPenSize( 4 );

  32. GUI_DrawPoint(x,y);
  33. if (i%2 == 0) {
  34. x = -123*cos(a)+x0;
  35. y = -130*sin(a)+y0;
  36. sprintf(ac, "%d", 10*i);
  37. GUI_SetTextAlign(GUI_TA_VCENTER);
  38. GUI_DispStringHCenterAt(ac,x,y);
  39. }
  40. }
  41. }

  43. void MainTask(void)
  44. {
  45. GUI_Init();
  46. DrawArcScale();
  47. while(1)
  48. {
  49. GUI_Delay(100);
  50. }
  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>

  4. I16 aY[100];

  6. void MainTask(void)
  7. {
  8. int i;
  9. GUI_Init();
  10. for (i = 0; i < GUI_COUNTOF(aY); i++)
  11. {
  12. aY[i] = rand() % 50;
  13. }
  14. GUI_DrawGraph(aY, GUI_COUNTOF(aY), 0, 0);
  15. while(1)
  16. {
  17. GUI_Delay(100);
  18. }
  19. }

复制代码


实际显示效果如下：





10.6 绘制饼图

1. GUI_DrawPie()

    绘制圆形扇区。

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

  1. #include "GUI.h"

  3. int i, a0, a1;
  4. const unsigned aValues[] = { 100, 135, 190, 240, 340, 360};
  5. const GUI_COLOR aColors[] = { GUI_BLUE, GUI_GREEN, GUI_RED,
  6. GUI_CYAN, GUI_MAGENTA, GUI_YELLOW };


  9. void MainTask(void)
  10. {
  11. GUI_Init();
  12. for (i = 0; i < GUI_COUNTOF(aValues); i++) {
  13. a0 = (i == 0) ?0 :aValues[i - 1];
  14. a1 = aValues[i];
  15. GUI_SetColor(aColors[i]);
  16. GUI_DrawPie(100, 100, 50, a0, a1, 0);
  17. }
  18. while(1)
  19. {
  20. GUI_Delay(100);
  21. }
  22. }

复制代码


实际显示效果如下：



10.7 实验总结

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


我去了，你是?

谢谢分享.。

上一篇：单片机串口输出MMA7361角度值 求大神进来帮看看哪里错了~~
下一篇：串口线缆改无线通信

ucos-iii ucgui 相关文章：

栏目分类
热门文章

Copyright © 2017-2020 微波EDA网 版权所有

网站地图

Top