# 指针跟随鼠标旋转和GTA武器菜单选择等效果实现

**Repository Path**: saonian/GTA_MENU__ROTATE_NEEDLE

## Basic Information

- **Project Name**: 指针跟随鼠标旋转和GTA武器菜单选择等效果实现
- **Description**: 指针跟随鼠标旋转,GTA武器菜单选择等效果实现
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-04-30
- **Last Updated**: 2022-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## GTA武器菜单选择


简单实现这种效果

![p1](./README/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNzE4MTYxMjAwNzk0.png)

Demo的效果
![p2](./README/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNzE4MTYyNDAxOTMx.gif)

以下是主要代码

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Menu : MonoBehaviour {

    public Image[] items;

    public Color nomorlColor;
    public Color heightColor;

    int oldItemIndex = 0;

	// Use this for initialization
	void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
        int currentItemindex = GetItemIndex();
        //设置高亮,并将其他item置回默认样式
        if (oldItemIndex != currentItemindex)
        {
            items[currentItemindex].color = heightColor;
            items[oldItemIndex].color = nomorlColor;
            oldItemIndex = currentItemindex;
        }

        if (Input.GetMouseButtonDown(0))
        {
           //点击左键确认选择,这里未做处理
        }
	}

    //根据角度获得当前鼠标所处的image数组的index
    int GetItemIndex()
    {
        //V是鼠标相对屏幕大小以中心点原点的2维向量
        Vector2 v = new Vector2(Input.mousePosition.x / Screen.width - 0.5f, Input.mousePosition.y / Screen.height - 0.5f);
        //f是(相对屏幕大小以中心点原点的坐标系)(0,1)与v的角度
        float f = Mathf.Atan2(v.x, v.y) * Mathf.Rad2Deg + 180;
        //根据f返回index
        return ((int)(f / (360/items.Length)));
    }

}

```


---

## 指针跟随鼠标旋转

### 效果1

![p3](./README/GIF_2020-4-30_11-30-50.gif)


### 效果2
![p4](./README/GIF_2020-4-30_11-31-40.gif)

这里可以看到,旋转的中心不再局限于屏幕中心的位置了,而是可以以任意位置为中心进行旋转.
#### **需要注意的是**

![p5](./README/20200430113602.png)

Canvas需要设置为**overlay模式**,其他模式下实现方式需要大家自己研究,这里**只能使用overlay模式**
以下是主要代码


```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class RotateNeedle : MonoBehaviour {

    public Transform center;
    public Transform needle;

    public Color heightColor;
    private Color nomorlColor = Color.white;

    private Image needleImg;
    private bool isRotate = false;

	void Start () {
        needleImg = needle.GetComponent<Image>();
        nomorlColor = needleImg.color;
    }
	
	void Update () {
        if (Input.GetMouseButtonDown(0))
        {
            isRotate = true;
        }
        if (Input.GetMouseButtonUp(0))
        {
            isRotate = false;
            needleImg.color = nomorlColor;
        }
        if (isRotate)
        {
            SetNeedleAngle(needle, center);
            needleImg.color = heightColor;
        }
    }

    void SetNeedleAngle(Transform _needle, Transform _center)
    {
        if (_needle == null || _center == null)
        {
            return;
        }
        var centerX = _center.transform.position.x;
        var centerY = _center.transform.position.y;

        var centerScreenPos = Camera.main.WorldToScreenPoint(center.transform.position);
        var mouseScreenPos = Camera.main.WorldToScreenPoint(Input.mousePosition);
        var angle = new Vector3(mouseScreenPos.x - centerScreenPos.x, mouseScreenPos.y - centerScreenPos.y, 0);
        var f = Mathf.Atan2(angle.x, angle.y) * Mathf.Rad2Deg;
        _needle.eulerAngles = Vector3.back* f;
    }
}

```

谢谢大家的点赞,收藏,评论