Use sequential recognition of combined gestures to trigger a drag gesture event after the long press gesture event ends. In the gesture callback method, obtain fingerList (of the FingerInfo[] type) of the event (of the GestureEvent type) for the localX and localY values, which represent the coordinates relative to the original area of the current component's upper left corner. The code snippet is as follows:
@Component
struct CoordinatesOfTheFingerTouchPoint {
@State count: number = 0;
private touchAreaRight: number = 0;
private touchAreaBottom: number = 0;
@State positionX: number = 0;
@State positionY: number = 0;
@State gestureEventInfo: string = '';
build() {
Column() {
Row() {
Column() {
Text('+')
.fontSize(28)
.position({ x: this.positionX, y: this.positionY })
}
.height(200)
.width('100%')
.backgroundColor('#F1F3F5')
.onAreaChange((oldValue: Area, newValue: Area) => {
this.touchAreaRight = newValue.width as number;
this.touchAreaBottom = newValue.height as number;
})
.gesture(
// The following combined gestures are recognized sequentially. If the long press gesture event is not triggered normally, the drag gesture event will not be triggered.
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
if (event.repeat) {
this.count++;
}
}),
PanGesture()
.onActionStart(() => {
this.getUIContext().getPromptAction().showToast({ message: 'Pan start', duration: 1000 });
})
.onActionUpdate((event: GestureEvent) => {
for (let i = 0; i < event.fingerList.length; i++) {
if (event.fingerList[i] == undefined
|| event.fingerList[i].localX < 0
|| event.fingerList[i].localY < 0
|| event.fingerList[i].localX > this.touchAreaRight
|| event.fingerList[i].localY > this.touchAreaBottom) {
return;
}
this.positionX = event.fingerList[i].localX;
this.positionY = event.fingerList[i].localY;
}
this.gestureEventInfo = 'sequence gesture\n' + 'LongPress onAction' + this.count
+ '\nX:' + this.positionX + '\nY:' + this.positionY;
})
.onActionEnd(() => {
this.getUIContext().getPromptAction().showToast({ message: 'Pan end', duration: 1000 });
})
)
.onCancel(() => {
this.getUIContext().getPromptAction().showToast({ message: 'Cancel', duration: 1000 });
})
)
}
.padding(12)
.borderRadius(24)
.backgroundColor(Color.White)
Text(this.gestureEventInfo)
.fontSize(18)
.width('100%')
.textAlign(TextAlign.Start)
.padding({ left: 18, top: 30 })
}
.height('100%')
.width('100%')
.backgroundColor('#F1F3F5')
}
}