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();CreateCircle(newVector2(200,200));//在(200，200)的地方创建圆，用于测试}privatevoidCreateCircle(Vector2anchoredPosition){GameObjectgameObject=newGameObject("circle",typeof(Image));//生成新物体，该物体包含一个图片组件gameObject.transform.SetParent(graphContainer,false);//将图片设为graphContainer的子物体gameObject.GetComponent().sprite=circleSprite;//将图片赋值为Inspector中设置的图片//获取新建图片物体的RectTransform并赋值RectTransformrectTransform=gameObject.GetComponent();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();//声明一个列表用于测试ListvalueList=newList(){1,2,4,9,16,25,36,49,64,81,100,80,50,20,10};ShowGraph(valueList);}privatevoidCreateCircle(Vector2anchoredPosition){......}privatevoidShowGraph(ListvalueList){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运行显示结果
为了好看点，可以将内侧灰色的背景放大点
所有点都在 GraphContainer 之内，点在x坐标平均分布，最高点为列表中的最大值
3.绘制点之间的连线
这里点之间的连线我仍然使用Image，只要Image足够细就能够看作线条
之后我会尝试能否使用LineRenderer
这里画线的想法是在两点中点创建一个线条状的Image，然后旋转一定角度
继续修改MyGraph
publicclassMyGraph:MonoBehaviour{......privatevoidShowGraph(ListvalueList){......floatxSpace=graphWidth/(valueList.Count-1);floatySpace=graphHeight/maxValue;GameObjectlastPoint=null;//用于保存上一个点，画出上一个点到现在点的连线，这样就不用管最后一个点for(inti=0;i().anchoredPosition,circleGameobject.GetComponent().anchoredPosition);}lastPoint=circleGameobject;//画完连线之后，变为上一个点}}privatevoidDrawLine(Vector2pointA,Vector2pointB)//画线方法{GameObjectgameObject=newGameObject("line",typeof(Image));//新建一个物体包含一个Image组件gameObject.transform.SetParent(graphContainer,false);//将该图片设为graphContainer的子物体//就是在画板内画线RectTransformrectTransform=gameObject.GetComponent();//获取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会返回角θ的弧度
图片所示情况会返回正数，如果右边的点更矮则是负数，可以直接用于旋转
运行后显示效果：
以上就是关于“UnityUI中怎么绘制线状统计图”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。
