图片显示框架（图片加载框架glide）

说明：前面讲到用到的框架有显示菜单框架，通讯框架和多语言显示框架等，接下来讲的是图片显示框架，我们知道界面显示不光有文字显示还有图标图片显示，而文字和图片相辅相成，一个带界面中规模的工程都含有大量的文字和图片。文字和图片管理显得尤为重要，主要通过框架进行管理，文字显示框架前面有描述，图片框架是本文将讲解的。

注：前面讲诉到多语言显示框架也是为文字做准备的、有兴趣的的同学可以参考我之前的文章编程之封装框架 多语言显示框架 编程之通讯解析框架

下面我们着重讲解图片框架YDW

h图片框架内容：

//图片信息

typedef struct

{

UINT32 addr;//地址

UINT16 StartX;//起始x

UINT16 StartY;//起始y

UINT16 Width;//宽度

UINT16 High;//宽度等级

} YDW_TYP;

//图片操作显示

typedef struct

{

INT16U PIC_ID;//图片ID

U8 Index;//所在图片序号

UINT16 X;//起始X

UINT16 Y;//起始Y

U16 Color;//颜色

U8 JT_MaxLine:4;//拼切行总数

U8 JT_CurLine:4;//当前行拼切

U8 JT_MaxRow:4;//拼切列总数

U8 JT_CurRow:4;//当前列拼切

U8 Clear:1;//0显示 1清除

U8 Region:1;//0图片位置 1起始XY位置

U8 Joint:1;//0非拼图 1拼图

U8 :0;

} YDW_PIC_INF;

C图片框架内容：

// 图片信息

// 第0张图片

const YDW_TYP dw_Pic0_P0 = { 0x0, 47, 95, 227, 19 };

const YDW_TYP dw_Pic0_P1 = { 0x1234, 52, 95, 215, 19 };

...

// 第1张图片

const YDW_TYP dw_Pic1_P0 = { 0xCC604, 62, 175, 40, 400 };

const YDW_TYP dw_Pic1_P1 = { 0xD4304, 140, 175, 40, 240 };

...

// 第2张图片

const YDW_TYP dw_Pic2_P0 = { 0xDD4BC, 13, 96, 20, 24 };

const YDW_TYP dw_Pic2_P1 = { 0xDD87C, 12, 135, 20, 20 };

...

// 单张图片信息

// 第0张图片

const YDW_TYP *const DW_PIC_0[]=

{

&dw_Pic0_P0,

&dw_Pic0_P1,

};

// 第1张图片

const YDW_TYP *const DW_PIC_1[]=

{

&dw_Pic1_P0,

&dw_Pic1_P1

};

// 第2张图片

const YDW_TYP *const DW_PIC_2[]=

{

&dw_Pic2_P0,

&dw_Pic2_P1

};

...

//界面显示位置地址

const YDW_TYP *const *const Dw_PicAddr[] =

{

DW_PIC_0,

DW_PIC_1,

DW_PIC_2,

...

};

//各个界面的图片个数

const UINT8 Dw_PicAddr_Len[] =

{

sizeof(DW_PIC_0) / sizeof(DW_PIC_0[0]),

sizeof(DW_PIC_1) / sizeof(DW_PIC_1[0]),

sizeof(DW_PIC_2) / sizeof(DW_PIC_2[0]),

...

};

/***********************************************************************

* 函数名称 : Dw_PicSingle

* 描述 : 显示单个界面

* 输入形参 :

* 返回值 :

************************************************************************/

void YDW_Pic_Single(const YDW_TYP *dwPic)

{

UDisplaySmallPic(dwPic->addr, dwPic->StartX, dwPic->StartY, dwPic->Width, dwPic->High);//显示图片函数

}

// 通过操作属性显示图片

void YDW_Pic_SingleId(YDW_PIC_INF *PicInf)

{

if (PicInf->PIC_ID >= sizeof(Dw_PicAddr_Len) / sizeof(Dw_PicAddr_Len[0])) return;

if (PicInf->Index>= Dw_PicAddr_Len[PicInf->PIC_ID]) return;

if (PicInf->JT_CurLine > PicInf->JT_MaxLine - 1) PicInf->JT_CurLine = PicInf->JT_MaxLine - 1;

if (PicInf->JT_CurRow > PicInf->JT_MaxRow - 1) PicInf->JT_CurRow = PicInf->JT_MaxRow - 1;

...

Dw_Pic_Single(Dw_PicAddr[PicInf->PIC_ID][PicInf->Index]);

}

//显示单个图片 ID百位是当前页 个位和十位是当前页索引

void YDW_Pic_Draw(U16 ID)

{

YDW_PIC_INF Pic_Inf;

ClearPIC_Inf(&Pic_Inf);

Pic_Inf.PIC_ID = ID / 100;Pic_Inf.Index = ID % 100;

YDW_Pic_SingleId(&Pic_Inf);

}

//显示多个图片 ID百位是当前页 个位和十位是当前页索引

void YDW_Pic_DrawMul(U16 ID, U8 Count)

{

U8 i;

YDW_PIC_INF Pic_Inf;

ClearPIC_Inf(&Pic_Inf);

for (i = 0; i < Count; i++){

YDW_Pic_Draw(ID+i);

}

}

说明：图片可分为单个图标和合在一起的组合图标（拼接在一起的图标），单个图标很好理解就是一张小碎图，组合图标就是将同一类且相同尺寸的小图标组合拼接在一起形成的一个大图标，和单个图标用法是组合图标显示需要将地址偏移到想要的图标位置上，然后选择组合图片中需要显示的其中一个图标。

YDW_Pic_Draw调用后通过ID得到是第几个界面的第几个小图，然后获取到对应二维数组的图片信息，图片信息是地址，也可以定义为char *变为字符串作为路径。这样多张小图组合在一起，通过索引方便调用，保证其风格统一不散乱，为后续自动化编程铺路，多个图片的路径或地址可以通过软件直接由计算机计算打包出来。

PS：开始逐步展开介绍自动化编程，后面会更精彩，希望大家学有收获，欢迎评论转发加关注，留下您宝贵的意见。