RA8889/RA8876多图层显示的应用

weran

问题：在需要连续显示图片或图标以形成动态效果时，会遇到无法显示或者直接就在显示层调用导致背景与多张图片重叠，如果每次都清除之后在显示的话发现屏幕会出现闪烁的现象。
解决办法：连续调用多张图片时要利用显存划出多个图层，每个图层对应不同功能操作，让显示层只做覆盖显示其他操作在缓存图层中进行。

一、认识显存
利用多图层操作首先先认识显存，RA8889内建128Mb显存；RA8876有两种，一种内建64Mb显存，另一种是外扩自己加SDRAM，内建或者外扩硬件上兼容，可灵活选用
1、分辨率与的显存关系
我们以800x480的分辨率，屏幕色深16位来讲，那么每层显存的要求是：800x480*16/8=768000(Bytes)；如果屏幕色深是24位色，那么显存要求是800x480x24/8=1152000(Bytes)。
RA8889内建128Mb显存（16MB），用在800x480&16位色，可以划分21个图层；用在800x480&24位色，可以划分21个图层。

2、画布图像宽度、主图像宽度和活动窗口
画布图像宽度（Canvas Image Width)，是将显存规划出最大宽度，宽度一般设定为屏宽的倍数。用户必须配置画布图像宽度以确定图像大小，并在将数据写入图像缓冲区之前配置活动窗口（Active_Window）范围。主图像宽度（Main Image Width），规划出显示缓存宽度，这个值设定和画布图像宽度（Canvas Image Width)一样即可。通过设定Main_Window_Start_XY坐标，定位当前显示窗口要显示哪个区域的图像。活动窗口（Active_Window），在图层范围内规划一个区域用于写入数据，需要设定坐标和宽、高参数。
下图举例，假设液晶屏宽是800，画布图像宽度和主图宽度均设为1600，显示区域可以任意指定的，活动区域也可以任意指定的。


二、多图层应用
1、多图层显示流程
以连续显示多张PNG数字图片形成动态效果为例，设计思路如下：
设定三个图层区域Layer1、Layer2、Layer3 分别为显示层、操作层、数据层，第一步：将PNG图片要在显示层显示的区域备份到操作层的右区域；第二步：将备份好的底图复制到操作层的左区域；第三步：在数据层先调用PNG图片再将PNG图片复制到操作层的左区域与底图重叠好；第四步：将操作层中PNG图片与底图重叠好的左区域复制显示层被备份的区域。



2、演示代码
示例: PNG数字图片的动态效果代码

1. /*RA8889初始化出现彩虹条*/
   
2.         RA8889_Initial();
   
3. /*功能例程测试环境  屏幕分辨率800x480 24bpp ARGB(8:8:8:8) */
   
4. //连续显示多张PNG图片0-9        
   
5.         SPI_NOR_initial_DMA (4,1,2,1,0);                //Flash的初始化  bus1 cs2
   
6.         DMA_24bit(1,0,0,800,480,800,0);                //背景图片tree
   
7.         
   
8.         BTE_Memory_Copy(Layer1,canvas_image_width,100,100,0,800,0,0,Layer2,canvas_image_width,400,0,12,100,100);        //备份图片Layer1(100.100)-->Layer2(400.0)
   
9.         while(1)
   
10.         {        
    
11.                 for(png_i=0;png_i<10;png_i++)  
    
12.                 {                                                               
    
13.                         BTE_Memory_Copy(Layer2,canvas_image_width,400,0,0,800,0,0,Layer2,canvas_image_width,0,0,12,100,100);        //复制底图Layer2 (400.0)-->(0.0)               
    
14.                         SPI_NOR_DMA_png (1152000+png_i*40000,Layer3,Layer2,100,100);        //调用Png数据
    
15.                         BTE_alpha_blending_32bit_Pixel_mode(100,100,100,0,0,Layer2,canvas_image_width,0,0,Layer2,canvas_image_width,Layer3);        //png显示(S0X,S0Y)<--same-->(desX,desY)                                       
    
16.                         BTE_Memory_Copy(Layer2,canvas_image_width,0,0,0,800,0,0,Layer1,canvas_image_width,100,100,12,100,100);        //将叠加好PNG图片显示  Layer2(0.0)-->Layer1(100.100)
    
17.                         delay_ms(100);
    
18.                 }
    
19.                 delay_seconds(1);
    
20.         }

复制代码

3、屏幕显示效果



4、源代码下载


分享名称：RA8889_Layers_Png_Demo.zip
分享链接：http://pan.lcdvision.com.cn/#s/-Xjf9fNg

访问密码：X4Zrg