5. Gesto de rotación
- Gesto de rotación (¿valor?:{ ¿ dedos ? :número ; ángulo ? :número })
El gesto de rotación se utiliza para activar el evento del gesto de rotación. El número mínimo de dedos para activar el gesto de rotación es 2 dedos y el máximo es 5 dedos. El grado mínimo de cambio es 1 grado. Tiene dos parámetros opcionales:
dedos: parámetro opcional, utilizado para declarar el número mínimo de dedos necesarios para activar el gesto de rotación. El valor mínimo es 2, el valor máximo es 5 y el valor predeterminado es 2.
ángulo: parámetro opcional, utilizado para declarar el grado mínimo de cambio que activa el gesto de rotación. La unidad es grados. El valor predeterminado es 1.
Tome como ejemplo vincular un gesto de rotación en el componente de texto para realizar la rotación del componente. Puede obtener el ángulo de rotación en la función de devolución de llamada del gesto de rotación para realizar la rotación del componente:
// xxx.ets
@Entry
@Component
struct Index {
@State angle: number = 0;
@State rotateValue: number = 0;
build() {
Column() {
Text('RotationGesture angle:' + this.angle).fontSize(28)
// 在组件上绑定旋转布局，可以通过修改旋转角度来实现组件的旋转
.rotate({ angle: this.angle })
.gesture(
RotationGesture()
.onActionStart((event: GestureEvent) => {
console.info('RotationGesture is onActionStart');
})
// 当旋转手势生效时，通过旋转手势的回调函数获取旋转角度，从而修改组件的旋转角度
.onActionUpdate((event: GestureEvent) => {
this.angle = this.rotateValue + event.angle;
console.info('RotationGesture is onActionEnd');
})
// 当旋转结束抬手时，固定组件在旋转结束时的角度
.onActionEnd(() => {
this.rotateValue = this.angle;
console.info('RotationGesture is onActionEnd');
})
.onActionCancel(() => {
console.info('RotationGesture is onActionCancel');
})
)
}
.height(200)
.width(250)
}
}
6. Gesto de deslizar
- SwipeGesture (¿valor?:{ ¿ dedos ? :número ; dirección ? :SwipeDirection ; velocidad ? :número })
El gesto de deslizamiento se utiliza para activar eventos de deslizamiento. Se puede reconocer con éxito cuando la velocidad de deslizamiento es superior a 100 vp/s. Tiene tres parámetros opcionales:
dedos: parámetro opcional, utilizado para declarar el número mínimo de dedos necesarios para activar el gesto de deslizamiento. El valor mínimo es 1, el valor máximo es 10 y el valor predeterminado es 1.
dirección: parámetro opcional, utilizado para declarar la dirección que activa el gesto de deslizamiento.Este valor de enumeración admite operaciones lógicas AND (&) y lógicas OR (|). El valor predeterminado es SwipeDirection.All.
velocidad: parámetro opcional, utilizado para declarar la velocidad mínima de reconocimiento de deslizamiento que activa el deslizamiento. La unidad es vp/s. El valor predeterminado es 100.
Tomemos como ejemplo vincular un gesto deslizante en el componente Columna para rotar el componente:
// xxx.ets
@Entry
@Component
struct Index {
@State rotateAngle: number = 0;
@State speed: number = 1;
build() {
Column() {
Column() {
Text("SwipeGesture speed\n" + this.speed)
Text("SwipeGesture angle\n" + this.rotateAngle)
}
.border({ width: 3 })
.width(300)
.height(200)
.margin(100)
// 在Column组件上绑定旋转，通过滑动手势的滑动速度和角度修改旋转的角度
.rotate({ angle: this.rotateAngle })
.gesture(
// 绑定滑动手势且限制仅在竖直方向滑动时触发
SwipeGesture({ direction: SwipeDirection.Vertical })
// 当滑动手势触发时，获取滑动的速度和角度，实现对组件的布局参数的修改
.onAction((event: GestureEvent) => {
this.speed = event.speed;
this.rotateAngle = event.angle;
})
)
}
}
} 
Nota : Cuando SwipeGesture y PanGesture están vinculados al mismo tiempo, se producirá competencia si están vinculados de manera predeterminada o mutuamente excluyente. La condición de activación de SwipeGesture es que la velocidad de deslizamiento alcance 100 vp / s, la condición de activación de PanGesture es que la distancia de deslizamiento alcance 5 vp y se activa el gesto que alcanza primero la condición de activación. Puede lograr diferentes efectos modificando los parámetros de SwipeGesture y PanGesture.