第一部分 绘画基础—文本、图形、图像、动画一、MMI 架构1．WGUILayer 包装后的GUI,WGUI是图形系统中的模板子系统。高级控件2．GUILayer 图形系统中的绘画子系统 可以做图形，各种几何图形；文本，文字或字符串；填充，将图形和图像整合到一起；控件。3．GDILayer Graphic：这里面绘制的图形会用响应的硬件加速。 Image:绘制动画，用的是GDI方法 Font:字体管理 LCD&Layers:处理层二、排版常量：常量可能会有一些宏与之作用相同，如MMI_MENUITEM_HEIGHT 与MMI_menuitem_height 都表示菜单项的高度，但建议使用MMI_menuitem_height，因为MMI_MENUITEM_HEIGHT 是菜单项高度的系统初始值，而这个高度在运行时是有可能变化的，MMI_menuitem_height 会依情况自行变化，所以在使用排版常量时建议使用上面列出的这些值。三、常用的颜色表示方法：GUI: {255,103,102,100}---255,103,102(RGB的值)，100--（透明度）GDI: {255,103,102,100}---255(透明度)，103,102,100-- RGB的值四、文本1．字体用法示例：stFontAttribute f={0};f.size=LARGE_FONT;gui_set_font(&f);2.带边框的文字用法示例：gui_set_text_border_color(UI_COLOR_GREEN);gui_print_bordered_text(L"Hello World");3.精确排版用法示例：S32 x,y,w,h;gui_measure_string(L"Hello World",&w,&h);x=(UI_device_width-w)/2;y=(UI_device_height-h)/4;gui_move_text_cursor(x,y);五、图形（一）点示例：gui_putpixel(UI_device_width/2,UI_device_height/2,UI_COLOR_BLACK);(二）线示例：gui_line(30,100,150,140,UI_COLOR_BLACK);（三）框示例：gui_draw_rectangle(x-4,y-4,x+w+4,y+h+4,UI_COLOR_RED);（四）填充框示例：gui_fill_rectangle(x,y,x+w,y+h,UI_COLOR_GREY);(五）带框填充矩形示例：gdi_draw_frame_rect(x-4,y-4,x+w+4,y+h+4,gdi_act_color_from_rgb(255,204,255,102),GDI_COLOR_RED,3);注意：（1）gdi_act_color_from_rgb(255,204,255,102)---填充色（2）GDI_COLOR_RED--边框的颜色（3） 3--边框的宽度六、图像（一）图像的存储方式1．资源：（1）资源ID（2）资源Buffer,即以GetImage（IMAGE_ID）方式由资源ID转换过来的2．文件：从文件系统中动态获取图像3．Buffer与资源存储方式不同，资源存储的图像内容中加入了我们自定义的格式数据，而这所说的buffer只有纯粹图像数据（如网络在线下载的临行图像数据等）。（二）静态图像示例：#include "MainMenuDef.h"gdi_image_draw_id(30,110,MAIN_MENU_MU);(二)静态图像示例：#include "MainMenuDef.h"gdi_image_draw_id(30, 110, MAIN_MENU_MATRIX_ORGANIZER_ICON);(三）缩放示例：gdi_image_draw_resized_id(30,100,20,30,MAIN_MENU_MATRIX_ORGANIZER_ICON);(四）动画效果示例：gdi_handle my_anim;void mmi_myapp_entry(void){gdi_anim_draw_id(50,100,MAIN_MENU_MATRIX_ORGANIZER_ANIMATION,&my_anim);}停止动画：示例：void stop_my_anim(void){gdi_anim_stop(my_anim);}void mmi_myapp_entry(void){gdi_anim_draw_id(50,100,MAIN_MENU_MATRIX_ORGANIZER_ANIMATION,&my_anim);SetKeyHandler(stop_my_anim,KEY_LSK,KEY_EVENT_UP);}第二部分 绘画进阶--背景一、控制背景绘画的结构体typedef struct _UI_filled_area{dword flags; //总控制标志UI_image_type b; //背景图像gradient_color* gc; //递进颜色color c; //背景色color ac; //替换色color border_color; //边框颜色color shadow_color; //阴影颜色UI_transparent_color_type transparent_color; //透明色} UI_filled_area二、以颜色为背景的处理方法UI_filled_area filler={0};filler.flags=UI_FILLED_AREA_TYPE_COLOR|UI_FILLED_AREA_BORDER|UI_FILLED_AREA_SHADOW;filler.c=UI_COLOR_GREY;filler.border_color=UI_COLOR_DARK_GREY;filler.shadow_color=UI_COLOR_3D_FILLER;gui_draw_filled_area(20,20,156,150,&filler);扩展理解：1．颜色控制标志2．边框控制标志3．阴影控制标志三、以递进色为背景1。递进色结构体typedef struct_gradient_color{color *c; //颜色列表，数量由最后一个参数n决定byte *p; //百分比列表，个数为n-1个，依次表示两个相邻颜色递进宽度占整个宽度的百分比；byte n; //颜色的数量}gradient_color;2.例子static color g_colors[3]={{255,0,0},{0,255,0},{0,0,255}};static U8 per[2]={30,70};gradient_color gc={g_colors,perc,3};filler.flags=UI_FILLED_AREA_TYPE_GRADIENT_COLOR;filler.gc=&gc;3.渐变的扩展知识另外还有两个参数控制递进色的显示方式：UI_FILLED_AREA_HORIZONTAL_FILL： 水平方式递进显示，此为默认方式，可以不用设。UI_FILLED_AREA_VERTICAL_FILL： 垂直方式递进显示，从上到下递进显示。UI_FILLED_AREA_FLIP_FILL： 反转显示，将递进色从右至左，或从下至上显示。四、图像背景1.纹理示例：filler.flags=UI_FILLED_AREA_TYPE_TEXTURE;filler.b=GetImage(MAIN_MENU_MATRIX_ORGANIZER_ICON);2.一张图片做背景示例：filler.flags=UI_FILLED_AREA_TYPE_BITMAP;filler.b=GetImage(MAIN_MENU_MATRIX_ORGANIZER_ICON);五、3D效果示例：filler.flags=UI_FILLED_AREA_TYPE_3D_BORDER;filler.c=UI_COLOR_GREY; 完整版本请见http://www.51qianru.cn/bbs/ 曙海教育 曙海3G通信学院 (课程:DSP培训,FPGA培训,MTK培训,Android培训，iPhone培训) 电话：021-51875830 网址：http://www.51qianru.cn 讲师：李现路 ?版权所有-曙海教育，欢迎转摘，转摘请注明作者和出处
