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中怎么绘制线状统计图”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。