在UnityUI中繪製線狀統計圖

AlphaIcarus發表於2022-04-09
UnityUI

先來個效果圖


覺得不好看可以自己調整

1.繪製資料點

線狀圖一般由資料點和連線組成
在繪製連線之前，我們先標出資料點
這裡我選擇用Image圖片來繪製資料點

新建Canvas，新增空物體Graph
在Graph上新增空物體 GraphContainer 和 Image BackGround
在 GraphContainer 上新增 Image BackGround

修改兩個BackGround的大小和顏色製作背景

注意：這裡GraphContainer 錨點為左下角
左下角預設為原點(0，0)，之後所有的圖形繪製都會在GraphContainer之內

在Graph上新建指令碼MyGraph

public class MyGraph : MonoBehaviour
{
    [SerializeField]
    private Sprite circleSprite;	//需要畫的影像，這裡賦值為了一個Unity自帶的圓形，也可改為其它圖形

    private RectTransform graphContainer;	//宣告一個 RectTransform，用於修改圖片的大小
    
    private void Awake()
    {
        //獲取graphContainer的RectTransform並賦值，為內側的小矩形，會作為我們的畫板
        graphContainer = transform.Find("GraphContainer").GetComponent<RectTransform>();
        CreateCircle(new Vector2(200, 200));	//在(200，200)的地方建立圓，用於測試
    }

    private void CreateCircle(Vector2 anchoredPosition)
    {
        GameObject gameObject = new GameObject("circle", typeof(Image));	//生成新物體，該物體包含一個圖片元件
        gameObject.transform.SetParent(graphContainer, false);			//將圖片設為graphContainer的子物體
        gameObject.GetComponent<Image>().sprite = circleSprite;			//將圖片賦值為Inspector中設定的圖片

        //獲取新建圖片物體的RectTransform並賦值
        RectTransform rectTransform = gameObject.GetComponent<RectTransform>();
        rectTransform.anchoredPosition = anchoredPosition;			//設定圖片位置
        rectTransform.sizeDelta = new Vector2(20, 20);				//設定圖片大小，可設為公共變數來修改
        
        //下面兩句將生成圖片的錨點設為了父物體左下角(原點)
        rectTransform.anchorMin = new Vector2(0, 0);
        rectTransform.anchorMax = new Vector2(0, 0);
    }
}

執行後便會出現一個點

2.根據List列表輸入繪製出多個圓點

繼續修改MyGraph

  public class MyGraph : MonoBehaviour
{
    //[SerializeField]
    //private Sprite circleSprite;

    //private RectTransform graphContainer;
    private void Awake()
    {
        //graphContainer = transform.Find("GraphContainer").GetComponent<RectTransform>();
        //宣告一個列表用於測試
        List<int> valueList = new List<int>() { 1, 2, 4, 9, 16, 25, 36, 49, 64, 81, 100, 80, 50, 20, 10 };
        ShowGraph(valueList);
    }

    private void CreateCircle(Vector2 anchoredPosition)
    {
        ......
    }

    private void ShowGraph(List<int> valueList)
    {
        int maxValue = 0;
        foreach (int value in valueList)	//找出列表中的最大值
        {
            if (maxValue <= value)
            {
                maxValue = value;
            }
        }
        
        float graphWidth = graphContainer.sizeDelta.x;	    //獲取畫布graphContainer的寬度
        float graphHeight = graphContainer.sizeDelta.y;	    //獲取畫布graphContainer的高度

        float xSpace = graphWidth / (valueList.Count - 1);  //資料點x座標的間距
        float ySpace = graphHeight / maxValue;		    //資料的y座標的比例

        for (int i = 0; i < valueList.Count; i++)
        {
            float xPos = i * xSpace;			    //x座標為線性固定增長
            float yPos = ySpace * valueList[i];		    //y座標是以列表中最大值為畫布高度，按值的大小與最大值的比例取高度
            CreateCircle(new Vector2(xPos, yPos));	    //畫出點
        }
    }
}

執行顯示結果

為了好看點，可以將內側灰色的背景放大點

所有點都在 GraphContainer 之內，點在x座標平均分佈，最高點為列表中的最大值

3.繪製點之間的連線

這裡點之間的連線我仍然使用Image，只要Image足夠細就能夠看作線條
之後我會嘗試能否使用LineRenderer
這裡畫線的想法是在兩點中點建立一個線條狀的Image，然後旋轉一定角度

繼續修改MyGraph

public class MyGraph : MonoBehaviour
{
    ......
    private void ShowGraph(List<int> valueList)
    {
        ......

        float xSpace = graphWidth / (valueList.Count - 1);
        float ySpace = graphHeight / maxValue;

        GameObject lastPoint = null;	//用於儲存上一個點，畫出上一個點到現在點的連線，這樣就不用管最後一個點
        for (int i = 0; i < valueList.Count; i++)
        {
            //float xPos = i * xSpace;
            //float yPos = ySpace * valueList[i];
            
            GameObject circleGameobject = CreateCircle(new Vector2(xPos, yPos));//獲取建立的點
            if (lastPoint != null)
            {
                //畫線，引數為上一個點的位置，和當前點的位置
                DrawLine(lastPoint.GetComponent<RectTransform>().anchoredPosition, circleGameobject.GetComponent<RectTransform>().anchoredPosition);
            }
            lastPoint = circleGameobject;	//畫完連線之後，變為上一個點
        }
    }

    private void DrawLine(Vector2 pointA, Vector2 pointB)	//畫線方法
    {
        GameObject gameObject = new GameObject("line", typeof(Image));//新建一個物體包含一個Image元件
        gameObject.transform.SetParent(graphContainer, false);		 //將該圖片設為graphContainer的子物體
																//就是在畫板內畫線
        RectTransform rectTransform = gameObject.GetComponent<RectTransform>();	//獲取 RectTransform 元件
        Vector2 dir = pointB - pointA;	//兩點間的向量

        //同樣將線段錨點設為畫板左下角(原點)
        rectTransform.anchorMin = new Vector2(0, 0);
        rectTransform.anchorMax = new Vector2(0, 0);
        rectTransform.sizeDelta = new Vector2(dir.magnitude, 3f);	//線段的長寬，長為兩點間向量的長度，就是兩點間距離

        rectTransform.anchoredPosition = pointA + dir / 2;			//線段的中心點，為兩點間的中心點
        float angle = RotateAngle(dir.x, dir.y);				   //線段的旋轉角度
        rectTransform.localEulerAngles = new Vector3(0, 0, angle);	//旋轉線段
    }
    private float RotateAngle(float x, float y)	//旋轉方法
    {
        float angle = Mathf.Atan2(y, x) * 180 / 3.14f;//Atan2返回的是弧度，需要乘以180/PI得到角度，這裡PI直接用了3.14
        return angle;
    }
}

在RotateAngle()方法中Mathf.Atan2會返回角θ的弧度

圖片所示情況會返回正數，如果右邊的點更矮則是負數，可以直接用於旋轉

執行後顯示效果：

實際自己需要輸入的資料列表建議自己進行修改
線狀圖2.0會加上座標軸

相關文章