HarmonyOS7 旋转手势：RotationGesture 实现双指旋转组件

文章目录前言效果展示实现原理RotationGesture 的工作方式旋转的渲染代码详解状态变量可旋转的组件角度显示与重置完整代码进阶技巧角度吸附限制旋转范围旋转 缩放组合写在最后前言旋转手势在各种创意类 App 中很常见——照片编辑器里旋转图片、地图里旋转视角、游戏中旋转道具。ArkUI 提供了RotationGesture来检测双指旋转返回旋转角度。今天来实现一个可旋转的组件实时显示旋转角度并支持重置。效果展示一个橙色的正方形里面有十字线和旋转图标。用户用两根手指旋转方块跟着旋转。上方实时显示当前旋转角度。底部有重置角度按钮。实现原理RotationGesture 的工作方式RotationGesture检测两根手指连线的角度变化。当两根手指的连线从水平变成倾斜时event.angle就是旋转的角度值正值顺时针负值逆时针。跟 PanGesture 和 PinchGesture 一样event.angle是相对于本次手势起点的相对值需要累加。当前角度 上次角度 本次手势的 angle旋转的渲染ArkUI 的.rotate()属性用来旋转组件.rotate({angle:this.angle})angle正值表示顺时针旋转单位是度degree。代码详解状态变量Stateangle:number0StatelastAngle:number0两个变量当前显示角度和上次手势结束时的角度。可旋转的组件Column(){Stack(){Column(){}.width(4).height(60).backgroundColor(#FFFFFF)Column(){}.width(60).height(4).backgroundColor(#FFFFFF)Column(){Text(⟳).fontSize(30).fontColor(#FFFFFF)}.offset({x:0,y:-40})}}.width(140).height(140).backgroundColor(#FFA500).borderRadius(20).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).rotate({angle:this.angle}).gesture(RotationGesture({fingers:2}).onActionUpdate((event:GestureEvent){this.anglethis.lastAngleevent.angle}).onActionEnd((){this.lastAnglethis.angle}))方块内部用两个细长的白色矩形交叉形成十字线加上一个旋转符号⟳视觉上暗示可以旋转。.rotate({ angle: this.angle })让整个方块按当前角度旋转。旋转是围绕组件中心点进行的。角度显示与重置Text(旋转角度:${Math.floor(this.angle)}°).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({bottom:24})Button(重置角度).width(100%).height(42).backgroundColor(#E0E0E0).borderRadius(10).fontColor(#333333).fontSize(15).margin({top:20}).onClick((){this.angle0this.lastAngle0})Math.floor取整显示角度避免小数位看着乱。重置按钮把两个状态变量都清零。完整代码EntryComponentstruct RotationGesturePage{Stateangle:number0StatelastAngle:number0build(){Column(){Column(){Text(旋转手势).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})Text(旋转角度:${Math.floor(this.angle)}°).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({bottom:24})Column(){Stack(){Column(){}.width(4).height(60).backgroundColor(#FFFFFF)Column(){}.width(60).height(4).backgroundColor(#FFFFFF)Column(){Text(⟳).fontSize(30).fontColor(#FFFFFF)}.offset({x:0,y:-40})}}.width(140).height(140).backgroundColor(#FFA500).borderRadius(20).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).rotate({angle:this.angle}).gesture(RotationGesture({fingers:2}).onActionUpdate((event:GestureEvent){this.anglethis.lastAngleevent.angle}).onActionEnd((){this.lastAnglethis.angle}))Button(重置角度).width(100%).height(42).backgroundColor(#E0E0E0).borderRadius(10).fontColor(#333333).fontSize(15).margin({top:20}).onClick((){this.angle0;this.lastAngle0})}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12).alignItems(HorizontalAlign.Center)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}进阶技巧角度吸附让角度在接近 0°、90°、180°、270° 时自动吸附.onActionEnd((){this.lastAnglethis.angleconstsnappedMath.round(this.angle/90)*90if(Math.abs(this.angle-snapped)10){animateTo({duration:200},(){this.anglesnappedthis.lastAnglesnapped})}})当角度距离 90 的整数倍不超过 10 度时自动吸附到整数值。限制旋转范围如果只需要 0-360 度的范围.onActionUpdate((event:GestureEvent){letnewAnglethis.lastAngleevent.anglethis.angle((newAngle%360)360)%360})用取模运算把角度限制在 0-360 范围内。旋转 缩放组合用GestureGroup同时支持旋转和缩放.gesture(GestureGroup(GestureMode.Parallel,RotationGesture({fingers:2}).onActionUpdate((event){this.anglethis.lastAngleevent.angle}).onActionEnd((){this.lastAnglethis.angle}),PinchGesture({fingers:2}).onActionUpdate((event){this.scaleMath.max(0.5,Math.min(3,this.lastScale*event.scale))}).onActionEnd((){this.lastScalethis.scale})))GestureMode.Parallel允许两个手势同时识别——用户一边旋转一边缩放两个效果叠加。写在最后RotationGesture是 ArkUI 手势家族中最酷的一个。双指旋转的操作方式直觉且有趣。.rotate()属性配合手势回调几行代码就能实现流畅的旋转效果。旋转手势最常见的应用是图片编辑和地图配合缩放和拖拽就能实现一个功能完整的画布操作。