unity中實現Edge瀏覽器鼠標手勢的功能思路詳解

更新時間：2023年12月18日 11:13:58 作者：安東尼王

這篇文章主要介紹了unity中實現Edge瀏覽器鼠標手勢的功能思路詳解,實現起來其實并不復雜,涉及的技術點有pc端和移動端屏幕拖動事件,二維向量的相關運算,手勢匹配算法,事件系統設計模式,需要的朋友可以參考下

概要

Edge瀏覽器中，只需要使用鼠標按住右鍵在屏幕上不同方向拖動，就可以觸發(fā)很多快捷操作，效果很絲滑。那如果想使用unity開發(fā)這么一個功能，支持PC端和移動端，要怎么做呢？

實現思路

實現起來其實并不復雜，涉及的技術點有pc端和移動端屏幕拖動事件，二維向量的相關運算，手勢匹配算法，事件系統設計模式。
大概思路是：定義鼠標路徑為不同的事件類型，例如：“Up”，“Down”，“Left”，“Right”，將相鄰不重復的路徑類型添加到一個列表中，通過鼠標事件，獲取當前幀和上一幀的滑動方向，如果方向偏移當前方向范圍，則判斷為鼠標在滑動過程中發(fā)生了轉折，將每次轉折的方向記錄到一個列表中，轉折次數根據定義的事件鼠標路徑數量而定，超出這個數量則判定為無效手勢，最后當手勢抬起時，匹配定義的事件手勢路徑列表和滑動過程中記錄的手勢列表，如果匹配成功則判定觸發(fā)事件。

1.鼠標拖動事件

提示：移動端和pc端事件有所區(qū)別

MouseDown

 	private static bool MouseDown()
    {
        if (Application.isMobilePlatform)
        {
            if (Input.touchCount == 1 && Input.touches[0].phase == TouchPhase.Began)
            {
                MouseId = 0;
                return true;
            }
            return false;
        }
        if (Input.GetMouseButtonDown(1))
        {
            return true;
        }
        return false;
    }

MousePress

 	private static bool MousePress()
    {
        if (Application.isMobilePlatform)
        {
            return Input.touches[0].phase == TouchPhase.Moved || Input.touches[0].phase == TouchPhase.Stationary;
        }
        if (Input.GetMouseButton(1))
        {
            return true;
        }
        return false;
    }

MouseUp

 	private static bool MouseUp()
    {
        if (Application.isMobilePlatform)
        {
            return Input.touches[0].phase == TouchPhase.Ended || Input.touches[0].phase == TouchPhase.Canceled;
        }
        if (Input.GetMouseButtonUp(1))
        {
            return true;
        }
        return false;
    }

2.鼠標拖動的二維方向計算

獲取鼠標拖動的方向向量

  	private Vector2 GetDragDirection()
    {
        var v = (Vector2)Input.mousePosition - _preMousePoint;
        return v.normalized;
    }

計算方向，目前只識別上下左右四個方向，次方法可擴展為八個方向

 private Direction GetDirection()
    {
        var dir = GetDragDirection();
        var dotH = Vector2.Dot(Vector2.right, dir);
        var dorV = Vector2.Dot(Vector2.up, dir);
        //更趨向于橫向滑動
        if (Mathf.Abs(dotH) > Mathf.Abs(dorV))
        {
            return dotH > 0 ? Direction.Right : Direction.Left;
        }
		//更趨向于縱向滑動
        if (Mathf.Abs(dotH) < Mathf.Abs(dorV))
        {
            return dorV > 0 ? Direction.Up : Direction.Down;
        }
        return _preDirection;
    }

提示：_preMousePoint為上一幀的鼠標位置，此字段采集的頻率建議不要太過頻繁，不建議每幀采集，因為可能導致滑動速度過慢時存在噪點手勢，影響事件結果

3.匹配鼠標手勢路徑

記錄路徑方向

private void UpdateGestures()
    {
        var dir = GetDirection();
        if (_preDirection != dir)
        {
            _preDirection = dir;
            _curDirections.Add(dir);
        }
    }

定義事件路徑，此處只示例最多兩段路徑，事件路徑可以擴展多段

  public static Dictionary<GestureState, List<Direction>> Gestures = new()
    {
    { GestureState.Down , new() { Direction.Down }},
    { GestureState.Up , new(){ Direction.Up }},
    { GestureState.Left , new() { Direction.Left }},
    { GestureState.Right , new() { Direction.Right }},
    { GestureState.DownLeft , new() { Direction.Down, Direction.Left}},
    { GestureState.DownRight , new() { Direction.Down,Direction.Right }},
    { GestureState.UpLeft , new() { Direction.Up,Direction.Left }},
    { GestureState.UpRight , new() { Direction.Up,Direction.Right }},
    { GestureState.LeftDown , new() { Direction.Left, Direction.Down }},
    { GestureState.LeftUp , new() { Direction.Left, Direction.Up }},
    { GestureState.RightDown , new() {Direction.Right, Direction.Down }},
    { GestureState.RightUp , new(){Direction.Right, Direction.Up }},
    };

匹配路徑

private GestureState MatchGesture()
    {
        var state = GestureState.Invalid;
        foreach (var gesture in Gestures)
        {
            if (gesture.Value.SequenceEqual(_curDirections))
            {
                state = gesture.Key;
                break;
            }
        }
        return state;
    }