文章来源地址https://www.toymoban.com/news/detail-799023.html
@Entry
@Component
struct OfficialPanGesturePage {
@State message: string = '默认只左右移动'
@State offsetX: number = 0
@State offsetY: number = 0
@State positionX: number = 0
@State positionY: number = 0
//默认pan的参数，1根手指，左右方向
private panOption: PanGestureOptions = new PanGestureOptions({fingers:1, direction:PanDirection.Left | PanDirection.Right})
build() {
Column() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.height(200)
.width(300)
.padding(20)
.border({width:3})
.margin(50)
//更新Text的位置
.translate({x:this.offsetX,y:this.offsetY,z:0})
.gesture(PanGesture(this.panOption)
.onActionStart(() => {
console.log('pan gesture start')
})
.onActionUpdate((event: GestureEvent) => {
this.offsetX = this.positionX+event.offsetX
this.offsetY = this.positionY+event.offsetY
console.log('pan gesture update')
})
.onActionEnd(() => {
this.positionX = this.offsetX
this.positionY = this.offsetY
console.log('pan gesture end')
})
)
Button('修改为四个方向条件')
.type(ButtonType.Capsule)
.onClick(() => {
this.message = '四个方向都可移动'
this.panOption.setDirection(PanDirection.All)
})
}
.width('100%')
.height('100%')
}
}文章来源：https://www.toymoban.com/news/detail-799023.html
到了这里，关于鸿蒙开发之手势Pan的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
