鸿蒙摇杆移动

import { Size } from '@ohos/hypium'
import formInfo from '@ohos.app.form.formInfo'
import { return01 } from './return01'
import curves from '@ohos.curves'
@Entry
@Component
struct    Page002 {
  @State src: Resource = $r('app.media.fish')
  @State fx: number = 100
  @State fy: number = 100
  @State isbegin: boolean = false
  @State mx: number = 150
  @State my: number = 150
   id01=0
  @State  a1:number=0
  @State  cos1:number=0
  @State  sin1:number=0
  id1=0
  build() {

    Stack() {
      return01()
      Row() {
        if (!this.isbegin) {
          Button('开始')
            .onClick(() => {
              this.isbegin = true
            })
        }
        else {
          Image(this.src)
            .position({
              x: this.fx,
              y: this.fy
            })
            .width(50)
            .height(50)
          Row() {
            Circle({ width: 200, height: 200 })
              .fill('#20101010')
              .position({ x: 100, y: 100 })

            Circle({ width: 100, height: 100 })
              .fill('#403a3a3a')
              .position({ x: this.mx, y: this.my })
          }.width('50%')
          .height('100%')
          .onTouch(this.touchmanage.bind(this))
        }

      }.backgroundImage($r('app.media.beach'))
      .backgroundImageSize(ImageSize.Cover)
      .width('100%')
      .height('100%')
    }

  }

  touchmanage(all: TouchEvent) {
    let y1 = all.touches[0].y
    let x1 = all.touches[0].x
    let length01 = Math.sqrt(100*100+ 100* 100)
    let   length02 =Math.sqrt((y1-200)*(y1-200)+(x1-200)*(x1-200))
       this.a1 =Math.atan2(y1-200,x1-200)
     this.cos1 = Math.cos(this.a1)
    this.sin1 =Math.sin(this.a1)
switch (all.type){
  case TouchType.Down:




        this.id01= setInterval(()  =>{
          this.fx +=this.cos1*1
          this.fy +=this.sin1*1
        },10)



  break;

  case TouchType.Move:
     if(this.id1 ==0){
     setInterval(()  =>{
      this.fx +=this.cos1*1
      this.fy +=this.sin1*1
    },1000)}



    animateTo(
      {curve:curves.responsiveSpringMotion()},
      ()  =>{

        if (this.radius01(length01,length02)==length01) {
          this.mx = (length01/length02)*x1
          this.my =(length01/length02)*y1

        }
        else {this.mx = x1 - 50
          this.my = y1 - 50}
      }
    )
    break;
  case TouchType.Up:

    clearInterval(this.id01)
   this.id1 =  1

    this.mx =150
    this.my=150
    break;

}






  }

  radius01(current: number, radius1) {
      return Math.min(current,radius1)

  }
}

摇杆移动的实现步骤

1. 摇杆圆形区域：

   • 代码中定义了一个 Circle 组件，其宽度和高度均为 200，填充颜色为 #20101010，代表摇杆的圆形区域。
   • 这个圆形区域位于屏幕的中心，x 和 y 坐标均为 100。

2. 触摸事件处理：

   • 圆形区域上绑定了触摸事件 onTouch，该事件调用 touchmanage 方法来处理触摸事件。

3. 触摸事件处理函数 touchmanage：

   • 该方法接受一个 TouchEvent 对象，代表触摸事件。
   • 方法中使用 all.touches[0].y 和 all.touches[0].x 来获取触摸点的坐标。
   • 通过计算触摸点与摇杆中心点（200, 200）之间的距离，以及触摸点与中心点连线与 x 轴的夹角 a1，来确定摇杆的方向。

4. 摇杆移动逻辑：

   • 当触摸事件类型为 TouchType.Down 时，设置一个定时器 id01，每 10 毫秒更新一次摇杆的位置 fx 和 fy。
   • 当触摸事件类型为 TouchType.Move 时，如果 id1 为 0，则设置一个定时器 id1，每 1000 毫秒更新一次摇杆的位置。同时，使用动画 animateTo 来平滑摇杆的位置，使其跟随触摸点移动。
   • 当触摸事件类型为 TouchType.Up 时，清除定时器 id01 和 id1，并将摇杆位置重置到初始位置（150, 150）。

5. 摇杆指针：

   • 代码中还定义了一个较小的圆形 Circle，其宽度和高度均为 100，填充颜色为 #403a3a3a，代表摇杆指针。
   • 摇杆指针的位置由 mx 和 my 状态变量控制，这些变量在触摸事件处理函数中根据触摸位置动态更新。