HarmonyOS/OpenHarmony(Stage 모델) 애플리케이션 개발 단일 제스처(2)

3. 드래그 제스처(PanGesture)
.PanGestureOptions(value?:{ 손가락?:번호; 방향?:PanDirection; 거리?:번호}) 드래그
제스처는 드래그 제스처 이벤트를 트리거하는 데 사용되며 슬라이드는 최소 슬라이딩 거리에 도달합니다. (기본값 드래그 제스처가 성공적으로 인식되면(5vp) 세 가지 선택적 매개변수가 있습니다.
손가락: 선택적 매개변수, 드래그 제스처를 트리거하는 데 필요한 최소 손가락 수를 선언하는 데 사용되며 최소값은 1, 최대값은 10이면 기본값은 1입니다.
방향: 드래그를 트리거하는 제스처 방향을 선언하는 데 사용되는 선택적 매개변수 이 열거형 값은 논리 AND(&) 및 논리 OR(|) 연산을 지원합니다. 기본값은 Pandirection.All입니다.
distance: 드래그를 트리거하는 최소 드래그 인식 거리를 선언하는 데 사용되는 선택적 매개변수이며 단위는 vp이며 기본값은 5입니다.
예를 들어 Text 구성 요소에 드래그 동작을 바인딩하면 드래그 동작의 콜백 함수에서 구성 요소의 레이아웃 위치 정보를 수정하여 구성 요소를 드래그할 수 있습니다.

// xxx.ets
@Entry
@Component
struct Index {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;

  build() {
    Column() {
      Text('PanGesture Offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
        .height(200)
        .width(300)
        .padding(20)
        .border({ width: 3 })
          // 在组件上绑定布局位置信息
        .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
        .gesture(
          // 绑定拖动手势
          PanGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start');
            })
              // 当触发拖动手势时，根据回调函数修改组件的布局位置信息
            .onActionUpdate((event: GestureEvent) => {
              this.offsetX = this.positionX + event.offsetX;
              this.offsetY = this.positionY + event.offsetY;
            })
            .onActionEnd(() => {
              this.positionX = this.offsetX;
              this.positionY = this.offsetY;
            })
        )
    }
    .height(200)
    .width(250)
  }
}

4. 핀치 제스처(PinchGesture)
.PinchGesture(value?:{fingers?:number; distance?:number}) 핀치
제스처는 핀치 제스처 이벤트를 트리거하는 데 사용됩니다. 핀치 제스처를 트리거하는 최소 손가락 수는 2개입니다. 최대 5개의 손가락, 최소 인식 거리는 3vp, 두 개의 선택적 매개변수 포함:
손가락: 선택적 매개변수, 핀치 제스처를 트리거하는 데 필요한 최소 손가락 수를 선언하는 데 사용됨 최소값은 2, 최대값은 5 이며 기본값은 2입니다.
거리: 핀치 동작을 트리거하기 위한 최소 거리를 선언하는 데 사용되는 선택적 매개변수이며 단위는 vp이고 기본값은 3입니다.
예를 들어 Column 구성 요소에 세 손가락 핀치 동작을 바인딩하면 핀치 동작의 함수 콜백에서 크기 조정 비율을 가져와 구성 요소를 축소하거나 확대할 수 있습니다.

// xxx.ets
@Entry
@Component
struct Index {
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;

  build() {
    Column() {
      Column() {
        Text('PinchGesture scale:\n' + this.scaleValue)
        Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')
      }
      .height(200)
      .width(300)
      .border({ width: 3 })
      .margin({ top: 100 })
      // 在组件上绑定缩放比例，可以通过修改缩放比例来实现组件的缩小或者放大
      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
      .gesture(
        // 在组件上绑定三指触发的捏合手势
        PinchGesture({ fingers: 3 })
          .onActionStart((event: GestureEvent) => {
            console.info('Pinch start');
          })
            // 当捏合手势触发时，可以通过回调函数获取缩放比例，从而修改组件的缩放比例
          .onActionUpdate((event: GestureEvent) => {
            this.scaleValue = this.pinchValue * event.scale;
            this.pinchX = event.pinchCenterX;
            this.pinchY = event.pinchCenterY;
          })
          .onActionEnd(() => {
            this.pinchValue = this.scaleValue;
            console.info('Pinch end');
          })
      )
    }
  }
}