CocosCreator中，获取滑屏方向：上下左右

说明

在单指滑屏结束后，给出本次滑屏朝向：上、下、左、右

使用示意

关注滑屏事件：SlideScreenEvent，将本次滑屏方向显示在Label上。

private init(): void
{
    SlideScreenSys.instance.eventTarget.on(SlideScreenSys.SlideScreenEvent, this.onSlideScreen, this);
}

private myDestroy(): void
{ 
    SlideScreenSys.instance.eventTarget.off(SlideScreenSys.SlideScreenEvent, this.onSlideScreen, this);
}
private onSlideScreen(dir:SlideScreenDir): void
{ 
    let dirStr = '无';
    switch (dir) {
        case SlideScreenDir.Up:
            dirStr = '上';
            break;
        case SlideScreenDir.Down:
            dirStr = '下';
            break;
        case SlideScreenDir.Left:
            dirStr = '左';
            break;
        case SlideScreenDir.Right:
            dirStr = '右';
            break;
        default:
            break;
    }
    this._logLabel.string = dirStr;
}

代码

SlideScreenSys.ts

import { _decorator, Component, Node, input, Input, EventTouch, EventTarget, Vec3, Vec2 } from 'cc';
const { ccclass, property } = _decorator;

export enum SlideScreenDir
{ 
    None,
    Up,
    Down,
    Left,
    Right,
}

export class SlideScreenSys
{
    private _touchId: number;
    private static readonly defaultTouchId = -1;

    private _eventTarget: EventTarget;
    public get eventTarget(): EventTarget { return this._eventTarget };

    public static readonly SlideScreenEvent: string = 'SlideScreenEvent';
    
    private _downTime: number;
    private _downPos: Vec2;

    private static _instance: SlideScreenSys;
    public static get instance(): SlideScreenSys
    { 
        if (!this._instance)
        { 
            this._instance = new SlideScreenSys();
        }
        return this._instance;
    }

    // 单次滑屏时长需不大于该值
    private static readonly maxSlideDuration = 0.3;

    private constructor()
    {
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
        input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
        this.resetTouchId();
        this._eventTarget = new EventTarget();
    }

    public myDestroy(): void
    {
        input.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
        input.off(Input.EventType.TOUCH_END, this.onTouchEnd, this);
        this._eventTarget = null;

        if (SlideScreenSys.instance == this)
        { 
            SlideScreenSys._instance = null;
        }
    }

    private resetTouchId(): void {
        this._touchId = SlideScreenSys.defaultTouchId;
    }
    private hasTouchId(): boolean {
        return this._touchId != SlideScreenSys.defaultTouchId;
    }

    private onTouchStart(event: EventTouch): void
    {
        if (!this.hasTouchId())
        {
            this._touchId = event.touch.getID();
            this._downTime = new Date().getTime();
            // 左下为原点
            this._downPos = event.touch.getLocation();
        }
    }

    private onTouchEnd(event: EventTouch): void
    {
        if (this._touchId == event.touch.getID())
        {
            const duration = (new Date().getTime() - this._downTime) / 1000;
            if (duration <= SlideScreenSys.maxSlideDuration) {
                const upPos = event.touch.getLocation();
                let dir = SlideScreenDir.None;
                const xOffset = upPos.x - this._downPos.x;
                const yOffset = upPos.y - this._downPos.y;
                if (Math.abs(xOffset) > Math.abs(yOffset)) {
                    dir = xOffset >= 0 ? SlideScreenDir.Right : SlideScreenDir.Left;
                }
                else {
                    dir = yOffset >= 0 ? SlideScreenDir.Up : SlideScreenDir.Down;
                }
                this.eventTarget.emit(SlideScreenSys.SlideScreenEvent, dir);
            }
            this.resetTouchId();
        }
    }
}