UGUI案例篇第(四)节:UGUI实现雷达图

本文介绍了如何在Unity中利用UGUI实现雷达图,详细阐述了雷达图的基本原理,包括从获取雷达背景图的半径到计算每个顶点的位置,再到根据数据比例设置雷达图的显示,最后通过OnPopulateMesh函数重新绘制UI。提供了一个完整的项目工程链接供学习。
摘要由CSDN通过智能技术生成

(一) 雷达图介绍


介绍:

    雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法,它利用代表各项数据占比的顶点位置连接成面状,直观的反应当前事物的一个能力倾向

例如下图:我们能直观的看到该玩家对于(输出,发育)两项的能力比较好?
在这里插入图片描述

(二)UGUI实现雷达显示图的原理


雷达图基本原理介绍:

(这里我们以正五边形的雷达背景图为例,其他正多边形原理相同)
1.我们首先需要具备一张美术的雷达背景图,之后在背景图下创建Image;
2.之后重写image的OnPopulateMesh(VertexHelper vh)函数,清空所有顶点信息(VertexHelper.Clear() 清空后该image就不会进行显示);
3.之后我们需要构建五边形的5个顶点(初始位置在正五边形的五个顶点位置),之后创建外部系数控制5项数据的大小,得到5个顶点的最终显示位置,之后3个顶点构成面即可;
4.重新给VertexHelper对象添加顶点信息,三角面信息,我们原始的Image就会显示为五边形形状 来表现数据倾向。


大致来说:
  我们游戏中的雷达图都是接收了数据源,计算得到该数据源每项占各项最大限度的比值,之后将原本的各项顶点的位置Position与比值相乘,得到新的顶点位置Position,再利用OnPopulateMesh(VertexHelper vh)重新绘制显示面。

在这里插入图片描述


Image重新绘制图形API:

    了解:Image类继承自MaskableGraphic,实现了ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter这三个接口。最关键的是MaskableGraphic类,MaskableGraphic负责绘制逻辑,MaskableGraphic继承自Graphic,Graphic里有个OnPopulateMesh函数,这正是我们需要的函数。

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值