【鸿蒙实战开发项目】小游戏-遥感控制二

前言

前面介绍了鸿蒙新建项目以及界面部署，并未实现方向逻辑，上下左右控制，这篇来搞一下。首先如果我们用上下左右来控制很显然是不行的，因为我们还希望斜着也能游动，所以只能使用摇杆来试下，大家都肯定玩过王者荣耀，左下角的摇杆控制英雄走动，而且滑动的时候手指不自觉就滑出摇杆圈了，但是任务已经在动，这就物理摇杆和虚拟摇杆的区别，小时候玩过手柄吧，你手柄就不会出现摇出界的情况，因为是实体的，一旦出界你是有感触的，下意识就会修正，但虚拟的摇杆就很容易出界，所以我们要保证就算出界了只要手指没有抬起依旧可以触发事件。

1、摇杆布局

我们需要把←↑↓→替换成圆圈，方式有多种，看你喜欢。

●我们可以通过设置组件的弧度让其成圆形
●Circle：系统给我们提供的圆形

首先我们先看一下需要哪些变量，一定要提前定义好，统一操作一个变量。

●大圆有半径，有中心点（可以理解为初始点）
●小圆（做摇杆用）有半径，有拖动位置

// 摇杆的中心位置
@State centerX: number = 120
@State centerY: number = 120

//摇杆的初始位置
@State positionX: number = this.centerX
@State positionY: number = this.centerY

//半径
@State radiusMax: number = 100
// 小圆半径
@State radiusMin: number = 20
 

定义好之后就可以初始化位置了

Row() {
  Circle({ width: this.radiusMax * 2, height: this.radiusMax * 2 })
    .fill('#50f1eded')
    .position({ x: this.centerX - this.radiusMax, y: this.centerY - this.radiusMax })


  Circle({ width: this.radiusMin * 2, height: this.radiusMin * 2 })
    .fill('#50f1eded')
    .position({ x: this.positionX - this.radiusMin, y: this.positionY - this.radiusMin })
}
.width(240)
.height(240)
.position({ x: 0, y: 120 })
.justifyContent(FlexAlign.Center)

上面需要注意的是x: this.centerX - this.radiusMax，我们知道屏幕的起始点是从左上角开始延伸的，组件的起始位置也是从左上角开始的，我们定义的是中心点，所以要减去圆半径，不然的话就偏移了