《鴻蒙應用開發(fā)基礎》在線開放課程項目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();//畫內部扇形抽獎區(qū)域this.drawArcText();//畫內部扇形區(qū)域文字this.drawImage();//畫內部扇形區(qū)域獎品對應的圖片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();//彈