第一部分 绘画基础―文本、图形、图像、动画

一、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
                                              讲师：李现路
                             ?版权所有-曙海教育，欢迎转摘，转摘请注明作者和出处