STM32 LCD 简单显示彩色图片

STM32 LCD 数组方式简单显示彩色图片

---

---

前言

在使用LCD填充的时候发现正点原子提供了一个很好用的填充函数，就是LCD_Color_Fill();该函数是用来填充颜色块的，也可以直接用来显示图片，因为图片也是由颜色块组成的。所以需要使用stm32从内部flash的方法来显示图片时就不要独立写显示图片的函数了，非常实用。

---

1、图片处理

1.1 准备图片

第一步：准备一张需要显示的图片。
注意：该图片的分辨率大小需要在使用的LCD屏支持的分辨率范围内，如果图片分辨率超出LCD屏幕的分辨率是无法正常显示或者出现异常的情况。

接下来就以下面这个表情图片为例进行显示：

该图片为.jpg格式的图片，分辨率是200x200。使用的LCD分辨率是240x320的。

1.2 查看和调整图片大小

第二步：查看图片分辨率方法：
方法1：在图片属性里面查看

方法2：用画图软件方式查看

鼠标右键图片以画图方式打开图片，如下图：
点击重新调整大小。

这里有一个小技巧，如果发现这个分辨率太大，也可以在这里输入小分辨率的数值即可进行调整，注意勾选下面的保持纵横比选项，才能保证图片的原始比例。

2、Picture2Hex软件使用

该软件在浏览器输入软件名字搜索下载即可。

第一步：双击Picture2Hex.exe文件，即可打开该软件，界面如下：

根据图片信息进行设置参数。

导入图片：

导入后就可以在软件的目录下看到这个work文件夹，打开后可以看到一个bmp的图片和.c的文件，转换生成的大数组就在这个.c里面了，拷贝到MDK工程即可。

添加后的效果如下，需要在名字前面添加const关键字进行修饰，不然会提示内存不够的。
这个LOGO_W和LOGO_H是图片对应的分辨率，为了方便看大小的，可以不用管该代码。

3、函数代码实现

函数原型如下：

//在指定区域内填充指定颜色块
//(sx,sy),(ex,ey):填充矩形对角坐标,区域大小为:(ex-sx+1)*(ey-sy+1)
//color:要填充的颜色
void LCD_Color_Fill(u16 sx, u16 sy, u16 ex, u16 ey, u16 *color)
{
    u16 height, width;
    u16 i, j;
    width = ex - sx + 1;            //得到填充的宽度
    height = ey - sy + 1;           //高度

    for (i = 0; i < height; i++)
    {
        LCD_SetCursor(sx, sy + i);  //设置光标位置
        LCD_WriteRAM_Prepare();     //开始写入GRAM

        for (j = 0; j < width; j++)
        {
            LCD->LCD_RAM=color[i * width + j];  //写入数据
        }
    }
}

这里有一点是需要特别注意的，就是这个函数是对显示区域加1操作了，所以在调用该函数时，区域大小也需要对应减去1才能正常显示，不然显示的图片会显示异常等错位效果。

在main.c文件下的mian函数内调用该函数。

在while里面调用函数：LCD_Color_Fill(0, 0, 199, 199, (u16*)gImage);
编译下载代码后发现能正常显示图片，能达到实验效果目的。

但是发现调用函数这样写区域坐标有点别扭，和图片分辨率大小不太符合。那么，可以适当改一下原函数进行显示，修改如下：

//在指定区域内填充指定颜色块
//(sx,sy),(ex,ey):填充矩形对角坐标,区域大小为:(ex-sx)*(ey-sy)
//color:要填充的颜色
void LCD_Color_Fill(u16 sx, u16 sy, u16 ex, u16 ey, u16 *color)
{
    u16 height, width;
    u16 i, j;
    width = ex - sx;               //得到填充的宽度
    height = ey - sy;              //高度

    for (i = 0; i < height; i++)
    {
        LCD_SetCursor(sx, sy + i);  //设置光标位置
        LCD_WriteRAM_Prepare();     //开始写入GRAM

        for (j = 0; j < width; j++)
        {
            LCD->LCD_RAM=color[i * width + j];  //写入数据
        }
    }
}

把获取宽度和高度的坐标+1删除即可。

调用如下：LCD_Color_Fill(0, 0, 200, 200, (u16*)gImage);
这样写就很方便看出图片的分辨率大小和显示位置了。

编译下载代码后发现效果是一样的，这样看起来就比较直观图片大小了。

3、图片显示效果

4、显示图片太大会报错

这种读取大数组的方式不建议用来显示大图片的，因为是芯片内存有限，显示小图片还是可以的。要是需要显示图片的还是建议读取SD卡的方式，这样就不会占用太大的内存了，节省一些空间。

添加大图片数组后下载会有错位提示，如下图：

总结

用这个方法来显示小分辨率的图片还是很不错的，颜色效果很逼真，和图片原图是一样的效果，就是有点费内存，不过小型项目或者学习还是可以的。

用这个LCD_Color_Fill函数后，发现使用其它的图片转换工具转换出来的数据显示会异常的，大概率和LCD显示格式存在差异导致的，刚好LCD是用565的颜色模式，而这个软件也刚好是的，所以就对应可以使用了。

通过该例子就能很好地学习了一下LCD_Color_Fill函数的实现，以及传参过程。