当前位置:网站首页>HarmonyOS - 基于ArkUI (JS) 实现图片旋转验证
HarmonyOS - 基于ArkUI (JS) 实现图片旋转验证
2022-08-09 16:57:00 【51CTO】
作者:王少丽
前言
通过学习其他人的slider滑块组件衍生出的小组件, 本文主要结合HarmonyOS官网上的相关组件以及通用API,来实现一个图片的旋转验证 – 需拖动滑块将图片旋转还原为正确,方可验证通过。
效果演示
实现原理
触发条件
基于HarmonyOS通用事件touchstart和touchmove,touchend,通过手指刚触摸屏幕时触发、手指触摸屏幕后移动时触发事件,手指触摸屏幕后结束时触发事件;
实现slider滑块效果
通过touches触摸事件的属性集合,返回屏幕触摸点的信息数组,拿到localX距离被触摸组件左上角横向距离,动态计算出子元素的宽度来实现slider滑块效果。
实现图片旋转效果
初始化随机生成360°以内的角度,设置图片原点,360°除以100就得到圆的步长比上滑动距离除滑块总长度,最后加上图片原点就等于旋转后的角度。
使用到的官方API
通用方法
getBoundingClientRect()
获取元素的大小及其相对于窗口的位置。
属性 | 类型 | 描述 |
---|---|---|
width | number | 该元素的宽度。 |
height | number | 该元素的高度。 |
left | number | 该元素左边界距离窗口的偏移。 |
top | number | 该元素上边界距离窗口的偏移。 |
通用事件
名称 | 参数 | 描述 | 是否支持冒泡 |
---|---|---|---|
touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。 | 是5+ |
touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是5+ |
touchend | TouchEvent | 手指触摸屏幕后结束时触发该事件。 | 是5+ |
属性 | 类型 | 说明 |
---|---|---|
touches | Array<TouchInfo> | 触摸事件时的属性集合,包含屏幕触摸点的信息数组。 |
属性 | 类型 | 说明 |
---|---|---|
globalX | number | 距离屏幕左上角(不包括状态栏)横向距离。屏幕的左上角为原点。 |
globalY | number | 距离屏幕左上角(不包括状态栏)纵向距离。屏幕的左上角为原点。 |
localX | number | 距离被触摸组件左上角横向距离。组件的左上角为原点。 |
localY | number | 距离被触摸组件左上角纵向距离。组件的左上角为原点。 |
实现过程
1. htm部分
2. css部分
3. js部分
总结
这篇文章是我通过对slider滑块的一个延伸练习,也算是一个比较常用的组件,后续部分功能还需完善,比如在样式、功能及代码优化方面等等,还有很多不足之处,大家有想法的可以提出来,我们一起学习,共同进步!
更多原创内容请关注: 中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
边栏推荐
- 动态RDLC报表(七)
- mysql generates random name, mobile number, date
- 【燃】是时候展现真正的实力了!一文看懂2022华为开发者大赛技术亮点
- 论如何提升学习的能力
- MySQL索引的B+树到底有多高?
- 集合框架Collection与Map的区别和基本使用
- Engaged in software testing for a year, only basic functional testing, how to further study?
- Self-taught software testing, how far can I go out to find a job?
- Can't install the Vmware virtual machine on the Ark Kai server?
- win10 uwp 绑定静态属性
猜你喜欢
What platform is EPIC?
手写flexible.js的原理实现,我终于明白移动端多端适配
在 .NET MAUI 中如何更好地自定义控件
神秘的程序员(20-30)
Volatile:JVM 我警告你,我的人你别乱动
秋招面试大厂总被刷下来,你这样做保准你事半功倍!
Detailed explanation of JVM memory model and structure (five model diagrams)
BSN季度版本2022年8月31日迭代更新预告
十七、一起学习Lua 错误处理
【时序数据库InfluxDB】Windows环境下配置InfluxDB+数据可视化,以及使用 C#进行简单操作的代码实例...
随机推荐
Jenkins使用pipeline部署服务到远程服务器
如何仿造一个websocket请求?
测试开发是什么,为什么现在这么吃香?
leetcode/链表中环的入口节点
openEuler Xiong Wei: How do you view the SIG organization model in the open source community?
The principle implementation of handwritten flexible.js, I finally understand the multi-terminal adaptation of the mobile terminal
我不写单元测试,被批了
.NET Community Toolkit 8.0.0 版本发布
SkiaSharp 之 WPF 自绘 粒子花园(案例版)
mysql生成随机姓名、手机号、日期
win10 uwp 手动锁Bitlocker
方舟开服务器Vmware虚拟机安装不上?
Discuz! Forum program installation + template configuration tutorial
传统数据中台又贵又复杂?何不试一试永久免费的下一代数据中台
在 C# 中如何检查参数是否为 null
The strongest distributed lock tool: Redisson
[SUCTF 2019]CheckIn
GoFrame缓冲输出到客户端Flush()
Can't install the Vmware virtual machine on the Ark Kai server?
[极客大挑战 2019]HardSQL