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

转最新版本教程本章节为大家讲解2D图形库的位图绘制方法，位图在实际项目中用到的比较多，位图的好处是使用简单，显示速度快，但是要显示的位图不能太大，因为位图的生成是通过emWin自带的小软件BmpCvt.exe转换生成C文件，文件里面有专用于位图的结构体变量和图片数据，代入位图显示函数就可以使用了。其中图片数据要存到内部Flash，如果图片比较大，将非常占用Flash空间。
另外注意，BmpCvt.exe和BmpCvtST.exe是同一个软件，前者是SEGGER对此软件的命名，后者是SEGGER授权emWin给ST公司后，ST公司在这个命名的后加上后缀ST。
12.1 初学者重要提示
12.2 什么是位图
12.3 如何获得C文件格式的位图数据
12.4 emWin模拟器显示位图
12.5 实验例程说明（RTOS）
12.6 实验例程说明（裸机）
12.7 总结

lee_st · 2017-1-6 09:35:00

12.1 初学者重要提示

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

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

lee_st · 2017-1-6 09:35:10

2、2D绘图之位图绘制主要有以下四个函数：
（1）void GUI_DrawBitmap(constGUI_BITMAP * pBM, int x, int y);
（2）void GUI_DrawBitmapEx(constGUI_BITMAP * pBitmap,
                                                      int x0, int y0,
                                                      int xCenter,int yCenter,
                                                      int xMag, intyMag);
（3）void GUI_DrawBitmapHWAlpha(constGUI_BITMAP GUI_UNI_PTR * pBM, int x0, int y0);
（4）void GUI_DrawBitmapMag(constGUI_BITMAP * pBM, int x0, int y0, int Xmul, int Ymul);

本章教程主要测试了函数GUI_DrawBitmap，这个函数在实际项目中使用比较多，其余三个函数大家可以自行测试。
3、位图绘制非常的实用，望初学者务必掌握。

lee_st · 2017-1-6 09:37:28

2、2D绘图之位图绘制主要有以下四个函数：
（1）void GUI_DrawBitmap(constGUI_BITMAP * pBM, int x, int y);
（2）void GUI_DrawBitmapEx(constGUI_BITMAP * pBitmap,
                                                      int x0, int y0,
                                                      int xCenter,int yCenter,
                                                      int xMag, intyMag);
（3）void GUI_DrawBitmapHWAlpha(constGUI_BITMAP GUI_UNI_PTR * pBM, int x0, int y0);
（4）void GUI_DrawBitmapMag(constGUI_BITMAP * pBM, int x0, int y0, int Xmul, int Ymul);

本章教程主要测试了函数GUI_DrawBitmap，这个函数在实际项目中使用比较多，其余三个函数大家可以自行测试。
3、位图绘制非常的实用，望初学者务必掌握。

lee_st · 2017-1-6 09:37:42

12.2 什么是位图

位图（bitmap），又称为点阵图，是使用像素阵列来表示图像。位图中每个位置的像素都有自己的颜色值，这些颜色值是由RGB组合或者灰度值来表示。其中，RGB是指的Red红色，Green绿色和Blue蓝色，任何颜色都可以由这三种颜色来组成。电脑端绘图类的软件基本都有自定义颜色功能，可以很好的说明RGB三原色的作用：

根据位深度，可以将位图分为1位（单色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（增强色），24位（真彩色）和32位等，在讲解emWin颜色设置章节（第34章）还会进一步说明这个问题。
关于位图，还有个概念就是alpha通道。所谓alpha通道就是指在原有的图片编码方法的基础上，增加像素的透明度信息。图形处理中，通常把RGB三种颜色信息称为红通道、绿通道和蓝通道，相应的把透明度称为Alpha通道。本章节教程我们就会用到ARGB8888颜色格式，即每个通道都是由8位来表示。

lee_st · 2017-1-6 09:37:55

12.3 如何获得C文件格式的位图数据

获得位图数据就要先下载图片，然后将其转换成C文件格式，从而获得位图数据，这里为大家推荐一个图标下载网址：http://www.easyicon.net/ 此网站非常好用，需要什么图标直接检索关键字就可以了。这里以关键字ios 进行检索，最终选择地址：http://www.easyicon.net/1117468-Messages_iOS_7_icon.html 里面的图标，我们下载64*64点阵大小的PNG和ICO两种格式的图片（下载的这两个图片已经放在了本章教程配套例子的Doc文件夹里面）：

下面我们分两步走，分别转换PNG和ICO格式的图片。

lee_st · 2017-1-6 09:38:49

12.3.1 转换PNG格式的图片为位图

首先需要大家按照第2章2.3.4小节的说明下载STemWin的软件包，其中BmpCvtST V5.32位于路径：STM32Cube_FW_F4_V1.13.0MiddlewaresSTSTemWinSoftware里面。

小软件BmpCvtST.exe V5.32版本支持BMP，GIF和PNG图片格式的转换。

lee_st · 2017-1-6 09:39:04

第1步：打开BmpCvtST.exe ，直接将PNG格式的图片拖到此软件里面即可，或者点击File->Open进行加载也是可以的。

lee_st · 2017-1-6 09:39:17

第2步：点击File->Save as，弹出如下窗口

上面截图中共分了4步进行操作，其中第2步修改名字是因为原有的名字太长了，不方便程序代码的调用。

lee_st · 2017-1-6 09:39:29

第3步：第2步操作完毕后，弹出如下窗口：

点击OK按钮后会在桌面出现一个新文件，即pic.c，保存在桌面是因为第2步中选择的路径是桌面。

lee_st · 2017-1-6 09:39:41

打开pic.c文件，代码如下：
复制代码
/*********************************************************************
*             SEGGER Microcontroller GmbH & Co. KG             *
*       Solutions for real time microcontroller applications       *
*                         www.segger.com                         *
**********************************************************************
*                                                                   *
* C-file generated by                                              *
*                                                                   *
*       Bitmap Converter (ST) for emWin V5.32.                   *
*       Compiled Oct  8 2015, 11:58:22                            *
*                                                                   *
*       (c) 1998 - 2015 Segger Microcontroller GmbH & Co. KG       *
*                                                                   *
**********************************************************************
*                                                                   *
* Source file: pic                                                 *
* Dimensions:  64 * 64                                              *
* NumColors: 16bpp: 65536                                        *
*                                                                   *
**********************************************************************
*/
#include
#include "GUI.h"
#ifndef GUI_CONST_STORAGE
  #define GUI_CONST_STORAGE const
#endif
extern GUI_CONST_STORAGE GUI_BITMAP bmpic;
static GUI_CONST_STORAGE unsigned short _acpic[] = {
  0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF,
      0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF,
      0xFFFF, 0xFFFF, 0xFFFF,
  0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFDE, 0xFFBE, 0xFFBE, 0xFFBE,
      0xFFBE, 0xFFBE, 0xFFBE, 0xFFDE, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF,
      0xFFFF, 0xFFFF, 0xFFFF,
  0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFBD, 0xF75B, 0xF6F9, 0xF697, 0xEE34, 0xEE13, 0xEDD1, 0xEDD1, 0xEDD1,
      0xEDD1, 0xEDD1, 0xEDD1, 0xEE13, 0xEE55, 0xF6B7, 0xF71A, 0xF75C, 0xFFBE, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF, 0xFFFF,
   /* 后面的数据未列出 */
};
GUI_CONST_STORAGE GUI_BITMAP bmpic = {
  64, // xSize
  64, // ySize
  128, // BytesPerLine
  16, // BitsPerPixel
  (unsigned char *)_acpic,  // Pointer to picture data
  NULL,  // Pointer to palette
  GUI_DRAW_BMP565
};
/*************************** End of file ****************************/

代码中的数组_acpic就是图片原始的位图数据，一个16位数值代表一个像素点的颜色。结构体变量bmpic是可以代入到emWin的位图函数里面进行调用的。此结构体变量的几个成员解释如下：
1、xSize = 64 表示位图的长是64个像素。
2、ySize = 64 表示位图的宽是64个像素。
3、BytesPenLine = 128 表示显示一行需要128个字节，因为位图的宽是64个像素，而一个像素需要两个字节来表示，就是64*2=128字节。
4、BitsPerPixel = 16  表示每个像素由16位来表示，RGB565 = 5 + 6 +5 = 16位。
5、Picture data = (unsigned char *)_acpic  表示位图的原始数据地址。
6、Palette = NULL 表示调色板，这里未用到。
7、GUI_DRAW_BMP565 表示我们在前面第3步中选择的颜色格式High color(565)。

lee_st · 2017-1-6 09:39:54

12.3.2 转换ICO格式的图片为位图

软件BmpCvtST.exe V5.32不支持ICO格式的图片，这里我们需要使用软件IconWorkshop将ICO格式的图片转换成32位BMP图片，格式为ARGB8888，即ARGB各占8位，其中A是alpha通道，专门用于实现透明效果。这种格式非常实用，用来实现类似电脑端和手机端主界面的图标效果。从网站www.easyicon.net 下载的ICO格式的图标基本都带有alpha透明通道。
第1步：打开软件IconWorkshop，将ICO格式的图片拖动到软件上，效果如下：

lee_st · 2017-1-6 09:40:17

第2步：点击软件IconWorkshop的菜单选项，选择文件->导出->Window BMP(B)

lee_st · 2017-1-6 09:40:31

点击后弹出如下窗口：

lee_st · 2017-1-6 09:40:45

点击确定后弹出如下窗口：

至此，图片就从ICO格式转换成了32位的ARGB8888格式的BMP图片。

lee_st · 2017-1-6 09:40:58

第3步：打开BmpCvtST.exe ，直接将刚刚转换出的的BMP格式图片拖到此软件里面即可，或者点击File->Open进行加载也是可以的。

lee_st · 2017-1-6 09:41:10

第2步：点击File->Save as，弹出如下窗口

上面截图中共分了4步进行操作，其中第2步修改名字是因为原有的名字太长了，不方便程序代码的调用。

lee_st · 2017-1-6 09:41:26

第3步：第2步操作完毕后，弹出如下窗口

点击OK按钮后会在桌面出现一个新文件，即pic1.c，保存在桌面是因为第2步中选择的路径是桌面。

lee_st · 2017-1-6 09:41:41

打开pic1.c文件，代码如下：
复制代码
/*********************************************************************
*             SEGGER Microcontroller GmbH & Co. KG             *
*       Solutions for real time microcontroller applications       *
*                         www.segger.com                         *
**********************************************************************
*                                                                   *
* C-file generated by                                              *
*                                                                   *
*       Bitmap Converter (ST) for emWin V5.32.                   *
*       Compiled Oct  8 2015, 11:58:22                            *
*                                                                   *
*       (c) 1998 - 2015 Segger Microcontroller GmbH & Co. KG       *
*                                                                   *
**********************************************************************
*                                                                   *
* Source file: pic1                                                 *
* Dimensions:  64 * 64                                              *
* NumColors: 32bpp: 16777216 + 256                               *
*                                                                   *
**********************************************************************
*/
#include
#include "GUI.h"
#ifndef GUI_CONST_STORAGE
  #define GUI_CONST_STORAGE const
#endif
extern GUI_CONST_STORAGE GUI_BITMAP bmpic1;
static GUI_CONST_STORAGE unsigned long _acpic1[] = {
  0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000,
      0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000,
      0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000, 0xFF000000,
      /* 后面的数据未列出 */
};
GUI_CONST_STORAGE GUI_BITMAP bmpic1 = {
  64, // xSize
  64, // ySize
  256, // BytesPerLine
  32, // BitsPerPixel
  (unsigned char *)_acpic1,  // Pointer to picture data
  NULL,  // Pointer to palette
  GUI_DRAW_BMP8888
};
/*************************** End of file ****************************/

代码中的数组_acpic1就是图片原始的位图数据，一个32位数值代表一个像素点的颜色。结构体变量bmpic1是可以代入到emWin的位图函数里面进行调用的。此结构体变量的几个成员解释如下：
1、xSize = 64 表示位图的长是64个像素。
2、ySize = 64 表示位图的宽是64个像素。
3、BytesPenLine = 256 表示显示一行需要256个字节，因为位图的宽是64个像素，而一个像素需要4个字节来表示，就是64*4=256字节。
4、BitsPerPixel = 32  表示每个像素由32位来表示，ARGB8888 = 8 + 8 +8 + 8= 32位。
5、Picture data = (unsigned char *)_acpic1  表示位图的原始数据地址。
6、Palette = NULL 表示调色板，这里未用到。
7、GUI_DRAW_BMP8888表示我们在前面第3步中选择的True color with alpha，即颜色格式ARGB8888。