Mesh绘制蛛网图和雷达图 |
您所在的位置：网站首页 › 雷达面板图 › Mesh绘制蛛网图和雷达图 |
Mesh绘制蛛网图和雷达图
|
unity雷达图和蛛网图在游戏中的应用非常广泛，很多游戏都会用到雷达图来直观显示英雄的属性，或者在战斗结束后生成对局的表现。 1.1.绘制蛛网图 通过Mesh绘制蛛网图雷达图对应组件上必须要挂上(画布渲染器)CanvasRenderer组件，因为雷达图是在UI上显示的。可以直接在游戏对象上手动挂载，也可以像我一样用RequireComponent特性在脚本上挂载。
1.2.蛛网图脚本：DrawSpiderWeb using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(CanvasRenderer))] public class DrawSpiderWeb : MaskableGraphic { [SerializeField, Header("颜色")] Color backgroundColor; [SerializeField, Header("边数")] int n = 8; [SerializeField, Header("内半径")] float r;//内径 [SerializeField, Header("线宽")] float lineWide; [SerializeField, Header("层数")] int tier;//层数 [SerializeField, Header("线距")] float space;//线与线之间的间距 float angle;//角度 float radius;//整个图的半径 /// /// 获取半径的方法 /// /// public float GetRadius() { //半径 从内向外，内半径 +（层数-1）*（线宽+间距） radius = (tier - 1) * (space + lineWide) + r; return radius; } protected override void Start() { base.Start(); angle = 2 * Mathf.PI / n; } protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); for (int j = 0; j < tier; j++) { int count = j * n * 2; //顶点数量 for (int i = 0; i < n; i++) { //线内的点 float intx = Mathf.Sin(angle * i) * (r + j * (lineWide + space)); float inty = Mathf.Cos(angle * i) * (r + j * (lineWide + space)); vh.AddVert(new Vector3(intx, inty, 0), backgroundColor, Vector4.zero); //线外的点 float outx = Mathf.Sin(angle * i) * (r + lineWide + j * (lineWide + space)); float outy = Mathf.Cos(angle * i) * (r + lineWide + j * (lineWide + space)); vh.AddVert(new Vector3(outx, outy, 0), backgroundColor, Vector4.zero); if (i == n - 1) { vh.AddTriangle(2 * i + 1 + count, 0 + count, 1 + count); vh.AddTriangle(2 * i + 1 + count, 2 * i + count, 0 + count); } else { vh.AddTriangle(2 * i + 1 + count, 2 * i + count, 2 * (i + 1) + count); vh.AddTriangle(2 * i + 1 + count, 2 * (i + 1) + count, 2 * (i + 1) + 1 + count); } } //垂直部分 if (j == tier - 1) { //计算之前的下标总数 得出现在下标的起始点 int sum = 2 * n * tier; for (int i = 0; i < n; i++) { float x = Mathf.Sin(angle * i) * (r + lineWide + j * (lineWide + space)); float y = Mathf.Cos(angle * i) * (r + lineWide + j * (lineWide + space)); //找到最外面的顶点位置 Vector3 dir = new Vector3(x, y, 0); //计算最外面的顶点到中心点的方向 Vector3 width = (Quaternion.AngleAxis(90, Vector3.forward) * dir).normalized; //计算最外面的顶点到中心的连线 求出连线的四个点 vh.AddVert(-width * 10f + dir.normalized, backgroundColor, Vector4.zero); vh.AddVert(-width * 10f + dir, backgroundColor, Vector4.zero); vh.AddVert(width * 10f + dir, backgroundColor, Vector4.zero); vh.AddVert(width * 10f + dir.normalized, backgroundColor, Vector4.zero); vh.AddTriangle(4 * i + sum, 4 * i + 1 + sum, 4 * i + 2 + sum); vh.AddTriangle(4 * i + sum, 4 * i + 2 + sum, 4 * i + 3 + sum); } } } } }这里是可以自行设置蛛网图的相关属性的。
1.3.蛛网图效果：
1.4.思路分析 在这里我主要通过画图，然后计算所需要的变量之间的联系找到每层的顶点位置，以及半径的变化，不难发现，每一层有内外两层顶点，通过三角函数和分割数可以计算出每个顶点的位置，每一层可以通过实际半径进行一个偏移。一层是不需要间距的，后面每层都需要添加间距，所以我们不难算出蛛网图的实时半径就是：内径+线宽+（线宽+间距）*（层数 - 1）。
垂直方向的线可以考虑最外层顶点到（圆心）中心点的距离的线，可以看成一个矩形。通过垂直的向量可以求出四个点，在通过Mesh三角形连线绘制。 2.1绘制雷达图 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(CanvasRenderer))] public class DrawRadar : MaskableGraphic { [SerializeField] Button btn; int n = 5; //分割数 float angle; //角度 float r ; //半径 [SerializeField] Color backgroundColor; //颜色 [SerializeField] [Range(10, 100)]//设置范围 float[] radius;//属性半径 [SerializeField] DrawSpiderWeb drawSpiderWeb; protected override void Start() { base.Start(); angle = 2 * Mathf.PI / n; //获取蛛网图的半径限制雷达图的最大半径 r = drawSpiderWeb.GetRadius(); string.Format("最大半径为{0}", r); radius = new float[n]; SetRandomBelongs(n); btn.onClick.AddListener(() => { SetRandomBelongs(n); //重建所有顶点 SetAllDirty(); }); } /// /// 随机属性 /// /// private void SetRandomBelongs(int n) { for (int i = 0; i < n; i++) { radius[i] = Random.Range(10, 101); } } protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); //添加顶点 vh.AddVert(new Vector3(0, 0, 0), backgroundColor, Vector4.zero); for (int i = 0; i < n; i++) { float x = Mathf.Sin(angle * i) * r * radius[i] / 100; float y = Mathf.Cos(angle * i) * r * radius[i] / 100; vh.AddVert(new Vector3(x, y, 0), backgroundColor, Vector4.zero); if (i == 0) { vh.AddTriangle(0, 1, n); } else { vh.AddTriangle(0, i, i + 1); } } } }一般的雷达图都是五个属性，所以我们需要五个属性，就相当于有一个半径数组，属性值就是控制每个角的位置的值，可以在属性面板里任意更改查看效果。
2.2.最终效果：
可以点击按钮随机属性值。 |
【本文地址】
今日新闻 |
推荐新闻 |