UGUI学习笔记（十）自制雷达图

夜槿笙歌

已于 2022-09-12 21:22:28 修改

阅读量782

点赞数

分类专栏： # UGUI 文章标签： unity ui

于 2022-09-11 14:01:00 首次发布

本文链接：https://blog.youkuaiyun.com/LWR_Shadow/article/details/126804838

版权

该博客介绍了如何在Unity3D中实现动态雷达图的生成和填充，包括创建顶点、操作点，以及在运行时进行拖动操作。通过编辑器扩展，可以在Unity编辑器中直观地配置雷达图参数，如顶点数量、操作点位置等。此外，还展示了如何使用OnPopulateMesh方法填充雷达图的多边形区域，并在拖动操作点时实时更新填充效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

二、实现过程

2.1 准备工作

首先导入一张雷达图的背景图，将其挂载到「Image」上添加到场景中，命名为「RadarBg」。
请添加图片描述
在「RadarBg」下添加一个空的子物体，命名为「RadarChart」并挂载同名脚本。它用来展示雷达图上层的数据信息。「RadarChart」需要继承「Image」类。

public class RadarChart : Image
{
   
}

2.2 生成顶点

这里的顶点用来标记雷达图背景的范围。我们需要在编辑器中规定顶点的个数，因此创建一个成员变量_pointCount。为了能在编辑器模式下保存数据信息，所以给成员变量添加[SerializeField]特性。然后就是根据顶点个数创建顶点，并将顶点缓存起来

[SerializeField]  
private int _pointCount;  
[SerializeField]  
private List<RectTransform> _points;

/// <summary>
/// 创建顶点
/// </summary>
private void SpawnPoint()
{
   
	for (int i = 0; i < _pointCount; i++)
	{
   
		GameObject point = new GameObject("Point" + i);
		point.transform.SetParent(transform);
		_points.Add(point.AddComponent<RectTransform>());
	}
}

生成顶点后，需要设置顶点的默认位置。我们可以以(0,0)点为圆心，让生成的点位于雷达图中心与顶点的连线上

/// <summary>
/// 设置顶点初始位置
/// </summary>
private void SetPointPos()
{
   
	// 顶点间间隔的弧长
	float radian = 2 * Mathf.PI / _pointCount;
	// 生成点与中心的距离
	float radius = 100f;
	// 起始点从1/2π开始
	float curRadian = Mathf.PI / 2;
	for (int i = 0; i < _pointCount; i++)
	{
   
		float x = Mathf.Cos(curRadian) * radius;
		float y = Mathf.Sin(curRadian) * radius;
		curRadian += radian;
		_points[i].anchoredPosition = new Vector2(x, y);
	}
}

另外，在生成顶点前，需要清除_points中已存在的顶点。这些方法统一在初始化顶点时执行

/// <summary>
/// 初始化顶点
/// </summary>
public void InitPoint()
{
   
	ClearPoint();
	_points = new List<RectTransform>();
	SpawnPoint();
	SetPointPos();
}
/// <summary>
/// 清除点
/// </summary>
private void ClearPoint()
{
   
	if(_points ==

最低0.47元/天解锁文章