24. 显示gif图片

GIF(Graphics Interchange Format)的原义是“图像互换格式”,是CompuServe公司开发的图像文件格式。GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右。 GIF格式可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画,如 图24_1

图 24‑1 GIF图片

图 24‑1 GIF图片

24.1. GIF图片显示原理

GIF动态图片是由多张静态图片组合而成,按照一定的顺序和时间进行播放。GIF图片有多少帧,就有多少张静态图片。 是本章节要显示的GIF图片,每一个箭头代表一个延时值。显示第一张静态图,延时delay1时长后,显示第二张,共有16张静态图片,则需要显示16次,这样就实现了动态图的效果。

图 24‑2 GIF图片

图 24‑2 GIF图片分解图

24.2. 显示gif图片(数据在内部存储空间)

24.2.1. gif图片绘制API

表格 24‑1 绘制API

函数

描述

GIF_Open()

创建HGIF句柄

GIF_GetInfo()

获取GIF的图片信息

GIF_GetFrameCount()

获取GIF的帧数

GIF_GetFrameDelay()

获取GIF某一帧的延时值

GIF_DrawFrame()

绘制GIF图片

GIF_Close()

释放绘图句柄

24.2.1.1. GIF_Open

GIF_Open函数来获取HGIF句柄,函数原型见代码清单 24‑1。

代码清单 24‑1 GIF_Open函数(文件emXGUI.h)
1
 HGIF GIF_Open(const void *dat);
  1. dat:图片所在的缓冲区,使用软件生成的图片数组

24.2.1.2. GIF_GetInfo

GIF_GetInfo函数来获取GIF图片信息,函数原型见代码清单 24‑2。

代码清单 24‑2 GIF_GetInfo函数(文件emXGUI.h)
1
 BOOL GIF_GetInfo(HGIF hGIF,IMAGE_INFO *Info);
  1. hGIF:HGIF句柄,由函数GIF_Open创建;

  2. Info:GIF图片信息结构体,存放GIF的图片信息。

代码清单 24‑3 IMAGE_INFO结构体(文件emXGUI.h)
1
2
3
4
5
6
7
 typedef struct tagIMAGE_INFO
 {
    U8 Tag[7]; //图像类型的标识
    U8 Bpp;//图像颜色位宽
    U16 Width; //图片宽度
    U16 Height;//图片高度
 }IMAGE_INFO;

这个结构体主要存放了GIF图片的一些信息, Tag参数里记录的图像的类型; 比如打开的数据是JPG图像, Tag参数里就是’J’,’P’,’G’字符标识; 如果是GIF图像,Tag参数里就是’G’,’I’,’F’。具体实现过程是由GIF_GetInfo函数来完成的,这里简单了解一下即可。

24.2.1.3. GIF_GetFrameCount

GIF_GetFrameDelay函数来获取GIF图片的总帧数,也就是说我们需要显示多少张图片,函数原型见 代码清单24_4

代码清单 24‑4 GIF_GetFrameCount函数(文件emXGUI.h)
1
 UINT GIF_GetFrameCount(HGIF hGIF);
  1. hGIF:HGIF句柄

前面提到过, GIF图片是将多幅图像保存为一个图像文件,从而形成动画,调用GIF_GetFrameCount函数就可以得到有多少张图片,在调用下面的GIF_GetFrameDelay函数得到的延时值,进行延时,就是实现“动画”的效果了。

24.2.1.4. GIF_GetFrameDelay

GIF_GetFrameDelay函数用于获取GIF图片中某一帧播放时需要延时的时间,见 代码清单24_5

代码清单 24‑5 GIF_GetFrameDelay函数(文件emXGUI.h)
1
 GIF_DELAY GIF_GetFrameDelay(HGIF gif_dec,UINT frame_idx);
  1. hGIF:HGIF句柄

  2. frame_idx:GIF图片的某一帧的帧数值;

24.2.1.5. GIF_DrawFrame

GIF_DrawFrame函数用来绘制GIF图片的某一帧,代码原型见代码清单 24‑6。

代码清单 24‑6 GIF_DrawFrame函数(文件emXGUI.h)
1
 GIF_DELAY GIF_DrawFrame(HDC hdc,int x,int y,COLORREF bk_color,HGIF hGIF,UINT frame_idx);
  1. hdc:绘图上下文

  2. x、y:显示GIF图片的起点坐标;

  3. bk_color:GIF图片的背景颜色;

  4. hGIF:HGIF句柄

  5. frame_idx:当前的帧数值

24.2.1.6. GIF_Close

当我们不再使用图片句柄时,调用GIF_Close函数来释放图片句柄,函数原型见 代码清单24_7

代码清单 24‑7 GIF_Close函数(文件emXGUI.h)
1
 void GIF_Close(HGIF hGIF);
  1. hGIF:HGIF句柄

24.2.2. 显示gif图片实验

24.2.2.1. 实验要求

图24_3 是GIF图片的第一帧,使用上述的API函数,在emXGUI实现动态图的显示。

图 24‑3 实验要求

图 24‑3 实验要求

24.2.2.2. 代码分析

emXGUI通过在WM_PAINT中显示GIF图片的每一帧,延时一定时间,如此循环,最后实现显示GIF图片的动态效果,我们日常生活看到的GIF图片,也是这样的。

  1. 窗口回调函数

  • WM_CREATE

代码清单 24‑8 WM_CREATE消息(文件GUI_DEMO_DrawGIF.c)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 case WM_CREATE: //窗口创建时,会自动产生该消息,在这里做一些初始化的操作或创建子窗口
 {
    GetClientRect(hwnd,&rc);
    /* 获取HGIF句柄 */
    hgif = GIF_Open(king);
    /* 获取GIF的图片信息 */
    GIF_GetInfo(hgif,&img_info);
    /* 获取GIF的帧数 */
    frame_num = GIF_GetFrameCount(hgif);

    CreateWindow(BUTTON,L"OK",WS_VISIBLE,rc.w-70,rc.h-40,68,32,hwnd,ID_OK,NULL,NULL);
    SetTimer(hwnd,0,0,TMR_SINGLE,NULL);
    return TRUE;
 }

代码清单24_8,调用GIF_Open函数来获取HGIF句柄,参数king是使用软件生成的图像数组。使用GIF_GetInfo函数来得到图片的消息,存放在img_info结构体中。 GIF_GetFrameCount函数用来得到GIF图片的总帧数,作为循环显示的依据。最后,创建一个定时器,用来作为图片的显示延时,选择单次触发。这里设置定时时间为0,则定时器暂停工作。

  • WM_PAINT

代码清单 24‑9 WM_PAINT消息(文件GUI_DEMO_DrawGIF.c)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 case WM_PAINT: //窗口需要绘制时,会自动产生该消息.
 {
    PAINTSTRUCT ps;
    HDC hdc;
    hdc =BeginPaint(hwnd,&ps);
    GetClientRect(hwnd,&rc);
    if(hgif)
    {
        /* 创建MemoryDC */

        hdc_mem = CreateMemoryDC(SURF_SCREEN,img_info.Width,img_info.Height);
        /* 清除屏幕显示 */
        ClrDisplay(hdc_mem,NULL,MapRGB(hdc_mem,255,255,255));
        if(i>=frame_num)
        {
            i=0;
        }
        /* 绘制图片至MemoryDC */
        GIF_DrawFrame(hdc_mem,0,0,MapRGB(hdc_mem,255,255,255),hgif,i);
        BitBlt(hdc,rc.x,rc.y,img_info.Width,img_info.Height,hdc_mem,0,0,SRCCOPY); //将MEMDC输出到窗口中。
        /* 获取当前帧的延时值 */
        delay=GIF_GetFrameDelay(hgif,i);
        i++;
    }
    /* 释放MemoryDC */
    DeleteDC(hdc_mem);

    ResetTimer(hwnd,0,delay,TMR_SINGLE|TMR_START,NULL);
    EndPaint(hwnd,&ps);
    break;
 }

代码清单24_9 负责绘制GIF图片的每一帧,CreateMemoryDC函数创建MemoryDC,调用GIF_DrawFrame将每一帧图片绘制到MemoryDC, 然后使用BitBlt块传输输出到窗口HDC,绘制完成后,释放MemoryDC。调用GIF_GetFrameDelay获取GIF当前帧需 要延时的时间,使用ResetTimer函数,来重新设置延时时间,以及定时器的功能。

  • WM_TIMER

代码清单 24‑10 WM_TIMER消息(文件GUI_DEMO_DrawGIF.c)
1
2
3
 case WM_TIMER:
 InvalidateRect(hwnd,NULL,FALSE);
 break;

WM_TIMER消息中,当超过延时时间时,调用InvalidateRect函数重绘窗口,实际上就是给窗口发送WM_PAINT消息。

最后,设计的GUI_DEMO_DrawGIF界面函数加入到GUI_AppMain函数中即可。

24.2.2.3. 实验结果

实验结果如 图24_4 所示,这是GIF图片中的某一帧。具体的实验效果,读者可以下载本章的例程进行观看。

图 24‑4 实验结果

图 24‑4 实验结果

24.3. 显示外部gif图片

从外部读取图片数据,使用RES_Load_Content函数或者是FS_Load_Content函数。RES_Load_Content函数是从SPI_FLASH中读取图片,读取之前需要将图片烧写至SPI_FLASH中;而FS_Load_Content则是从SD卡中读取图片数据。这两个在前面章节已经讲 解过了,这里不进行过多的描述。使用两者中哪一个,由宏定义RES_PIC_DEMO决定。

代码清单 24‑11 宏定义RES_PIC_DEMO(文件GUI_DEMO_DrawGIF_Extern.c)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 /* 为1时显示RES FLASH资源文件,为0时显示SD卡的文件 */
 #define RES_PIC_DEMO 0

 #if(RES_PIC_DEMO)
 /* FLASH资源文件加载 */
 #define DEMO_GIF_FILE_NAME "king.gif"
 #else
 /* SD文件系统加载 */
 #define DEMO_GIF_FILE_NAME "0:srcdata/king.gif"

 #endif

24.3.1. 显示外部gif图片实验

24.3.1.1. 实验要求

实验要求和上一小节一样,区别在于上一小节图片是存放在内部FLASH中,而本节实验的图片数据是存放在SPI_FLASH或者是SD卡中,使用RES_Load_Content或者是FS_Load_Content函数来获得图片数据。

24.3.1.2. 代码分析

  1. 窗口回调函数

  • WM_CREATE

代码清单 24‑12 WM_CREATE消息(文件GUI_DEMO_DrawGIF_Extern.c)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 case WM_CREATE: //窗口创建时,会自动产生该消息,在这里做一些初始化的操作或创建子窗口
 {
    GetClientRect(hwnd,&rc);
    #if(RES_PIC_DEMO)
    /* 资源设备中加载 */
    res = RES_Load_Content(DEMO_GIF_FILE_NAME, (char **)&gif_buf, &gif_size);
    #else
    /* SD文件系统加载 */
    res = FS_Load_Content(DEMO_GIF_FILE_NAME, (char **)&gif_buf, &gif_size);

    #endif
    /* 获取GIF句柄 */
    hgif = GIF_Open(gif_buf);
    /* 获取GIF图片信息 */
    GIF_GetInfo(hgif,&img_info);
    /* 获取GIF图片的帧数 */
    frame_num = GIF_GetFrameCount(hgif);
    CreateWindow(BUTTON,L"OK",WS_VISIBLE,rc.w-70,rc.h-40,68,32,hwnd,ID_OK,NULL,NULL);
    SetTimer(hwnd,0,0,TMR_SINGLE,NULL);
    return TRUE;
 }

代码清单24_12 WM_CREATE消息(文件GUI_DEMO_DrawGIF_Extern.使用FS_Load_Content函数从SD卡中读取图片数据,存放在数组gif_buf中。 调用GIF_Open函数来创建一个GIF图片句柄,图片数组gif_buf作为函数的实参。通过GIF_GetInfo函数来得到图片的尺寸,存放在img_info变量中,这里尺寸大小主要用于创建MemoryDC的大小。调用GIF_GetFrameCount函数来得到GIF图片的总帧数,读者可以将frame_num通过串口打印出来,可以看到刚刚好是16帧。创建定时器,定时时间设置为0,定时器主要用于实现GIF图片的 每一帧图片的延时,也就是 图24_2 的箭头。当超过设定时间时,就会发送WM_TIMER消息。在WM_TIMER消息中,调用InvalidateRect函数来实现窗口重绘,也就是绘制下一帧图片。

  • WM_PAINT

代码清单 24‑13 WM_PAINT消息(文件GUI_DEMO_DrawGIF_Extern.c)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 case WM_PAINT: //窗口需要绘制时,会自动产生该消息.
 {
    PAINTSTRUCT ps;
    HDC hdc;
    hdc =BeginPaint(hwnd,&ps);
    GetClientRect(hwnd,&rc);
    if(hgif)
    {
    /* 创建MemoryDC */

    hdc_mem = CreateMemoryDC(SURF_SCREEN,img_info.Width,img_info.Height);
    /* 清除窗口显示内容 */
    ClrDisplay(hdc_mem,NULL,MapRGB(hdc_mem,255,255,255));
    if(i>=frame_num)
    {
        i=0;
        }
        /* 绘制GIF图片 */
        GIF_DrawFrame(hdc_mem,0,0,MapRGB(hdc_mem,255,255,255),hgif,i);
        BitBlt(hdc,rc.x,rc.y,img_info.Width,img_info.Height,hdc_mem,0,0,SRCCOPY); //将MEMDC输出到窗口中。
        /* 获取GIF图片的延时值 */
        delay=GIF_GetFrameDelay(hgif,i);
        i++;
    }
    /* 释放MemoryDC */
    DeleteDC(hdc_mem);
    /*设置延时值,开启定时器 */
    ResetTimer(hwnd,0,delay,TMR_SINGLE|TMR_START,NULL);
    EndPaint(hwnd,&ps);
    break;
 }

CreateMemoryDC函数用于创建MemoryDC,将GIF图片的每一帧绘制到MemoryDC,使用BitBlt函数将MEMDC输出到窗口HDC中,最后需要释放MemoryDC。 图24_1 帧与帧之间存在一些重叠的内容,这里调用ClrDisplay函数,将上一帧的内容清除,再绘制下一帧。GIF_GetFrameDelay得到当前帧的延时值, 使用ResetTimer来设置定时器的延时值,开启定时器。对于例程的GIF图来说, 这个过程需要执行16次。

  • WM_DESTROY

代码清单 24‑14 WM_DESTROY消息(文件GUI_DEMO_DrawGIF_Extern.c)
1
2
3
4
5
 case WM_DESTROY: //窗口销毁时,会自动产生该消息,在这里做一些资源释放的操作.
 {
    GIF_Close(hgif);
    return PostQuitMessage(hwnd); //调用PostQuitMessage,使用主窗口结束并退出消息循环.
 }

当窗口退出时,调用GIF_Close函数来释放GIF图片句柄。

最后,将设计好的GUI_DEMO_DrawGIF_Extern函数加入到GUI_AppMain中即可。

24.3.1.3. 实验结果

图24_5 是GIF图片中的某一帧,具体的实验效果,读者可以下载本章的例程进行观看。

图 24‑5 实验结果

图 24‑5 实验结果