超强图形API,支持半透明效果渲染汉字,图片,图标等.pdf

红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved红叶 STM32 入门系列教程超强图形 API，支持半透明效果渲染汉字，图片，图标Revision 1.0(2012-1-1)红叶嵌入式红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved21.1.1.1.基本知识讲解基本知识讲解如何让图层之间显示半透明效果呢，以一个像素点来做通俗说明，只要让上层图层和底层图层的颜色信息加以混合，成为一个新的像素点，那么这个新的像素点包含有 2 个图层的颜色信息，从视觉上就能看到 2 个图层的效果，及有一定透明度的效果。如何实现这样的混合呢，下面以计算公式说明。假设底层图层的一个像素点为 B，顶层的一个像素点为 T。对于 B 来说，它的颜色值为 Cb。其中红绿蓝的颜色分分别为 Rb，Gb，Bb，暂存变量为Rb_temp，Gb_temp，Bb_temp对于 T 来说，它的颜色值为 Ct。其中红绿蓝的颜色分分别为 Rt，Gt，Bt，暂存变量为Rt_temp，Gt_temp，Bt_temp然后新的颜色值为 Cnew，颜色分量为 Rnew，Gnew，Bnew。现在我们设定不透明度的值为 Trans，取值范围为 0-1，但是为了避免浮点运算我们把范围取 0-100,运算的时候要除以 100(因为扩大了 100 倍嘛)。我们先对顶层像素的颜色通道进行 alpha 的加权运算Rt_temp=Rt*Trans/100Gt_temp=Gt*Trans/100Bt_temp=Bt*Trans/100然后对底层像素的颜色通道进行 alpha 的加权运算Rb_temp=Rb*(100-Trans)/100Gb_temp=Gb*(100-Trans)/100Bb_temp=Bt*(100-Trans)/100最后进行合成Rnew=Rt_temp+Rb_tempGnew=Gt_temp+Gb_tempBnew=Bt_temp+Bb_temp我们的液晶屏是 16 位色的，那么最后 Cnew也是 16 位的Cnew=Rnew11+Gnew5+Bnew,其中 Rnew，Gnew，Bnew均要为 16 位的变量。2.2.2.2.硬件设计硬件设计无3.3.3.3.实验效果实验效果在屏幕上进行各种图案的绘制，演示了文字，图片，图标，案件，截屏等功能，最后把整个屏幕截取下来并保存成 bmp 格式的图片，下面就把这个保存在 SD 卡中的图片贴出来，作为实验效果图，如图 3.1 所示。红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved3图 3.14.4.4.4.代码讲解代码讲解4.14.1 工程文件结构工程文件结构红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved4配置文件：修改 stm32f10 x_conf.h，启用下列头文件：#include stm32f10 x_gpio.h#include stm32f10 x_rcc.h#include stm32f10 x_usart.h#include stm32f10 x_fsmc.h#include stm32f10 x_tim.h#include stm32f10 x_dma.h#include stm32f10 x_sdio.h#include stm32f10 x_bkp.h#include stm32f10 x_pwr.h#include stm32f10 x_rtc.h#include stm32f10 x_exti.h#include misc.h在 main.h 额外中添加:#include Public_API.h4.24.2 代码剖析代码剖析我们先看 main 函数，这个实验我们用到了 SD 卡，FATFS 文件系统以及 LCD。然后结合我们的 Public_API.c，里边有各种功能的绘图函数，利用它们，我们可以画出多彩多姿的界面来。高级例程中的多功能 MP3 里的界面都是利用 Public_API.c 里的绘图功能完成的。先看代码，如图 4.2.1 所示。先使用 BmpDecode(0:/PICTURE/梦幻图腾.bmp)解码函数加载一幅背景图片。然后绘制不同透明度和不同样式的矩形，图标。接着演示利用GUI_Disp_PicRect()来截取 SD 卡中的一个 bin 格式的图片的一部分然后显示在屏幕的右下角。最后我们把整个屏幕当前的图像以 bmp 格式的图片保存在 SD 卡中，前面四个参数代表要保存的的区域的大小。最后一个参数是保存路径和图片名称。GUI_SaveSR_AsBMP(0,0,400,240,0:/第 19 个实验截图.bmp)红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved5图 4.2.1下面我们介绍如何使用 ImageLCD 来制作满足系统要求的图标或者图片。首先打开 ImageLCD，软件位于：红叶 MP3（光盘资料）软件工具Image2LCD（图片转码工具）中。如图 4.2.2 所示。红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved6图 4.2.2然后选择图片，并设置图片的大小，记住一点，如果你选择的图片为 400X240 的，那么设置图片大小的时候最好只能设置小于等于 400X240，而不要设置成 800X480。只能小不要大。如图 4.2.3 所示。1.打开图片2.选择 bin 格式3.水平扫描4.选 16 位色5.设置大小并点击确定6.勾选高位在前(大端模式存储)，包含图像头数据。7.选择 565 格式的 16位色红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved7图 4.2.3选择保存的路径和设置保存的文件名。最后保存退出。图 4.2.4最后我们在保存的路径下就能看到我们保存好的图标了。如图 4.2.5 所示。图 4.2.5下面我们看看 bin 格式的图片的图像头数据，在 ImageLCD 的帮助里边我们可以查阅到的。我们在程序里实现了这个图像头的识别，图像头包含了图像扫描方式和图片大小和颜色规格等，我们就是依据这个来绘制 bin 格式图片的。具体解释和定义见图 4.2.6。大家记住一点，不论是什么格式的图片，都会有这样的图像数据头，越复杂的图片格式，这样的头信息就越复杂，但是这些都是人规定的，由于这些数据头的存在，让图片解码器找到了方向，不再迷茫。bin 格式的图片文件头一共有 8 个字节，所以图片文件的开头式 8 个字节的图片信息，从第 9 个字节开始就是图片的颜色数据，这些数据的排列方式，数据的量均可以根据文件头的信息计算出来，这样，在画图片的时候，还需要发愁吗。下 面 我 们 结 合 图 片 和 winhex 软 件(位 于 红 叶 MP3（光 盘 资 料）软 件 工 具WinHex-v15.1sr-8H)的数据来说明。1.点 击保2.设置文件名3.保存退出红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved8图 4.2.6看图片 4.2.7，这是一个 16 位色的位图。我们看看 winhex 的数据，如图 4.2.8 所示。第一个字节是 Scan=0 x10=0001 0000 B，看上图的定义，代表着自左向右，自顶向下扫描，字节内象素数据从高位到低位排列，即高位在前，WORD 类型高低位字节顺序与计算机相同。32 位数据对齐式有几种的，选择和 PC 相同就行。第二个字节 GrayValue=0 x10=16(十进制),代表是 16 位色的图片。Pic_W=0 x015E=350，Pic_H=0 x00CE=206,那么图片的大小是 350X206 的。is565=0 x01，代表该 16 色图片是 565 格式的。RGB=565 共 16 位。rgb=0 x1B=0001 1011，最左边是高 2 位=00 表示空白，第 5,4 位=01 表示红色 R，第 3,2位=10 表示绿色，第 1,0 位=11，表示蓝色。所以该图片每一个颜色点是 16 位，565，颜色排列方式是 RGB 的。从第 9 个字节开始，是颜色数据，第 9,10 个字节是 0 xf800,带表红色，后续可以看到绿色的数据 0 x07e0,蓝色的数据 0 x001f，和白色的数据 0 xffff。图 4.2.7红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved9图 4.2.8同样的我们看看 bmp 格式的图片头和信息头，见图 4.2.11。bmp 格式中，文件的第一个字节开始，是文件头 BITMAPFILEHEADER bmfHeader。以一个 24 位色图片为例子，如图 4.2.9，看 winhex 中的数据，如图 4.2.10 所示。(注意，显示的数据是小端模式的)BITMAPFILEHEADER bmfHeader 中的第一个数据为 bfType=0 x4D42,即字符 BM 代表着是BMP 图片的标识。接着是文件大小 4 个字节 bfSize=0 x037E96=229014=224KB。接下来是 4 个字节的保留字段，为 0。然后是从文件开始到位图数据(bitmap data)开始之间的的偏移量 bfOffBits=0 x00 00 00 36=54,也就是说，该 bmp 的头数据有 54 个字节，从第55 个字节开始就是图像数据啦。图 4.2.9图 4.2.10接下来我们看 BITMAPINFOHEADER bmiHeader，先是 4 个字节的说明 BITMAPINFOHEADER 结构所需要的字数biSize=0 x00 00 00 28=40 字节。说明 BITMAPINFOHEADER 一共有 40 个字节。然后是 4 个字节的图像宽度 biWidth=0 x 00 00 01 68=360 和 4 个字节的图像宽度biHeight=0 x 00 00 00 D4=212。接着是为目标设备说明位面数，其值将总是被设为 1，所以 biPlanes=0 x0001。颜色位数 biBitCount=0 x0018=24,说明是个 24 位色的图片。然后是图像压缩类型，biCompression=0 x 00 00 00 00,无压缩类型。接下来的 4 个字节红点颜色 0 xf8008 个字节的图像头偏移 0 x00000036，从这个地址开始就是图像数据第一个颜色数据其实是图像右下角的数据，就是说，位图的存数据方式是上下颠倒的。我们保存bmp图像的时候要从下到上，从左到右的写。红叶嵌入式红叶嵌入式淘宝专卖淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved10是 biSizeImage=0 x 00 03 7E 60=228960=223.59KB,为什么这个会比BITMAPFILEHEADER bmfHeader 中的文件大小 4 个字节 bfSize=0 x037E96=229014=224KB小呢，要搞清楚，这里的 biSizeImage 指的是图像数据的实际大小，而 bfSize 是文件大小，除了图像数据外还有文件头等信息，所以文件大小会比图像数据大。最后水平分辨率 biXPelsPerMeter，垂直分辨率 biYPelsPerMeter，位图实际使用的彩色表中的颜色索引数 biClrUsed，对图象显示有重要影响的颜色索引的数目 biClrImportant均为 0。由于 biClrUsed=0，所以 RGBQUAD 就没有必要出现。最后值得一提的是，bmp 图片的数据是从图片的左下角开始放置的红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved11图 4.2.11讲完 bmp 图像格式后我们看看截屏功能的实现，代码见图 4.2.12。红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved12图 4.2.12最后我们看看汉字的显示。我们知道，汉字要显示液晶屏上，必须要获取到它的点阵码，然后逐点逐行的打上去。字库为此应运而生，字库存放的就是汉字的点阵数据，但是这么多汉字，难道随便丢到什么地方存都可以吗，当然是不可能的，他们按照一定的规律一定的标准来存放，这就是 GBK 编码，在：红叶 MP3（光盘资料）开发板文档其他文档和程序资料字库资料中我们放了一个 GBK 对照表.pdf 文件，里边讲述了 GBK 表。我们首先要根据 GBK的编码方式，即有两个概念，区码和位码，利用这两个码值就能定位汉字点阵数据在字库中存放的起始地址。一个汉字由两个字节组成，分别假设为 H 和 L，并且一个区有 190 个汉字，如果包括两个非法的边界码 xx7f 和 xxff，那就是一个区 192 个汉字，我们的字库包括了 2 个非法的边界码，所以是一个区 192 个汉字，如果自己制作字库的时候，这 2 个非法编码是可以不需要的，那么就是正常的一个区 190 个汉字。区码=H 0 x81位码=L 0 x40该汉字是第几个汉字 N=区码*192+位码由于我们用的是 16X16 大小的汉字，所以每个汉字一共有 32 个字节的数据，我们要计算出该汉字在字库中存放的起始地址 Addr。可以计算出汉字处于第 M 个扇区，M=N/(512/32)，处于第 M 扇区中的偏移地址为 P=(N%(512/32)*32 那么汉字的点阵数据在字库文件中存放的地址 Addr=M*512+P函数实现如图 4.2.13 所示。红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved13图 4.2.13然后实现汉字显示的代码见图 4.2.14.红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved14图 4.2.14红叶嵌入式红叶嵌入式淘宝专卖：淘宝专卖：http:/ 2012201220122012 红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室红叶嵌入式工作室 ALLALLALLALL rightsrightsrightsrights reservedreservedreservedreserved155.5.5.5.实验小结实验小结界面显示方面的内容也挺多的，所以要设计 GUI 的话也不是件容易的事情，工作量都还是挺大的。大家好好消化这些内容吧。