【emWin实战教程V2.0】第11章 2D图形库之基本绘图

席萌0209

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

第11章      2D图形库之基本绘图

    本章节为大家讲解2D图形库的基本绘图方法，2D图形库主要包括画点，画线，绘制位图，绘制矩形，圆形，扇形，多边形等平面效果的图形。
    学习本章节，务必保证已经学习了第6章和第8章。本章节提供的模拟器演示代码都是可以在模拟器上面运行的，使用方法是将GUIDEMO_Start.c文件里面的所有内容删掉并将本章节提供的代码复制到GUIDEMO_Start.c文件即可运行。

11.1  初学者重要提示

11.2  基本的画点画线函数及其画笔大小设置

11.3 基本2D绘图

11.4 Alpha混合

11.5       总结

11.1  初学者重要提示

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

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

2、2D绘图涉及到的函数较多，初学者不需要将这些函数都掌握，会使用几个常用的函数即可。以后项目中需要用到其它函数功能了，再查阅emWin手册并了解其用法后实际测试即可。
3、2D绘图涉及到一些算法的实现，比如直线绘制，需要用到插补算法。由于emWin只有库，底层源码是无法看到的，所以用户使用的时候还是调用下API函数即可，调用API函数没什么技术含量，多试试就会用了，对于这一点，初学者要明白。
4、如果时间充裕，可以自行在模拟器上面测试几个教程中没有用到的函数练练手。

席萌0209

11.2  基本的画点画线函数及其画笔大小设置

        emWin带的2D函数功能还是比较全面的，这里我们先讲解最基本的画点画线函数及其画笔大小的设置。
画笔大小就是线的粗细，通过下面这两个函数实现设置和获取：
1、 U8 GUI_GetPenSize(void)   返回当前的画笔大小（像素）。
2、 U8 GUI_SetPenSize(U8 PenSize)    设置画笔大小（像素）。
设置画笔大小仅对以下几个2D函数有效，其余函数是无效的，这点要注意。
（1）GUI_DrawPoint()
（2）GUI_DrawLine()
（3）GUI_DrawLineRel()
（4）GUI_DrawLineTo()
（5）GUI_DrawPolyLine()
（6）GUI_DrawPolygon()
（7）GUI_DrawEllipse()
（8）GUI_DrawArc()
下面我们通过画点函数GUI_DrawLine()和画线函数GUI_DrawLine来演示实际效果，将如下代码直接复制到emWin模拟器下面就可以运行的，主要是绘制三条不同粗细的直线。

1. #include "GUI.h"
3. void MainTask(void) {
5.      /* 初始化emWin */
6.     GUI_Init();
7.    
8.     GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
9.     GUI_Clear();                /* 只有清屏了，上面设置背景颜色才能起到作用 */
10.    
12.     GUI_SetColor(GUI_RED);      /* 设置画笔颜色   */   
14.      /* 设置画笔大小为4，绘制点和直线 */
15.     GUI_SetPenSize(4);
16. GUI_DrawPoint(250, 10);
17.     GUI_DrawLine(0,             /* X起始位置      */                        
18.                  10,            /* Y起始位置      */
19.                  200,           /* X结束位置      */                 
20.                  10);           /* Y结束位置      */
22.      /* 设置画笔大小为8，绘制点和直线 */
23.     GUI_SetPenSize(8);
24. GUI_DrawPoint(250, 100);
25.     GUI_DrawLine(0, 100, 200, 100);
27.      /* 设置画笔大小为12，绘制点和直线 */
28.     GUI_SetPenSize(12);  
29. GUI_DrawPoint(250, 200);
30.     GUI_DrawLine(0, 200, 200, 200);
32.     while(1)   
33.     {
34.         GUI_Delay(10);   
35.     }
36. }

复制代码

实际显示效果如下：

席萌0209

11.3   基本2D绘图


    emWin支持的2D基本绘图函数很多，我们用以下四个2D函数为例，在模拟器上进行测试：
GUI_DrawGradientRoundedH()     绘制用水平梯度色填充的圆角矩形。
GUI_DrawRectEx()                          在当前窗口中的指定位置绘制矩形。
GUI_DrawRoundedFrame()            在当前窗口中的指定位置绘制指定宽度的圆角框。
GUI_FillRoundedRect()                   在当前窗口中的指定位置绘制填充的圆角矩形。
在模拟器上运行的代码如下：

1. #include "GUI.h"
3. void MainTask(void)
4. {
5.     GUI_RECT Rect = { 120,  /* 矩形区左上角X坐标位置 */
6.                       0,    /* 矩形区左上角Y坐标位置 */
7.                       219,  /* 矩形区右下角X坐标位置 */
8.                       99};  /* 矩形区右下角Y坐标位置 */
10.      /* 初始化emWin */
11.     GUI_Init();
12.    
13.     GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
14.     GUI_Clear();                /* 只有清屏了，上面设置背景颜色才能起到作用 */
16.      GUI_SetColor(GUI_RED);      /* 设置前景色，即设置下面2D图形的颜色 */
18.      /* 绘制梯度色效果的圆角矩形 */
19.     GUI_DrawGradientRoundedH(0, 0, 99, 99, 25, 0x0000FF, 0x00FFFF);
21.      /* 绘制矩形边框 */
22.     GUI_DrawRectEx(&Rect);
24.      /* 绘制圆角矩形框 */
25.     GUI_DrawRoundedFrame(0, 110, 99, 210, 20, 10);
27.      /* 绘制填充的圆角矩形 */
28.     GUI_FillRoundedRect( 120, 110, 219, 210, 20);
30.     while(1)
31.     {
32.         GUI_Delay(100);
33.     }
34. }

复制代码

实际显示效果如下：

席萌0209

11.4 Alpha混合

    Alpha混合比较有用，Alpha混合是一种合并前景图像与背景图像来创建半透明效果的方法。

颜色信息

STemWin的32位颜色信息：

0-7位：红色

8-15位：绿色

16-23位：蓝色

24-31位：Alpha信息

Alpha值为0表示不透明，值为255表示完全透明。

工作原理

    Alpha混合完全自动执行。用户唯一需要做的就是使用函数GUI_EnableAlpha()启用Alpha混合。其中，32位颜色值的最高8位用作Alpha值设置。下面举一个例子：

1. #include "GUI.h"
3. void MainTask(void)
4. {
6.     GUI_Init();                   /* 初始化emWin */
7.      GUI_EnableAlpha(1);          /* 使能Alpha混合 */
9.     GUI_SetBkColor(GUI_WHITE);   /* 设置背景颜色 */  
10.     GUI_Clear();                 /* 只有清屏了，上面设置背景颜色才能起到作用 */
12.     GUI_SetColor(GUI_BLACK);     /* 设置前景色，即设置文本的显示颜色 */   
13.     GUI_DispStringHCenterAt("Alphablending", 45, 41);
15.      /* 显示带alpha效果的填充矩形 */
16.     GUI_SetColor((0x40uL << 24) | GUI_RED);   
17.     GUI_FillRect(0, 0, 49, 49);
18.     GUI_SetColor((0x80uL << 24) | GUI_GREEN);
19.     GUI_FillRect(20, 20, 69, 69);   
20.     GUI_SetColor((0xC0uL << 24) | GUI_BLUE);   
21.     GUI_FillRect(40, 40, 89, 89);
23.     while(1)   
24.     {
25.         GUI_Delay(10);  
26.     }
27. }

复制代码

实际显示效果如下：

11.4.1  函数GUI_SetAlpha()实现Alpha值设置

    函数unsigned GUI_SetAlpha(U8 Value)也可以实现Alpha值的设置，将参数Value设置为0表示不透明（禁用Alpha混合），设置为255表示完全透明（不可见）。另外，软件方式实现的Alpha混合会增加CPU负荷，所以建议在绘制操作完成后，将Alpha值设回默认值。下面针对这个函数举一个例子（这里只是部分代码，可以在模拟器上面运行的完整例子是：V6-508_2D图形库之基本绘图（模拟器），在教程配套的例子中有）。

1. GUI_CONST_STORAGE GUI_BITMAP bmarmfly = {
2.   198, // xSize
3.   80,  // ySize
4.   792, // BytesPerLine
5.   32,  // BitsPerPixel
6.   (unsigned char *)_acarmfly,  // Pointer to picture data
7.   NULL,  // Pointer to palette
8.   GUI_DRAW_BMP8888
9. };
11. void MainTask(void)
12. {
13.      int i;
14.    
15.      /* 初始化emWin */
16.      GUI_Init();
18.      /* 绘制蓝色填充的圆圈 */
19.      GUI_SetColor(GUI_BLUE);
20.      GUI_FillCircle(100, 50, 49);
22.      /* 绘制渐变的透明效果 */
23.      GUI_SetColor(GUI_YELLOW);
24.    
25.      for (i = 0; i < 100; i++)
26.      {
27.          U8 Alpha;
28.          Alpha = (i * 255 / 100);
29.           /* 设置透明度 */
30.          GUI_SetAlpha(Alpha);
31.          /* 画水平的直线 */
32.          GUI_DrawHLine(i, 100 - i, 100 + i);
33.      }
35.     /* 绘制透明效果的位图，透明度设置为128 */
36.      GUI_SetAlpha(0x80);
37.      /* 画位图 */
38.      GUI_DrawBitmap(&bmarmfly, 30, 30);
39.      /* 设置要显示文本的颜色，字体和显示模式 */
40.      GUI_SetColor(GUI_MAGENTA);
41.      GUI_SetFont(&GUI_Font24B_ASCII);
42.      GUI_SetTextMode(GUI_TM_TRANS);
43.      GUI_DispStringHCenterAt("Alphablending", 100, 3);
44.    
45.      /* 设置回默认的不透明状态 */
46.      GUI_SetAlpha(0);
47.    
48.      while(1)
49.      {
50.          GUI_Delay(100);
51.      }
52. }

复制代码

实际显示效果如下：

11.4.2  函数GUI_SetUserAlpha()实现Alpha值设置

    如下两个Alpha值设置函数是配套使用的：

（1）GUI_SetUserAlpha()            设置Alpha值。

（2）GUI_RestoreUserAlpha()    恢复用户Alpha混合之前的状态。

仅看函数说明不容易看懂，下面也举一个例子：

1. #include "GUI.h"
3. void MainTask(void)
4. {      
5.     GUI_ALPHA_STATE AlphaState;
7.      /* 初始化emWin */
8.     GUI_Init();
9.    
10.      /* 使能alpha混合 */
11.     GUI_EnableAlpha(1);
12.    
13.     GUI_SetBkColor(GUI_WHITE);  /* 设置背景颜色 */
14.     GUI_Clear();                /* 只有清屏了，上面设置背景颜色才能起到作用 */
16.      /* 设置前景色，即文本的颜色是黑色 */
17.     GUI_SetColor(GUI_BLACK);   
18.     GUI_DispStringHCenterAt("Alphablending", 45, 41);
19.    
20.      /* 设置alpha值 */
21.     GUI_SetUserAlpha(&AlphaState, 0xC0);
22.    
23.      /* 绘制三个矩形框 */
24.     GUI_SetColor(GUI_RED);   
25.     GUI_FillRect(0, 0, 49, 49);  
26.     GUI_SetColor(GUI_GREEN);   
27.     GUI_FillRect(20, 20, 69, 69);   
28.     GUI_SetColor(GUI_BLUE);  
29.     GUI_FillRect(40, 40, 89, 89);
30.    
31.      /* 恢复之前的alpha值 */
32.     GUI_RestoreUserAlpha(&AlphaState);   
33.    
34.     while(1)   
35.     {      
36.         GUI_Delay(10);   
37.     }
38. }

复制代码

实际显示效果如下：

席萌0209

11.5 总结


    关于2D图形库的基本绘图功能就为大家讲解这么多，要熟练的运用这些函数就得多做练习和测试。