PicViewer-手机多媒体开发.doc

实践指导手册- 14 -项目操作指导手册Symbian项目三：PicViewer手机多媒体开发(Version 1.0)PicViewer手机多媒体开发一、项目名称：项目名称：PicViewer手机多媒体开发课时安排：16h二、项目目标：学习在Symbian系统中修改应用程序图标、位图制作、位图显示方法，实现浏览手机本地图片的功能。通过本次实验让学员熟悉Symbian手机处理图片的原理、方式，并掌握实现图片管理系统所需要的实践技能的目标。（1） 熟悉Symbian绘图基础（2） 掌握位图处理方法（3） 掌握图片管理的方法：主要是图片显示浏览（4） 生成手机版本，打包安装到手机运行三、项目方式：（1） 老师带领下，每名同学独立完成该任务四、项目步骤4.1任务1：简单图形的绘制（时间：120分钟）4.1.1 任务描述（1） 熟悉Symbian绘图基础：屏幕座标、图形位置及尺寸、简单图形（2） 掌握Symbian基本图形绘制方法4.1.2 任务目的（1） 掌握如何在Symbian S60应用程序中实现基本图形的绘制4.1.3 任务要求（1） 要求可以正确的通过程序在界面上绘制简单图形；4.1.4 难点提示（1） 获取窗口上下文CWindowGc& gc = SystemGc();/获取窗口上下文gc.Clear(aRect);/清屏（2） 设置画笔样式gc.SetPenStyle(CGraphicsContext:ESolidPen);/设置画笔样式gc.SetPenColor(KRgbRed);/设置画笔颜色（3） 设置画刷样式gc.SetBrushStyle(CGraphicsContext:ESolidBrush);/设置画刷样式gc.SetBrushColor(KRgbGray);/设置画刷颜色（4） 绘图实现，示例代码如下：TPoint point1(10,10);TPoint point2(aRect.Width()/2,10);/绘制线条gc.DrawLine(point1,point2);/绘制矩形gc.DrawRect(TRect(TPoint(10, 20), TSize(90, 40);/绘制圆形gc.SetPenStyle(CGraphicsContext:ENullPen);gc.SetBrushColor(KRgbBlue);TRect circleRect;circleRect.iTl = TPoint(10,70);circleRect.iBr = TPoint(60,120);gc.DrawEllipse(circleRect);4.2任务2：多位图的使用（时间：120分钟）4.2.1 任务描述（1） 熟悉多位图的基本概念（2） 掌握多位图的使用方法4.2.2 任务目的（1） 掌握如何在应用程序中使用多位图4.2.3 任务要求(1) 能正确生成多位图；(2) 编译生成手机版本，能在手机模拟器正常运行。4.2.4 难点提示(1) 准备图片i. 添加图片到文件夹/gfx中，并修改图片名称ii. 图片要求：1. 格式：*.bmp2. 位深度：24(2) mbm文件的生成i. 选择PhotoMat.mmp文件，点击右键，如下图所示：ii. 选择Add MBM Entry,弹出如下图所示窗口：1. 点击【Default】按钮，设置TaegetFile2. 选择【Header】，设置头文件为*.mbg3. 点击【Add From Project】按钮导入/gfx中图片4. 选中图片，点击【set from image】使用图片默认位深度(3) 编译多位图文件：i. 编译mbm文件，选择PhotoMat.mmp文件，点击右键，如下图所示：ii. 编译成功后生成两个文件：*.mbg和*.mbm1. 索引文件*.mbg生成位置为：C:Symbian9.1S60_3rd_MREpoc32include目录2. 多位图文件*.mbm生成位置为：C:Symbian9.1S60_3rd_MREpoc32releasewinscwudebzresourceapp目录iii. 注意：如需重新加载图片，请查找上述两个文件，删除后，再重新生成4.3任务3：图片管理功能（时间：860分钟）4.3.1 任务描述(1) 显示手机本地图片4.3.2 任务目的(1) 掌握如何在应用程序中显示图片(2) 掌握如何在应用程序处理按键事件4.3.3 任务要求(1) 掌握位图的基本处理方法(2) 掌握手机图片的显示方法(3) 生成的目标程序能在模拟器和手机上正常运行4.3.4 难点提示(1) 设置全屏，示例代码如下：i. 在PhotoMatAppView.cpp的ContructL中实现：void CPhotoMatAppView:ConstructL(const TRect& aRect)/ Create a window for this application viewCreateWindowL();/ Set the windows sizeSetRect(aRect);/TODO:set Whole screenSetExtentToWholeScreen();/ Activate the window, which makes it ready to be drawnActivateL();(2) 界面与文字的绘制，示例代码如下：void CPhotoMatAppView:Draw(const TRect& /*aRect*/) constCWindowGc& gc = SystemGc();/ Gets the controls extentTRect drawRect( Rect();/ Clears the screengc.Clear( drawRect );gc.SetPenStyle(CGraphicsContext:ESolidPen);gc.SetPenColor(TRgb(100,0,0);TInt nW = drawRect.Width();TInt nH = drawRect.Height();TInt nTop = (nH * 10) / 100;if(nTop LegendFont();gc.UseFont(pFontTemp);_LIT(KVersion, Photo Manager v1.00);TPoint ptTemp(nEdge,nTop - (nTop-pFontTemp-HeightInPixels()/2);gc.DrawText(KVersion, ptTemp);gc.DiscardFont();/draw Linegc.DrawLine(TPoint(0,nTop), TPoint(nW,nTop);gc.DrawLine(TPoint(0,nTop+nLargeHeight+nBot), TPoint(nW,nTop+nLargeHeight+nBot);(3) 图片绘制，示例代码如下：i. 在Draw()函数中实现void CPhotoMatAppView:Draw(const TRect& /*aRect*/) const/TODO:draw pic/get the mbm pathTBuf mbmfilename;mbmfilename.Copy(_L(z:resourceappsPhotoMat.mbm);/Load the first graphicCFbsBitmap* pSrcBmp = new (ELeave) CFbsBitmap();pSrcBmp-Load(mbmfilename, EMbmPhotomatBwm1);TRect rcSmall(TPoint(nEdge + nEdge / 2, nTop+nLargeHeight+nBot+nBot/2), TSize(nSmallWidth, nSmallHeight);TPoint pt(rcSmall.iTl.iX + 1, rcSmall.iTl.iY+1);TSize sz(rcSmall.Width()-2, rcSmall.Height()-2);if(pSrcBmp)gc.DrawBitmap(TRect(pt, sz), pSrcBmp);if(iSelItem = 0)gc.DrawBitmap(rcLarge, pSrcBmp);gc.DrawRect(rcSmall);/Load the second graphicpSrcBmp-Reset();pSrcBmp-Load(mbmfilename,EMbmPhotomatBwm2);pt.iX = pt.iX+sz.iWidth + nEdge / 2;if(pSrcBmp)gc.DrawBitmap(TRect(pt, sz), pSrcBmp);if(iSelItem = 1)gc.DrawBitmap(rcLarge, pSrcBmp);gc.DrawRect(TRect(pt, sz);/Load 3th graphicpSrcBmp-Reset();pSrcBmp-Load(mbmfilename, EMbmPhotomatBwm3);pt.iX = pt.iX+sz.iWidth + nEdge / 2;if(pSrcBmp)gc.DrawBitmap(TRect(pt, sz), pSrcBmp);if(iSelItem = 2)gc.DrawBitmap(rcLarge, pSrcBmp);gc.DrawRect(TRect(pt, sz);/Load 4th graphicpSrcBmp-Reset();pSrcBmp-Load(mbmfilename, EMbmPhotomatBwm4);pt.iX = pt.iX+sz.iWidth + nEdge / 2;if(pSrcBmp)gc.DrawBitmap(TRect(pt, sz), pSrcBmp);if(iSelItem = 3)gc.DrawBitmap(rcLarge, pSrcBmp);gc.DrawRect(TRect(pt, sz);delete pSrcBmp;1. 注意：a) 必须包含头文件：#include b) 必须包含库文件：fbscli.libc) 其中的iSelItem为在PhotoMatAppView.h中声明的TInt类型的成员变量(4) 按键处理，示例代码如下：i. 在OfferKeyEventL()中实现if(aKeyEvent.iCode = EKeyRightArrow)&(aType = EEventKey)if(iSelItem + 1 = 0)iSelItem -= 1;DrawDeferred();return EKeyWasNotConsumed;(5) 效果图如下所示：(6) 打包安装到手机上：ii. 注意mbm文件的路径在模拟器上与在手机上可能不一致，需要动态获取：1. 在AppUi.h中声明动态获取路径的函数，如下所示：public:TFileName GetDrive();2. 在AppUi.cpp中实现函数，如下所示：TFileName CPhotoMatAppUi:GetDrive()TFileName dataPath = BaflUtils:DriveAndPathFromFullName(Application()-DllName();dataPath.SetLength(2);return dataPath;3. 修改PhotoMatAppView.cpp的Draw()函数中，获取文件路径部分的代码，如下所示：void CPhotoMatAppView:Draw(const TRect& /*aRect*/) const/TODO:draw pic/get the mbm pathCPhotoMatAppUi* AppUi = (CPhotoMatAppUi*)CEikonEnv:Static()-AppUi();_LIT(KTxtMbmFileName,resourceappsPhotoMat.mbm);TFileName mbmfilename = AppUi-GetDrive();mbmfilename.Append(KTxtMbmFileName);/Load the firs