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

HarmonyOS-基于ArkUI的图片旋转校验(JS)_0

时间:2023-03-14 23:23:51 科技观察

了解更多开源请访问:开源基础软件社区https://ost.51cto.com前言通过学习别人的滑块组件衍生出来的小组件,本文主要结合HarmonyOS官网的相关组件和通用API实现图片的旋转验证——需要拖动滑块才能恢复图片的正确旋转。验证通过。效果演示实现原理触发条件基于HarmonyOS通用事件touchstart、touchmove、touchend,分别在手指刚触屏、手指触屏后移动、手指触屏结束时触发;滑块效果通过touches触摸事件属性集合实现,返回触摸点在屏幕上的信息数组,获取localX到被触摸组件左上角的水平距离,动态计算子宽度元素实现滑块效果。实现图片旋转效果初始化在360°内随机生成角度,设置图片原点,将360°除以100得到圆相对于上滑动距离的步长除以总长度滑块,最后将图像的原点添加到相等的旋转后角。使用的官方API通用方法getBoundingClientRect()获取元素的大小及其相对于窗口的位置。属性类型widthnumber描述了元素的宽度。heightnumber元素的高度。leftnumber元素左边框距窗口的偏移量。topnumber元素上边框距窗口的偏移量。通用事件名称参数描述是否支持冒泡touchstartTouchEvent手指刚接触屏幕时触发该事件。是5+touchmoveTouchEvent当手指触摸屏幕后移动时触发该事件。5+touchendTouchEvent手指触摸屏幕结束时触发该事件。它是touchesArray触摸事件的5+属性类型的集合,包括触摸点在屏幕上的信息数组。属性类型描述globalXnumber距屏幕左上角(不包括状态栏)的水平距离。屏幕的左上角是原点。globalYnumber是距离屏幕左上角(不包括状态栏)的垂直距离。屏幕的左上角是原点。localXnumber是距离被触摸组件左上角的水平距离。组件的左上角是原点。localYnumber是距离被触摸组件左上角的垂直距离。组件的左上角是原点。实现过程1、htm部分">拖动滑块旋转到正确位置

请拖动到正确位置验证通过验证失败,请重试>>>>>>2、css部分.slider-wrapper{width:100%;显示:弹性;对齐项目:居中;弹性方向:列;背景颜色:浓汤;位置:相对;}.title{宽度:100%;字体大小:20px;文本对齐:居中;}.imagesArr{宽度:90%;}.img{高度:200px;}.pic{高度:200px;宽度:200px;位置:绝对;左:62px;top:0;}.content{宽度:360px;显示:弹性;对齐项目:居中;弹性方向:行;位置:相对;顶部边距:50px;位置:相对;}#slider{宽度:300px;高度:50px;背景色:#0fbda0;显示:弹性;justify-content:center;}.text{font-size:15px;}.fail{color:red;}.success{color:black;}.slider-main{background-color:#73E9C5;宽度:0;高度:100%;位置:绝对;左:0;顶部:0;border:1pxsolid#d9f3ef;}.dot{宽度:50px;高度:50px;0fbda0;位置:绝对;底部:-5px;border-radius:5px;}.dottext{text-align:center;左填充:5px;颜色:#A69E9E;}.imageblock{高度:50px;;位置:绝对;right:10px;}3.jspartexportdefault{data:{progress:0,width:0,step1:1,dotLeft:0,img:'../../common/images/succes.jpg',imageblock:false,textblock:true,success:false,fail:false,done:true,numdeg:Math.round(Math.random()*360),//初始化随机角度startNumdeg:0,textblock2:false,imagesArr:[{src:'common/images/ro.jpg',duan:'common/images/ro.png'},],},onInit(){this.startNumdeg=this.numdeg;},//控制点击结束后的样式Chooseend(){if(this.success&&this.imageblock){return}if(!this.textblock){this.disable=true}console.log('Chooseend==this.startNumdeg=='+this.startNumdeg+'===this.numdeg==='+this.numdeg)if(this.width&&Math.abs(this.numdeg-360)<=5){this.width=240;这个.progress=100;this.textblock=false;这个。失败=假;这个.成功=真;this.done=false;this.textblock2=false;这个.dotLeft=0;this.numdeg=0this.imageblock=true;}else{this.width=0;这个.progress=0;这个。失败=真;这个.成功=假;this.done=false;this.textblock2=true;this.textblock=falsethis.dotLeft=0this.numdeg=this.startNumdeg+(360/100)*(this.width/240)*100}},boxChoose(e){if(this.success&&this.imageblock){返回}letslider=this.$element('slider')letwidth=e.touches[0].localX//获取点击时从容器左侧开始的位置this.dotLeft=widthletelementWidth=slider.getBoundingClientRect().width//元素的宽度//正方形的偏移阈值if(this.dotLeft>=elementWidth){this.dotLeft=240}letcompare=elementWidth/(100/this.step1)//根据步长计算每一步的宽度2.4this.width=Math.ceil(width/compare)*比较//滑动距离this.width=this.width<0?0:(this.width>240?240:this.width)this.numdeg=this.startNumdeg+360*(this.width/240)//图像处理this.progress=Math.abs(this.width/elementWidth*100)//slider滑块if(this.width>0){this.fail=false;this.done=true}if(this.width>=240){this.width=280}},}总结本文是对滑块的扩展练习,也是比较常用的组件。后续的功能还有待完善,比如风格、功能、代码优化等等!了解更多开源知识,请访问:开源基础软件社区https://ost.51cto.com