鸿蒙应用开发项目教程 课件 第9次课 转盘式抽奖程序项目实现

《鸿蒙应用开发基础》在线开放课程项目2设计转盘式抽奖程序主讲：本课程团队项目实现目录Contents项目实现一、设计转盘式抽奖程序界面二、编写转盘式抽奖程序代码三、拓展一、设计转盘式抽奖程序界面1.任务分析转盘式抽奖程序的界面要有抽奖开始按钮、抽奖过程展示以及抽奖结果显示，其中抽奖开始页面要直观地展示可能抽中的奖品，而抽奖过程可以用动画来实现。一、设计转盘式抽奖程序界面2.代码实现（1）新建项目project2，在页面Index.ets的最前面添加如下代码：importwindowfrom'@ohos.window';importLoggerfrom'./class/Logger';（2）在页面Index.ets中”build()的前面添加如下代码：@StatescreenWidth:number=0;@StatescreenHeight:number=0;aboutToAppear(){//获取屏幕的宽与高

window.getLastWindow(context).then((windowClass:window.Window)=>{letwindowProperties=windowClass.getWindowProperties();this.screenWidth=px2vp(windowProperties.windowRect.width);this.screenHeight=px2vp(windowProperties.windowRect.height);}).catch((error:Error)=>{Logger.error('无法获取窗口大小。原因：'+JSON.stringify(error));})}一、设计转盘式抽奖程序界面2.代码实现（3）在页面Index.ets中@Entry的前面添加如下代码：importDrawModelfrom'./class/DrawModel';importPrizeDialogfrom'./class/PrizeDialog';importPrizeDatafrom'./class/PrizeData';importStyleConstantsfrom'./class/StyleConstants';importCommonConstantsfrom'./class/CommonConstants';letcontext=getContext(this);//获取上下文（4）在页面Index.ets中以@Statemessage开头的这一行替换成如下代码：privatesettings:RenderingContextSettings=newRenderingContextSettings(true);privatecanvasContext:CanvasRenderingContext2D=newCanvasRenderingContext2D(this.settings);一、设计转盘式抽奖程序界面2.代码实现（3）在页面Index.ets中以RelativeContainer(){开头的这一行开始到文件倒数第三行为止，这一段替换成如下代码：Stack({alignContent:Alignment.Center}){Canvas(this.canvasContext).width(StyleConstants.FULL_PERCENT).height(StyleConstants.FULL_PERCENT).onReady(()=>{//通过draw方法进行绘制

this.drawModel.draw(this.canvasContext,this.screenWidth,this.screenHeight);})//此处省略几行代码Image($r('app.media.ic_center'))//开始抽奖图片.width(StyleConstants.CENTER_IMAGE_WIDTH).height(StyleConstants.CENTER_IMAGE_HEIGHT).enabled(this.enableFlag).margin({top:50}).onClick(()=>{this.enableFlag=!this.enableFlag;//此处省略一行代码})}一、设计转盘式抽奖程序界面2.代码实现（3）在页面Index.ets中以RelativeContainer(){开头的这一行开始到文件倒数第三行为止，这一段替换成如下代码：.width(StyleConstants.FULL_PERCENT).height(StyleConstants.FULL_PERCENT).backgroundImage($r('app.media.ic_background'),ImageRepeat.NoRepeat).backgroundImageSize({width:StyleConstants.FULL_PERCENT,height:StyleConstants.BACKGROUND_IMAGE_SIZE})二、编写转盘式抽奖程序代码1.任务分析单击“开始”按钮即可开始抽奖，抽奖结束后会自动显示抽奖结果，用户确认后即可关闭抽奖结果。若要重新抽奖，可以重复前面的步骤进行。二、编写转盘式抽奖程序代码2.代码实现（1）在文件DrawModel.ets中，通过draw方法绘制圆形抽奖转盘。//画抽奖圆形转盘draw(canvasContext:CanvasRenderingContext2D,screenWidth:number,screenHeight:number){if(CheckEmptyUtils.isEmptyObj(canvasContext)){Logger.error('[DrawModel][draw]画布上下文为空。');return;}this.canvasContext=canvasContext;this.screenWidth=screenWidth;this.canvasContext.clearRect(0,0,this.screenWidth,screenHeight);this.canvasContext.translate(this.screenWidth/CommonConstants.TWO,screenHeight/CommonConstants.TWO);//指定画布平移距离this.drawFlower();//画外部圆盘的花瓣this.drawOutCircle();//画外部圆盘、小圈圈this.drawInnerCircle();//画内部圆盘this.drawInnerArc();//画内部扇形抽奖区域this.drawArcText();//画内部扇形区域文字this.drawImage();//画内部扇形区域奖品对应的图片this.canvasContext.translate(-this.screenWidth/CommonConstants.TWO,-screenHeight/CommonConstants.TWO);}二、编写转盘式抽奖程序代码2.代码实现（2）回到页面Index.ets，给组件Canvas添加rotate属性，给组件Image添加点击事件onClick。Canvas(this.canvasContext).width(StyleConstants.FULL_PERCENT).height(StyleConstants.FULL_PERCENT).onReady(()=>{//通过draw方法进行绘制

this.drawModel.draw(this.canvasContext,this.screenWidth,this.screenHeight);}).rotate({x:0,y:0,z:1,angle:this.rotateDegree,centerX:this.screenWidth/CommonConstants.TWO,centerY:this.screenHeight/CommonConstants.TWO})Image($r('app.media.ic_center'))//开始抽奖图片

.width(StyleConstants.CENTER_IMAGE_WIDTH).height(StyleConstants.CENTER_IMAGE_HEIGHT).enabled(this.enableFlag).margin({top:50}).onClick(()=>{this.enableFlag=!this.enableFlag;this.startAnimator();})二、编写转盘式抽奖程序代码2.代码实现（3）在页面Index.ets中build()的前面添加如下代码：@StatedrawModel:DrawModel=newDrawModel();@StaterotateDegree:number=0;@StateenableFlag:boolean=true;@StateprizeData:PrizeData=newPrizeData();dialogController:CustomDialogController=newCustomDialogController({builder:PrizeDialog({prizeData:$prizeData,enableFlag:$enableFlag}),autoCancel:false});startAnimator(){//启动动画letrandomAngle=Math.round(Math.random()*CommonConstants.CIRCLE);this.prizeData=this.drawModel.showPrizeData(randomAngle);//获取奖品信息

二、编写转盘式抽奖程序代码2.代码实现（3）在页面Index.ets中build()的前面添加如下代码：animateTo({duration:CommonConstants.DURATION,curve:Curve.Ease,delay:0,iterations:1,playMode:PlayMode.Normal,onFinish:()=>{this.rotateDegree=CommonConstants.ANGLE-randomAngle;this.dialogController.open();//弹