HarmonyOS 组件旋转后,平移方向出错

组件旋转后,组件的x, y轴还是原来的方向。代码:

import json from '@ohos.util.json'

@Entry
@Component
struct Index {
  @State imageWidth: number = 0
  @State imageHeight: number = 0
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  @State angle: number = 0
  @State rotateValue: number = 0
  @State scaleValue: number = 1
  @State pinchValue: number = 1
  @State pinchX: number = 0
  @State pinchY: number = 0
  @State centerX: number = 0
  @State centerY: number = 0

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Text('标题栏')
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)

      Column() {
        Image($r('app.media.img'))
          .width(200)
          .height(200)
          .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
          .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
          .rotate({
            angle: this.angle,
          })
          .gesture(GestureGroup(GestureMode.Parallel,
            PanGesture()
              .onActionUpdate((event: GestureEvent) => {
                if (event) {
                  this.offsetX = this.positionX + event.offsetX
                  this.offsetY = this.positionY + event.offsetY
                }
              })
              .onActionEnd(() => {
                this.positionX = this.offsetX
                this.positionY = this.offsetY
                console.info('Pan end')
              }),

            RotationGesture()
              .onActionUpdate((event: GestureEvent) => {
                if (event) {
                  this.angle = this.rotateValue + event.angle

                }
              })
              .onActionEnd((event: GestureEvent) => {
                this.rotateValue = this.angle
                console.error(`${json.stringify(event)}`)
                console.error(`${this.rotateValue}`)
                console.info('Rotation end')
              })
          )
          )
      }.width(500).height(500)

    }
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
HarmonyOS
2024-12-18 16:11:20
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

可以将gesture组合手势放在父组件进行规避,代码如下:

import json from '@ohos.util.json'

@Entry
@Component
struct Index {
  @State imageWidth: number = 0
  @State imageHeight: number = 0
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  @State angle: number = 0
  @State rotateValue: number = 0
  @State scaleValue: number = 1
  @State pinchValue: number = 1
  @State pinchX: number = 0
  @State pinchY: number = 0
  @State centerX: number = 0
  @State centerY: number = 0

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Text('标题栏')
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)

      Column() {
        Image($r('app.media.app_icon'))
          .width(200)
          .height(200)
          .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
          .translate({ x: this.offsetX, y: this.offsetY })
          .rotate({
            angle: this.angle,
          })

      }.width(500).height(500)
      .gesture(GestureGroup(GestureMode.Parallel,
        PanGesture()
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.info('Pan end')
          }),

        RotationGesture()
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              this.angle = this.rotateValue + event.angle

            }
          })
          .onActionEnd((event: GestureEvent) => {
            this.rotateValue = this.angle
            console.error(`${json.stringify(event)}`)
            console.error(`${this.rotateValue}`)
            console.info('Rotation end')
          })
      )
      )
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
分享
微博
QQ
微信
回复
2024-12-18 19:02:19


相关问题
HarmonyOS 旋转设备获取设备方向问题
845浏览 • 1回复 待解决
HarmonyOS 代码中如何设置屏幕旋转方向
1360浏览 • 1回复 待解决
HarmonyOS 组件旋转
624浏览 • 1回复 待解决
HarmonyOS 页面传参对象出错
567浏览 • 1回复 待解决
HarmonyOS 平移动画
690浏览 • 1回复 待解决
HarmonyOS web组件滚动方向判断
548浏览 • 1回复 待解决
HarmonyOS 平移动画问题
512浏览 • 1回复 待解决
HarmonyOS Text组件如何设置文字方向
655浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动效
2250浏览 • 1回复 待解决
求助,自定义组件到底哪里出错了?
2873浏览 • 1回复 待解决