HarmonyOS鸿蒙Next中实现弧形菜单功能示例代码

HarmonyOS鸿蒙Next中实现弧形菜单功能示例代码介绍
本示例介绍弧形菜单的场景化案例。

效果预览

图片名称

使用说明

进入应用会立马出现弧形菜单。
可通过滑动进行菜单旋转。

实现思路
弧形菜单展示，通过手势旋转菜单位置。核心代码如下，源码参考Index.ets

Column() {
 Stack() {
   ForEach(this.imageList, (item: string, index: number) => {
     Image($r(item))
       .width(this.ImageWidth)
       .height(this.ImageHeight)
       .border({ color: "#FFF", width: 2 })
       .position({
         x: this.points[index][0],
         y: this.points[index][1]
       })
       .objectFit(ImageFit.Auto)
       .rotate({ centerX: 100 / 2, centerY: 200 / 2, angle: this.getAngele(index) })
       .zIndex(this.imageList.length - index)
       .id(`${index}`)
   })
 }
 //centerY = 图片高度 + 圆的半径
 .rotate({ angle: this.stackAngle, centerY: 200 + 100 })
}.height('100%')
 .width('100%')
 .backgroundColor("#ffa7a7a7")
 .gesture(
   PanGesture(this.panOption)
     .onActionStart((event: GestureEvent) => {
       Logger.info('Pan start ' + event.offsetX)
       let info = event.fingerList[0]
       this.x1 = px2vp(this.screenWidth) / 2 - info.globalX
       this.y1 = 200 + 100 - info.globalY
       Logger.info('Pan start ' + this.x1 + ' ' + this.y1)
     })
     .onActionEnd((event: GestureEvent) => {
       Logger.info('Pan start ' + event.offsetY)
       Logger.info('Pan start ' + this.x2 + ' ' + this.y2)
     })
     .onActionUpdate((event: GestureEvent) => {
       Logger.info('this.stackAngle = ' + this.stackAngle)
       if (event) {
         let info = event.fingerList[0]
         this.x2 = px2vp(this.screenWidth) / 2 - info.globalX
         this.y2 = 200 + 100 - info.globalY
         this.distance = Math.sqrt((event.offsetX) * (event.offsetX) + (event.offsetY) * (event.offsetY))
         if ((this.x1 * this.y2 - this.x2 * this.y1) > 0) {
           this.stackAngle = (this.stackAngle + (this.distance / 60)) % 360
         } else {
           this.stackAngle = (this.stackAngle - (this.distance / 60)) % 360
         }
       }
     })
)

更多关于HarmonyOS鸿蒙Next中实现弧形菜单功能示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼•8 天前

在HarmonyOS鸿蒙Next中实现弧形菜单功能，可以使用ArcSlider组件。以下是一个简单的示例代码：

import { ArcSlider } from '@ohos.arcslider';

@Entry
@Component
struct ArcMenuExample {
  @State angle: number = 0;

  build() {
    Column() {
      ArcSlider({ value: this.angle, min: 0, max: 360 })
        .onChange((value: number) => {
          this.angle = value;
        })
        .width(200)
        .height(200)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

该代码创建了一个弧形滑动菜单，用户可以通过滑动来改变角度值。ArcSlider组件是鸿蒙系统提供的用于实现弧形滑动效果的UI组件。

更多关于HarmonyOS鸿蒙Next中实现弧形菜单功能示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•8 天前

在HarmonyOS鸿蒙Next中实现弧形菜单，可以通过自定义组件和动画来实现。以下是一个简单的示例代码：

public class ArcMenu extends Component {
    private float radius = 200f;
    private float startAngle = 0f;
    private float sweepAngle = 180f;

    public ArcMenu(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5f);

        RectF rectF = new RectF(0, 0, 2 * radius, 2 * radius);
        canvas.drawArc(rectF, startAngle, sweepAngle, false, paint);
    }

    public void setRadius(float radius) {
        this.radius = radius;
        invalidate();
    }

    public void setStartAngle(float startAngle) {
        this.startAngle = startAngle;
        invalidate();
    }

    public void setSweepAngle(float sweepAngle) {
        this.sweepAngle = sweepAngle;
        invalidate();
    }
}

这个示例代码创建了一个简单的弧形菜单组件，通过onDraw方法绘制弧形，并提供了设置半径、起始角度和扫描角度的方法。可以根据需求进一步扩展功能，比如添加菜单项和点击事件。