你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

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

[复制链接]
baiyongbin2009 发布时间:2015-1-13 16:49
特别说明:完整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.png

10.1.1      例子一
1.    GUI_DrawPolygon():
    在当前窗口中绘制按点列表定义的多边形的轮廓,通过将终点连接到起点,绘制的多边形将自动闭合。
2.    GUI_EnlargePolygon():
    按指定的长度 (像素)全方位扩展多边形,确保点的目标数组等于或大于源数组。
3.    GUI_FillPolygon()
    在当前窗口中绘制按点列表定义的填充的多边形,通过将终点连接到起点,绘制的多边形将自动闭合。终点无需接触到多边形的轮廓。通过为多边形的各个y位置绘制一条或多条水平直线,可对多边形进行渲染。默认情况下,为一个y位置绘制水平直线使用的最大点数量为12(意味着每个y位置需要6条直线)。如果需要增加此值,可使用宏GUI_FP_MAXCOUNT设置最大点数量。
    下面是在模拟器上面实际运行的例子
  1. #include "GUI.h"

  2. /* 图形的原始坐标点 */
  3. const GUI_POINT aPoints[] = {
  4. { 40, 20},
  5. { 0, 20},
  6. { 20, 0}
  7. };

  8. /* 用于存储放大后的坐标点 */
  9. GUI_POINT aEnlargedPoints[GUI_COUNTOF(aPoints)];

  10. void Sample(void) {
  11.     int i;
  12.     GUI_Clear();
  13.     /* 设置绘图模式 */
  14.     GUI_SetDrawMode(GUI_DM_XOR);
  15.     /* 绘制多边形 */
  16.     GUI_FillPolygon(aPoints,              /* 指向要显示和填充的多边形 */
  17.                     GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
  18.                     140,                  /* 原点的X位置 */
  19.                     110);                 /* 原点的Y位置 */

  20.     for (i = 1; i < 10; i++) {
  21.         GUI_EnlargePolygon(aEnlargedPoints,                      /* 指向目标多边形 */
  22.                                            aPoints,              /* 指向源多边形 */
  23.                                            GUI_COUNTOF(aPoints), /* 点列表中指定的点数量 */
  24.                                             i * 5);              /* 扩展多边形的长度 (像素) */
  25.         /* 绘制放大后的多边形 */
  26.         GUI_FillPolygon(aEnlargedPoints, GUI_COUNTOF(aPoints), 140, 110);
  27.     }
  28. }

  29. void MainTask(void)
  30. {
  31.     GUI_Init();
  32.     Sample();
  33.     while(1)
  34.     {
  35.         GUI_Delay(100);
  36.     }
  37. }
复制代码
显示效果如下:
10.2.png

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

  7. GUI_POINT aMagnifiedPoints[GUI_COUNTOF(aPoints)];

  8. void Sample(void) {
  9.     int Mag, y = 0, Count = 4;
  10.     GUI_Clear();
  11.     GUI_SetColor(GUI_GREEN);
  12.     for (Mag = 1; Mag <= 4; Mag *= 2, Count /= 2) {
  13.         int i, x = 0;
  14.         GUI_MagnifyPolygon(aMagnifiedPoints, aPoints, GUI_COUNTOF(aPoints), Mag);
  15.         for (i = Count; i > 0; i--, x += 40 * Mag) {
  16.             GUI_FillPolygon(aMagnifiedPoints, GUI_COUNTOF(aPoints), x, y);
  17.         }
  18.         y += 20 * Mag;
  19.     }
  20. }
  21. void MainTask(void)
  22. {
  23.     GUI_Init();
  24.     Sample();
  25.     while(1)
  26.     {
  27.         GUI_Delay(100);
  28.     }
  29. }
复制代码
实际显示效果如下:
10.3.png

10.1.3      例子三
    这个例子是官方提供的一个例子,具体文件如下:
10.4.jpg

显示效果如下:
10.5.png

10.6.png

10.7.png

收藏 评论4 发布时间:2015-1-13 16:49

举报

4个回答
亚古捷斯 回答时间:2015-1-13 16:51:23
多谢分享。
baiyongbin2009 回答时间:2015-1-13 16:51:30
10.2  绘制圆
1.    GUI_DrawCircle()
    在当前窗口中的指定位置绘制指定尺寸的圆的轮廓。此例程无法处理大于180的半径,因为它使用整数计算,否则将导致溢出。不过,对于大多数嵌入式应用程序而言,这不是问题,因为直径为360的圆比显示器还要大。
下面是在模拟器上面实际运行的例子
  1. #include "GUI.h"

  2. void ShowCircles(void)
  3. {
  4.     int i;
  5.     for (i=10; i<50; i += 3)
  6.     GUI_DrawCircle(120, 60, i);
  7. }
  8. void MainTask(void)
  9. {
  10.     GUI_Init();
  11.     ShowCircles();
  12.     while(1)
  13.     {
  14.         GUI_Delay(100);
  15.     }
  16. }
复制代码
实际显示效果如下:
10.8.png
                              
10.3  绘制椭圆
1.    GUI_DrawEllipse()
    在当前窗口中的指定位置绘制指定尺寸的椭圆的轮廓。
    此例程无法处理大于180的rx/ry参数,因为它使用整数计算,否则将导致溢出。
2.    GUI_FillEllipse()
    在当前窗口中的指定位置绘制指定尺寸的填充的椭圆。此例程无法处理大于180的rx/ry参数。
下面是在模拟器上面实际运行的例子
  1. #include "GUI.h"

  2. void MainTask(void)
  3. {
  4.     GUI_Init();   
  5.     GUI_SetColor(0xff);  
  6.     GUI_FillEllipse(100, 150, 50, 70);
  7.     GUI_SetColor(0x0);   
  8.     GUI_DrawEllipse(100, 150, 50, 70);
  9.     GUI_SetColor(0x000000);   
  10.     GUI_FillEllipse(100, 150, 10, 50);
  11.     while(1)   
  12.     {
  13.         GUI_Delay(100);   
  14.     }
  15. }
复制代码
实际现象效果如下:
10.9.png

baiyongbin2009 回答时间:2015-1-13 16:53:23
10.4  绘制弧线
1.    GUI_DrawArc()
    在当前窗口中的指定位置绘制指定尺寸的弧线。弧线是圆轮廓的一部分。当前未使用ry参数,而使用rx参数代替。GUI_DrawArc()使用浮点库。它无法处理大于180的rx/ry参数,因为它使用整数计算,否则将导致溢出。
下面是在模拟器上面实际运行的例子
  1. #include "GUI.h"
  2. #include "math.h"
  3. #include "stdio.h"

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


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


  22.         if (i%2 == 0)
  23.         GUI_SetPenSize( 5 );
  24.         else
  25.         GUI_SetPenSize( 4 );

  26.         GUI_DrawPoint(x,y);
  27.         if (i%2 == 0) {
  28.             x = -123*cos(a)+x0;
  29.             y = -130*sin(a)+y0;
  30.             sprintf(ac, "%d", 10*i);
  31.             GUI_SetTextAlign(GUI_TA_VCENTER);
  32.             GUI_DispStringHCenterAt(ac,x,y);
  33.         }
  34.     }
  35. }

  36. void MainTask(void)
  37. {
  38.     GUI_Init();
  39.     DrawArcScale();
  40.     while(1)
  41.     {
  42.         GUI_Delay(100);
  43.     }
  44. }
复制代码
实际显示效果如下:
10.10.png
                              
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. I16 aY[100];

  4. void MainTask(void)
  5. {   
  6.     int i;
  7.     GUI_Init();
  8.     for (i = 0; i < GUI_COUNTOF(aY); i++)
  9.      {
  10.         aY[i] = rand() % 50;
  11.     }
  12.     GUI_DrawGraph(aY, GUI_COUNTOF(aY), 0, 0);
  13.     while(1)
  14.     {
  15.         GUI_Delay(100);
  16.     }
  17. }
复制代码
实际显示效果如下:
10.11.png

baiyongbin2009 回答时间:2015-1-13 16:54:36
10.6  绘制饼图
1.    GUI_DrawPie()
    绘制圆形扇区。
下面是在模拟器上面实际运行的例子
  1. #include "GUI.h"

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


  6. void MainTask(void)
  7. {   
  8.     GUI_Init();
  9.     for (i = 0; i < GUI_COUNTOF(aValues); i++) {
  10.         a0 = (i == 0) ?0 :aValues[i - 1];
  11.         a1 = aValues[i];
  12.         GUI_SetColor(aColors[i]);
  13.         GUI_DrawPie(100, 100, 50, a0, a1, 0);
  14.     }
  15.     while(1)
  16.     {
  17.         GUI_Delay(100);
  18.     }
  19. }
复制代码
实际显示效果如下:
10.12.png
                              
10.7  实验总结
    关于2-D图形库的绘图部分就跟大家讲这么多,还是那句话,多多练习,熟能生巧。

所属标签

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版