HarmonyOS/OpenHarmony (Stage モデル) アプリケーション開発シングル ジェスチャー (2)

3. ドラッグ ジェスチャ (PanGesture)
.PanGestureOptions(value?:{ Fingers?:number; Direction?:PanDirection; distance?:number}) ドラッグ
ジェスチャは、ドラッグ ジェスチャ イベントをトリガーするために使用され、スライドは最小スライド距離に達します。 (デフォルト値) ドラッグ ジェスチャが正常に認識された場合 (5vp)、オプションのパラメータが 3 つあります。
指: オプションのパラメータ。ドラッグ ジェスチャをトリガーするために必要な指の最小数を宣言するために使用されます。最小値は 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 つのオプション パラメータがあります:
Fingers: ピンチ ジェスチャをトリガーするために必要な指の最小数を宣言するために使用されるオプションのパラメータ。最小値は 2、最大値は 5 、デフォルト値は 2 です。
distance: オプションのパラメータ。ピンチ ジェスチャをトリガーする最小距離を宣言するために使用されます。単位は vp、デフォルト値は 3 です。
列コンポーネントに 3 本指のピンチ ジェスチャをバインドする例として、ピンチ ジェスチャの関数コールバックでスケーリング率を取得することで、コンポーネントを縮小または拡大できます。

// 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');
          })
      )
    }
  }
}