• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# PinchGesture
2
3>  **说明：**
4>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6
7## 接口
8
9PinchGesture(value?: { fingers?: number, distance?: number })
10
11**参数：**
12
13| 参数名称 | 参数类型 | 必填 | 参数描述                                                     |
14| -------- | -------- | ---- | ------------------------------------------------------------ |
15| fingers  | number   | 否   | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
16| distance | number   | 否   | 最小识别距离，单位为vp。<br/>默认值：3.0                     |
17
18## 事件
19
20| 名称                                                         | 功能描述                                        |
21| ------------------------------------------------------------ | ----------------------------------------------- |
22| onActionStart(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。                         |
23| onActionUpdate(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。                       |
24| onActionEnd(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。         |
25| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void)          | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
26
27
28## 示例
29
30```ts
31// xxx.ets
32@Entry
33@Component
34struct PinchGestureExample {
35  @State scaleValue: number = 1;
36  @State pinchValue: number = 1;
37  @State pinchX: number = 0;
38  @State pinchY: number = 0;
39
40  build() {
41    Column() {
42      Column() {
43        Text('PinchGesture scale:\n' + this.scaleValue)
44        Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')
45      }
46      .height(200)
47      .width(300)
48      .padding(20)
49      .border({ width: 3 })
50      .margin({ top: 100 })
51      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
52      // 三指捏合触发该手势事件
53      .gesture(
54      PinchGesture({ fingers: 3 })
55        .onActionStart((event: GestureEvent) => {
56          console.info('Pinch start');
57        })
58        .onActionUpdate((event: GestureEvent) => {
59          this.scaleValue = this.pinchValue * event.scale;
60          this.pinchX = event.pinchCenterX;
61          this.pinchY = event.pinchCenterY;
62        })
63        .onActionEnd(() => {
64          this.pinchValue = this.scaleValue;
65          console.info('Pinch end');
66        })
67      )
68    }.width('100%')
69  }
70}
71```
72
73![zh-cn_image_0000001174582848](figures/zh-cn_image_0000001174582848.png)
74