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)
}
}
摇杆移动的实现步骤
-
摇杆圆形区域:
- 代码中定义了一个
Circle
组件,其宽度和高度均为 200,填充颜色为#20101010
,代表摇杆的圆形区域。 - 这个圆形区域位于屏幕的中心,x 和 y 坐标均为 100。
- 代码中定义了一个
-
触摸事件处理:
- 圆形区域上绑定了触摸事件
onTouch
,该事件调用touchmanage
方法来处理触摸事件。
- 圆形区域上绑定了触摸事件
-
触摸事件处理函数
touchmanage
:- 该方法接受一个
TouchEvent
对象,代表触摸事件。 - 方法中使用
all.touches[0].y
和all.touches[0].x
来获取触摸点的坐标。 - 通过计算触摸点与摇杆中心点(200, 200)之间的距离,以及触摸点与中心点连线与 x 轴的夹角
a1
,来确定摇杆的方向。
- 该方法接受一个
-
摇杆移动逻辑:
- 当触摸事件类型为
TouchType.Down
时,设置一个定时器id01
,每 10 毫秒更新一次摇杆的位置fx
和fy
。 - 当触摸事件类型为
TouchType.Move
时,如果id1
为 0,则设置一个定时器id1
,每 1000 毫秒更新一次摇杆的位置。同时,使用动画animateTo
来平滑摇杆的位置,使其跟随触摸点移动。 - 当触摸事件类型为
TouchType.Up
时,清除定时器id01
和id1
,并将摇杆位置重置到初始位置(150, 150)。
- 当触摸事件类型为
-
摇杆指针:
- 代码中还定义了一个较小的圆形
Circle
,其宽度和高度均为 100,填充颜色为#403a3a3a
,代表摇杆指针。 - 摇杆指针的位置由
mx
和my
状态变量控制,这些变量在触摸事件处理函数中根据触摸位置动态更新。
- 代码中还定义了一个较小的圆形