当前位置: 首页 > 科技观察

OpenHarmonyArkUI+原生绘图幸运轮

时间:2023-03-19 15:38:43 科技观察

更多内容请访问:鸿蒙科技社区https://harmonyos.51cto.com,与华为共同打造官方全部可改(菜单用于编辑奖项,后面会完善),如下:main函数实现转盘抽奖功能,可以设置中奖概率。奖励的数量和内容可以自由设置。原生html\css\js代码,不使用资源文件,可以复用。设计时需要考虑的问题1.控件是使用已有的图片还是通过CSS绘制?首先,使用图片作为控件。考虑到奖励内容的可编辑性,还是老老实实画控件比较好。2、各奖项的概率如何设计?首先生成一个随机数,根据随机数的值确定奖品的内容。假设所有奖项的取值范围都位于0100的数轴上,一等奖的取值范围为010,二等奖的取值范围为10~30,三等奖的取值范围为30~35。..通过设置每个奖品的取值范围来确定奖品的权重,可以控制中奖概率。3.如何让奖项可编辑?我将所有奖项存储在一个数据数组中。首先,我可以通过遍历数组中的奖励信息来绘制轮播。这是第一步。之后通过菜单功能提供一个列表控件,使其可以对数组中的信息进行增删改查,这是第二步。在界面加载的onShow()函数中初始化,这样每次界面显示时,转盘就可以更新。具体代码index.hml幸运大转盘

绘图Menu外层是转盘整体,包括转盘和箭头。我的箭头是结合圆形+矩形+方形平移旋转而成的(虽然有点笨,但没想到其他方法)。转盘是通过移动画笔的起点并旋转它来逐个扇区绘制的画布。有两个按钮,抽奖是转动转盘实现抽奖逻辑。菜单按钮跳转到一个新的界面,实现对奖项内容的编辑,当然这还没完。..index.css.container{flex-direction:column;align-items:center;justify-content:space-between;}.title{font-size:38px;font-weight:600;height:20%;}.outer{position:relative;}.canvas{width:360px;height:400px;}.circle{position:absolute;width:40px;height:40px;background-color:darkred;border-radius:20px;transform:翻译(160px,180px);}.rectangle{位置:绝对;宽度:20px;高度:40px;背景颜色:深红色;变换:翻译(170px,150px);}.square{位置:绝对;宽度:20px;高度:20px;背景颜色:深红色;顶部:140px;左:170px;变换:旋转(45度);}.btns{justify-content:space-around;}.button{margin-top:10%;height:10%;font-size:30px;font-weight:600;}画布的宽度和高度决定了转盘的大小。在代码中,转盘的半径设置为画布宽度一半的长度。同时,由于箭头是由圆形、矩形和正方形组成的,因此它们的偏移量和大小也是相对于.canvas的属性取的。如果尺寸发生变化,则需要进行调整。为什么不画箭头?如果画布上也画了箭头,那我就无法实现转盘转动,箭头不动的动画。画布是一个整体。index.jsimportpromptfrom'@system.prompt';importrouterfrom'@system.router';exportdefault{data:{//1.1创建获奖信息infoArr:[{name:'一等奖'},{name:'二等奖prize'},{name:'三等奖'},{name:'四等奖'},{name:'五等奖'},{name:'六等奖'},{name:'七号奖'},{name:'未中奖'},],//1.2画布大小circleHeight:400,circleWidth:360,//1.3扇形弧度arcAngle:0,//1.4扇形角jiaoDu:0,//1.4动画参数animation:'',options:{duration:5000,fill:'forwards',easing:'cubic-bezier(.2,.93,.43,1);',},},onShow(){constca=this.$element('画布');constctx=ca.getContext('2d');//2.设置参数//2.1定义圆心,显示在画布中间varx0=this.circleWidth*0.5;vary0=this.circleHeight*0.5;//2.2定义半径varradius=this.circleWidth*0.5;//2.3扇形弧this.arcAngle=360/this.infoArr.length*Math.PI/180;//2.4扇形anglethis.jiaoDu=360/this.infoArr.length;//2.5定义起始弧度,箭头向上,起始度数需要-90degvarbeginAngle=this.arcAngle*0.5-90*Math.PI/180;//3。Traverse,Drawsectorfor(vari=0;i