在HarmonyOS NEXT开发中组件旋转后，平移方向出错？

Question

在HarmonyOS NEXT开发中组件旋转后，平移方向出错？组件旋转后，组件的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) 
 
    } 
  } 
} 

Answer 1

你可以将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') 
          }) 
      ) 
      ) 
    } 
  } 
}