硬汉嵌入式论坛

 找回密码
 立即注册
查看: 30429|回复: 173
收起左侧

[emWin教程入门篇] 第十三期 :2-D图形库之基本绘图(初学者必看)

[复制链接]

1万

主题

6万

回帖

10万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
107049
QQ
发表于 2013-10-5 11:06:54 | 显示全部楼层 |阅读模式
特别说明:pdf版60期emWin教程已经发布:
                  http://www.armbbs.cn/forum.php?mod=viewthread&tid=2932
                  armfly-x2,x3,v2,v3,v5开发板裸机和带系统的emWin工程已经全部建立,链接如下:
                  http://www.armbbs.cn/forum.php?mod=viewthread&tid=1830
      本期主要2-D图形库的基本绘图方法,整体来说比较的简单,但很适合初学的兄弟看。这些图形库是
基于快速高效的算法。当前,只有GUI_DrawArc()函数需要浮点计算,这些函数用PC端的emWin模拟器
联系就行,不需要在开发板上面做,太麻烦。
      基本绘制例程可以在显示器中的任意位置绘制单个点、水平线和垂直线以及图形。所有可用的绘制模
式均能使用。由于大多数应用程序会频繁调用这些例程,因此对它们的速度尽可能进行了优化。例如,
平线和垂直线函数不需要使用单点例程。
本期分为四个小节:
13. 1  画笔大小
13. 2  基本绘制例程

13. 3  Alpha混合
13. 4  实验总结




13. 1  画笔大小
GUI_GetPenSize()   返回当前的画笔大小 (像素)。
GUI_SetPenSize()    设置画笔大小 (像素)。

画笔大小决定以下矢量绘制操作的厚度:
• GUI_DrawPoint()
• GUI_DrawLine()
• GUI_DrawLineRel()
• GUI_DrawLineTo()
• GUI_DrawPolyLine()
• GUI_DrawPolygon()
• GUI_DrawEllipse()
• GUI_DrawArc()
这里要切记画笔大小只支持上面的几个2D绘图函数,有些是不支持的,下面以GUI_DrawLine()举一个例子,
这个例子直接复制到emWin工程下面就可以跑的,主要是画三条不同粗细的直线。
#include "GUI.h"


void MainTask(void) {
    GUI_Init();   
    GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
    GUI_Clear();                              /* 这里只要清屏了,上面设置背景颜色才能起到作用 */   
    GUI_CURSOR_Show();             /* 显示游标 */
    GUI_SetColor(GUI_RED);         /* 设置画笔颜色 */   
    GUI_SetPenSize(1);                 /* 设置画笔大小 */
    GUI_DrawLine(0,                     /* X起始位置      */                        
                             10,                  /* Y起始位置      */
                             200,                /* X结束位置      */                 
                             10);                /* Y结束位置      */
    GUI_SetPenSize(4);   
    GUI_DrawLine(0, 100, 200, 100);
    GUI_SetPenSize(8);   
    GUI_DrawLine(0, 200, 200, 200);
    while(1)   
    {
        GUI_Delay(100);   
    }
}
显示效果如下
2.png

13. 2  基本绘制例程
emWin支持的2D基本绘图函数有如下的几个,我这里就不跟大家一一举例了,举几个典型的
函数用法。
3.png

下面这个例程主要用到以下几个函数
GUI_DrawGradientRoundedH()      绘制用水平颜色梯度填充的圆角矩形。
GUI_DrawRectEx()                            在当前窗口中的指定位置绘制矩形。
GUI_DrawRoundedFrame()             在当前窗口中的指定位置绘制指定宽度的圆角框。
GUI_FillRoundedRect()                    在当前窗口中的指定位置绘制填充的圆角矩形。
程序和演示效果分别如下:
#include "GUI.h"
void MainTask(void)
{
    GUI_RECT Rect = { 120, /* Upper left X-position. */
                                        0, /* Upper left Y-position. */

                                   219, /* Lower right X-position. */
                                     99};/* Lower right Y-position. */

    GUI_Init();
    GUI_SetBkColor(GUI_BLACK);  /* 设置背景颜色 */
    GUI_Clear();                               /* 这里只要清屏了,上面设置背景颜色才能起到作用 */
    GUI_CURSOR_Show();              /* 显示游标 */
    GUI_SetColor(GUI_RED);
    GUI_DrawGradientRoundedH(0, 0, 99, 99, 25, 0x0000FF, 0x00FFFF);
    GUI_DrawRectEx(&Rect);
    GUI_DrawRoundedFrame(0, 110, 99, 210, 20, 10);
    GUI_FillRoundedRect( 120, 110, 219, 210, 20);
    while(1)
    {
        GUI_Delay(100);
    }
}
4.png

13. 3  Alpha混合
Alpha混合是个好东西,有了这个绘制出来的界面才能更加的华丽,下面详细的介绍一下。

Alpha混合是一种合并前景图像与背景来创建半透明效果的方法。Alpha值决定可见的像
素数以及背景透露的像素数。
颜色信息
emWin内部适用于32位的颜色信息:
• 0-7位:红色
• 8-15位:绿色
• 16-23位:蓝色
• 24-31位:Alpha信息
Alpha值为0表示不透明,值为255表示完全透明。
工作原理
Alpha混合完全自动执行。唯一需要做的就是使用GUI_EnableAlpha()启用Alpha混合。
在此,8位以上的颜色信息将作为Alpha值管理。下面举一个例子
#include "GUI.h"

void MainTask(void)
{
    GUI_Init();   
    GUI_EnableAlpha(1);                   /* 启用或禁用自动Alpha混合 */
    GUI_SetBkColor(GUI_WHITE);   /* 设置背景颜色 */   
    GUI_Clear();                                /* 这里只要清屏了,上面设置背景颜色才能起到作用 */
    GUI_SetColor(GUI_BLACK);       /* 设置字体显示颜色 */   
    GUI_DispStringHCenterAt("Alphablending", 45, 41);
     /* 显示带alpha效果的填充矩形 */
    GUI_SetColor((0x40uL << 24) | GUI_RED);   
    GUI_FillRect(0, 0, 49, 49);
    GUI_SetColor((0x80uL << 24) | GUI_GREEN);
    GUI_FillRect(20, 20, 69, 69);   
    GUI_SetColor((0xC0uL << 24) | GUI_BLUE);   
    GUI_FillRect(40, 40, 89, 89);
    while(1)   
    {
        GUI_Delay(100);   
     }
}
显示效果如下
5.png

说一下这个函数GUI_SetAlpha(),这个函数基本处于弃用的状态,主要以上面说的那个函数为主。
该函数设置用于所有后续绘制操作的Alpha值。参数Alpha值为0表示不透明(禁用Alpha混合),

值为255表示完全透明 (不可见)。
请注意,软件Alpha混合会增加CPU负荷。此外,强烈建议在绘制操作完成后,将Alpha值设回

默认值。下面针对这个函数举一个例子。
GUI_CONST_STORAGE GUI_BITMAP bmarmfly =

{  
    198, // xSize  
    80,  // ySize  
   792, // BytesPerLine  
    32,  // BitsPerPixel  
   (unsigned char *)_acarmfly,  // Pointer to picture data  
   NULL,  // Pointer to palette  
   GUI_DRAW_BMP8888
};
void MainTask(void)
{   
     int i;   
    GUI_Init();
    /* 绘制蓝色填充的圆圈 */   

    GUI_SetColor(GUI_BLUE);   
    GUI_FillCircle(100, 50, 49);               
    /* 绘制一个圆体 */   
    GUI_SetColor(GUI_YELLOW);   
    for (i = 0; i < 100; i++)   
    {        
         U8 Alpha;        
        Alpha = (i * 255 / 100);        
        GUI_SetAlpha(Alpha);      
        GUI_DrawHLine(i,             /* Y位置 */                              
                                   100 - i,   /* X起始位置 */                     
                                   100 + i);  /* X结束位置 */   
     }
   GUI_SetAlpha(0x80);   
    GUI_DrawBitmap(&bmarmfly, 30, 30);   
    GUI_SetColor(GUI_MAGENTA);   
    GUI_SetFont(&GUI_Font24B_ASCII);   
    GUI_SetTextMode(GUI_TM_TRANS);   
    GUI_DispStringHCenterAt("Alphablending", 100, 3);   
    GUI_SetAlpha(0); /* Set back to default (opaque) */        
    while(1)   
    {        
          GUI_Delay(100);   
     }
}
显示效果如下:
6.png
由于这个例子用到了图片数据,数据还挺多,这里就不贴出了,提供一个文件。
GUIDEMO_Start.zip (11 KB, 下载次数: 300)
关于alpha函数还有如下两个函数

GUI_SetUserAlpha()             设置其他值以用于计算要使用的实际Alpha值。
GUI_RestoreUserAlpha()     恢复用户Alpha混合之前的状态。保存在所指向的结构中。
看函数说明不好看懂,下面也举一个例子
#include "GUI.h"
void MainTask(void)

{        
    GUI_ALPHA_STATE AlphaState;
    GUI_Init();   

    GUI_EnableAlpha(1);   
    GUI_SetBkColor(GUI_WHITE);   
    GUI_Clear();   
    GUI_SetColor(GUI_BLACK);   
    GUI_DispStringHCenterAt("Alphablending", 45, 41);   
    GUI_SetUserAlpha(&AlphaState, 0xC0);   
    GUI_SetColor(GUI_RED);   
    GUI_FillRect(0, 0, 49, 49);   
    GUI_SetColor(GUI_GREEN);   
    GUI_FillRect(20, 20, 69, 69);   
    GUI_SetColor(GUI_BLUE);   
    GUI_FillRect(40, 40, 89, 89);   
    GUI_RestoreUserAlpha(&AlphaState);      
    while(1)   
    {        
        GUI_Delay(100);   
    }
}
显示效果如下:
7.png
13. 4  实验总结         
    整体上来说本实验不难,多练习就行,有时候想做出比较华丽的界面还得靠这些函数
回复

使用道具 举报

20

主题

55

回帖

20

积分

初级会员

积分
20
发表于 2013-10-11 16:41:15 | 显示全部楼层
沙发。。。。
天天向上
回复

使用道具 举报

36

主题

2040

回帖

2148

积分

至尊会员

积分
2148
发表于 2013-10-11 16:41:49 | 显示全部楼层
终于又更新了,继续学习 [s:151]
Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better.
回复

使用道具 举报

23

主题

1406

回帖

1475

积分

至尊会员

积分
1475
发表于 2013-10-11 16:42:17 | 显示全部楼层
very good
代码不规范,亲人两行泪!
回复

使用道具 举报

1

主题

8

回帖

1

积分

新手上路

天空没有镜头。。

积分
1
发表于 2013-10-11 16:42:22 | 显示全部楼层
顶,。。。。
回复

使用道具 举报

0

主题

15

回帖

0

积分

新手上路

积分
0
发表于 2013-10-11 16:43:58 | 显示全部楼层
[s:152]
回复

使用道具 举报

41

主题

97

回帖

220

积分

高级会员

积分
220
发表于 2013-10-11 16:47:04 | 显示全部楼层
[s:151]
回复

使用道具 举报

0

主题

13

回帖

0

积分

新手上路

积分
0
发表于 2013-10-11 17:39:26 | 显示全部楼层
谢谢楼主!!!
回复

使用道具 举报

91

主题

289

回帖

562

积分

金牌会员

积分
562
发表于 2013-10-11 17:42:05 | 显示全部楼层
学习学习。。。。。。。。。。。
回复

使用道具 举报

0

主题

17

回帖

0

积分

新手上路

积分
0
发表于 2013-10-11 17:59:35 | 显示全部楼层
[s:152]
回复

使用道具 举报

16

主题

203

回帖

251

积分

高级会员

积分
251
发表于 2013-10-11 20:03:36 | 显示全部楼层
[s:151] [s:150] [s:150] [s:150]
回复

使用道具 举报

11

主题

34

回帖

67

积分

初级会员

积分
67
发表于 2013-10-12 10:01:07 | 显示全部楼层
[s:140]
回复

使用道具 举报

2

主题

135

回帖

2

积分

初级会员

积分
2
发表于 2013-10-12 10:14:59 | 显示全部楼层
[s:151] [s:151] [s:151] [s:151] [s:150] [s:150] [s:150]
回复

使用道具 举报

79

主题

191

回帖

428

积分

高级会员

积分
428
发表于 2013-10-12 13:23:43 | 显示全部楼层
学习学习。。。。。。
回复

使用道具 举报

0

主题

1

回帖

0

积分

新手上路

积分
0
发表于 2013-10-13 10:33:38 | 显示全部楼层
[s:152]
回复

使用道具 举报

14

主题

78

回帖

120

积分

初级会员

积分
120
发表于 2013-10-13 14:09:44 | 显示全部楼层
谢谢!谢谢!
回复

使用道具 举报

0

主题

11

回帖

0

积分

新手上路

积分
0
发表于 2013-10-14 19:13:52 | 显示全部楼层
顶一个
回复

使用道具 举报

0

主题

17

回帖

0

积分

新手上路

积分
0
发表于 2013-10-14 22:27:20 | 显示全部楼层
谢谢
回复

使用道具 举报

0

主题

10

回帖

0

积分

新手上路

积分
0
发表于 2013-10-15 11:30:30 | 显示全部楼层
继续看,哈哈
回复

使用道具 举报

0

主题

11

回帖

0

积分

新手上路

积分
0
发表于 2013-10-16 10:52:09 | 显示全部楼层
看看
回复

使用道具 举报

0

主题

23

回帖

23

积分

新手上路

积分
23
发表于 2013-10-16 21:24:13 | 显示全部楼层
看看
回复

使用道具 举报

0

主题

23

回帖

23

积分

新手上路

积分
23
发表于 2013-10-16 21:28:57 | 显示全部楼层
学习了
回复

使用道具 举报

0

主题

23

回帖

23

积分

新手上路

积分
23
发表于 2013-10-16 21:30:01 | 显示全部楼层
我也跟你学
回复

使用道具 举报

116

主题

800

回帖

1148

积分

至尊会员

积分
1148
QQ
发表于 2013-10-17 08:17:46 | 显示全部楼层
一直都在支持
回复

使用道具 举报

0

主题

15

回帖

15

积分

新手上路

积分
15
发表于 2013-10-17 16:30:57 | 显示全部楼层
继续学习
回复

使用道具 举报

0

主题

101

回帖

101

积分

初级会员

积分
101
发表于 2013-10-18 08:58:15 | 显示全部楼层
学习,收录下
回复

使用道具 举报

5

主题

34

回帖

5

积分

新手上路

积分
5
发表于 2013-10-21 16:55:37 | 显示全部楼层
恩···················
回复

使用道具 举报

0

主题

23

回帖

23

积分

新手上路

积分
23
发表于 2013-10-22 09:22:22 | 显示全部楼层
继续支持
回复

使用道具 举报

0

主题

17

回帖

0

积分

新手上路

积分
0
发表于 2013-10-22 22:02:44 | 显示全部楼层
看看先
回复

使用道具 举报

0

主题

18

回帖

0

积分

新手上路

积分
0
发表于 2013-10-28 10:43:21 | 显示全部楼层
谢谢 ,看看谢谢 ,看看
回复

使用道具 举报

0

主题

18

回帖

0

积分

新手上路

lcptw

积分
0
发表于 2013-10-28 10:49:25 | 显示全部楼层
upup[s:141]
lcptw
回复

使用道具 举报

1

主题

38

回帖

41

积分

新手上路

THINK

积分
41
发表于 2013-10-31 16:14:19 | 显示全部楼层
顶顶楼主~~~~~~~~~~~~~~~~~~[s:152] [s:152] [s:152]
i love ARM
回复

使用道具 举报

0

主题

16

回帖

0

积分

新手上路

积分
0
发表于 2013-11-1 14:40:20 | 显示全部楼层
[s:152][s:150][s:150][s:150]
回复

使用道具 举报

0

主题

23

回帖

23

积分

新手上路

积分
23
发表于 2013-11-5 20:43:54 | 显示全部楼层
学习
回复

使用道具 举报

1

主题

28

回帖

1

积分

新手上路

积分
1
发表于 2013-11-5 21:57:53 | 显示全部楼层
[s:151]  [s:151]  [s:151]
回复

使用道具 举报

0

主题

8

回帖

8

积分

新手上路

积分
8
发表于 2013-11-6 13:00:55 | 显示全部楼层
顶了再看
回复

使用道具 举报

1

主题

20

回帖

1

积分

新手上路

积分
1
发表于 2013-11-11 17:21:20 | 显示全部楼层
[s:150][s:150]

[s:151][s:151][s:151]

[s:141]
回复

使用道具 举报

0

主题

18

回帖

0

积分

新手上路

积分
0
发表于 2013-11-12 23:43:57 | 显示全部楼层
[s:143]
回复

使用道具 举报

0

主题

12

回帖

12

积分

新手上路

积分
12
发表于 2013-11-14 09:31:10 | 显示全部楼层
顶楼主!
回复

使用道具 举报

3

主题

68

回帖

77

积分

初级会员

积分
77
发表于 2013-11-15 09:03:56 | 显示全部楼层
[s:151]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|Archiver|手机版|硬汉嵌入式论坛

GMT+8, 2024-5-16 06:26 , Processed in 0.328291 second(s), 34 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表