了解更多开源请访问:开源基础软件社区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
