在UnityUI中繪製線狀統計圖
阿新 • • 發佈:2022-04-09
先來個效果圖
覺得不好看可以自己調整
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會加上座標軸