ArkTs+UI摇杆控制

ArkTs+UI摇杆控制

比较丑，但是，没有但是
效果

代码
下面展示一些 内联代码片。

import curves from '@ohos.curves'

@Entry
@Component
struct RockerPage {
  @State fishX: number = 200
  @State fishY: number = 100
  @State angle: number = 0
  @State src: Resource = $r('app.media.fish')
  @State isBegin: boolean = false
  private centerX: number = 120
  private centerY: number = 120
  private maxRadius: number = 100
  private radius: number = 20
  @State circleFill: string = '#403A3A3A'
  @State positionX: number = this.centerX
  @State positionY: number = this.centerY
  sin: number = 0
  cos: number = 0
  speed: number = 0
  taskId: number = -1

  build() {
    Row() {
      Stack() {
        Button('返回')
          .position({ x: 0, y: 0 })
          .backgroundColor('#20101010')
          .onClick(() => {
            this.isBegin = false
          })

        if (!this.isBegin) {
          Button('开始游戏')
            .onClick(() => {
              animateTo({
                duration: 1000
              }, () => {
                this.isBegin = true
              })
            })
        } else {
          Image(this.src)
            .position({ x: this.fishX - 20, y: this.fishY - 20 })
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
            .width(40)
            .height(40)
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: { x: -250 }
            })
        }
        //摇杆
        Row() {
          Circle({
            width: this.maxRadius * 2, height: this.maxRadius * 2
          })
            .fill('#20101010')//position的位置是组件左上角的位置在父组件容器内的坐标
              //（centerX，centerY）是当前row容器的中心坐标点
              //用centerX/centerY减去半径，即可计算出圆心处于容器中心点时，圆容器左上角的坐标值
            .position(({ x: this.centerX - this.maxRadius, y: this.centerY - this.maxRadius }))
          Circle({ width: this.radius * 2, height: this.radius * 2 })
            .fill(this.circleFill)
            .position({ x: this.positionX - this.radius, y: this.positionY - this.radius })
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({ x: 0, y: 120 })
        .onTouch(this.handleTouchEvent.bind(this))
      }
      .height('100%')
      .width('100%')
    }
    .height('100%').width('100%')
    .backgroundColor(Color.Pink)
  }

  //处理手指移动的事件
  handleTouchEvent(event: TouchEvent) {
    switch (event.type){
      case TouchType.Up:
        animateTo({curve:curves.springMotion()},
          ()=>{
          clearInterval(this.taskId)
            this.positionX = this.centerX
            this.positionY = this.centerY
            //update fish speed
            this.speed = 0
            this.angle = 0
          })

        break
      case TouchType.Down:
        this.taskId = setInterval(()=>{
          this.fishX += this.speed*this.cos
          this.fishY += this.speed*this.sin
        },40)
        break
      case TouchType.Move:
        //1.获取手指位置坐标
        let x = event.touches[0].x
        let y = event.touches[0].y
        // 2.计算手指与中心点的坐标值
        let vx = x - this.centerX
        let vy = y - this.centerY
        // 3.计算手指与中心连线和x轴正半轴的夹角
        let angle = Math.atan2(vy,vx)    //单位是弧度
        // 4.计算手指与中心点的距离
        let distance = this.getDistance(vx,vy)
        // 5.计算摇杆小球的坐标
        this.sin = Math.sin(angle)
        this.cos = Math.cos(angle)
        //add animation
        animateTo(
          {curve : curves.springMotion()},
          ()=>{
            this.positionX = this.centerX +this.cos*distance
            this.positionY = this.centerY +this.sin*distance
            //update fish position
            this.speed = 1
            this.fishX += this.speed*this.cos
            this.fishY += this.speed*this.sin
            if(Math.abs(angle*2)<Math.PI){
              this.src = $r('app.media.fish')
            }else{
              this.src = $r('app.media.fishMirror')
              angle = angle < 0 ? angle + Math.PI : angle - Math.PI
            }
            this.angle = angle*180/Math.PI
          })
        break
    }
  }

  getDistance(x:number,y:number){
    let d = Math.sqrt(x*x +y*y)
    return Math.min(d,this.maxRadius)
  }
}

跟着黑马敲的