UnityUI中怎么绘制线状统计图

魁首哥

作者

UnityUI中怎么绘制线状统计图

这篇“UnityUI中怎么绘制线状统计图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“UnityUI中怎么绘制线状统计图”文章吧。

先来个效果图

觉得不好看可以自己调整

1.绘制数据点

线状图一般由数据点和连线组成
在绘制连线之前，我们先标出数据点
这里我选择用Image图片来绘制数据点

新建Canvas，添加空物体Graph
在Graph上添加空物体 GraphContainer 和 Image BackGround
在 GraphContainer 上添加 Image BackGround

修改两个BackGround的大小和颜色制作背景

注意：这里GraphContainer 锚点为左下角
左下角默认为原点(0，0)，之后所有的图形绘制都会在GraphContainer之内

在Graph上新建脚本MyGraph

publicclassMyGraph:MonoBehaviour{[SerializeField]privateSpritecircleSprite;//需要画的图像，这里赋值为了一个Unity自带的圆形，也可改为其它图形privateRectTransformgraphContainer;//声明一个RectTransform，用于修改图片的大小privatevoidAwake(){//获取graphContainer的RectTransform并赋值，为内侧的小矩形，会作为我们的画板graphContainer=transform.Find("GraphContainer").GetComponent<RectTransform>();CreateCircle(newVector2(200,200));//在(200，200)的地方创建圆，用于测试}privatevoidCreateCircle(Vector2anchoredPosition){GameObjectgameObject=newGameObject("circle",typeof(Image));//生成新物体，该物体包含一个图片组件gameObject.transform.SetParent(graphContainer,false);//将图片设为graphContainer的子物体gameObject.GetComponent<Image>().sprite=circleSprite;//将图片赋值为Inspector中设置的图片//获取新建图片物体的RectTransform并赋值RectTransformrectTransform=gameObject.GetComponent<RectTransform>();rectTransform.anchoredPosition=anchoredPosition;//设置图片位置rectTransform.sizeDelta=newVector2(20,20);//设置图片大小，可设为公共变量来修改//下面两句将生成图片的锚点设为了父物体左下角(原点)rectTransform.anchorMin=newVector2(0,0);rectTransform.anchorMax=newVector2(0,0);}}

运行后便会出现一个点

2.根据List列表输入绘制出多个圆点

继续修改MyGraph

publicclassMyGraph:MonoBehaviour{//[SerializeField]//privateSpritecircleSprite;//privateRectTransformgraphContainer;privatevoidAwake(){//graphContainer=transform.Find("GraphContainer").GetComponent<RectTransform>();//声明一个列表用于测试List<int>valueList=newList<int>(){1,2,4,9,16,25,36,49,64,81,100,80,50,20,10};ShowGraph(valueList);}privatevoidCreateCircle(Vector2anchoredPosition){......}privatevoidShowGraph(List<int>valueList){intmaxValue=0;foreach(intvalueinvalueList)//找出列表中的最大值{if(maxValue<=value){maxValue=value;}}floatgraphWidth=graphContainer.sizeDelta.x;//获取画布graphContainer的宽度floatgraphHeight=graphContainer.sizeDelta.y;//获取画布graphContainer的高度floatxSpace=graphWidth/(valueList.Count-1);//数据点x坐标的间距floatySpace=graphHeight/maxValue;//数据的y坐标的比例for(inti=0;i<valueList.Count;i++){floatxPos=i*xSpace;//x坐标为线性固定增长floatyPos=ySpace*valueList[i];//y坐标是以列表中最大值为画布高度，按值的大小与最大值的比例取高度CreateCircle(newVector2(xPos,yPos));//画出点}}}

运行显示结果

为了好看点，可以将内侧灰色的背景放大点

所有点都在 GraphContainer 之内，点在x坐标平均分布，最高点为列表中的最大值

3.绘制点之间的连线

这里点之间的连线我仍然使用Image，只要Image足够细就能够看作线条
之后我会尝试能否使用LineRenderer
这里画线的想法是在两点中点创建一个线条状的Image，然后旋转一定角度

继续修改MyGraph

publicclassMyGraph:MonoBehaviour{......privatevoidShowGraph(List<int>valueList){......floatxSpace=graphWidth/(valueList.Count-1);floatySpace=graphHeight/maxValue;GameObjectlastPoint=null;//用于保存上一个点，画出上一个点到现在点的连线，这样就不用管最后一个点for(inti=0;i<valueList.Count;i++){//floatxPos=i*xSpace;//floatyPos=ySpace*valueList[i];GameObjectcircleGameobject=CreateCircle(newVector2(xPos,yPos));//获取创建的点if(lastPoint!=null){//画线，参数为上一个点的位置，和当前点的位置DrawLine(lastPoint.GetComponent<RectTransform>().anchoredPosition,circleGameobject.GetComponent<RectTransform>().anchoredPosition);}lastPoint=circleGameobject;//画完连线之后，变为上一个点}}privatevoidDrawLine(Vector2pointA,Vector2pointB)//画线方法{GameObjectgameObject=newGameObject("line",typeof(Image));//新建一个物体包含一个Image组件gameObject.transform.SetParent(graphContainer,false);//将该图片设为graphContainer的子物体//就是在画板内画线RectTransformrectTransform=gameObject.GetComponent<RectTransform>();//获取RectTransform组件Vector2dir=pointB-pointA;//两点间的向量//同样将线段锚点设为画板左下角(原点)rectTransform.anchorMin=newVector2(0,0);rectTransform.anchorMax=newVector2(0,0);rectTransform.sizeDelta=newVector2(dir.magnitude,3f);//线段的长宽，长为两点间向量的长度，就是两点间距离rectTransform.anchoredPosition=pointA+dir/2;//线段的中心点，为两点间的中心点floatangle=RotateAngle(dir.x,dir.y);//线段的旋转角度rectTransform.localEulerAngles=newVector3(0,0,angle);//旋转线段}privatefloatRotateAngle(floatx,floaty)//旋转方法{floatangle=Mathf.Atan2(y,x)*180/3.14f;//Atan2返回的是弧度，需要乘以180/PI得到角度，这里PI直接用了3.14returnangle;}}

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