带描边雷达图的另一种思路

已于 2023-10-30 14:51:18 修改
阅读量67 收藏
点赞数
分类专栏： Unity进阶 文章标签： unity
于 2023-10-26 16:19:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_sorry/article/details/134058119
版权
本文介绍了使用Unity开发的动态描边雷达图，通过不同GameObjects间的脚本交互，实现边数、颜色和层级效果的自定义。关键代码展示了如何利用CanvasRenderer生成可变的雷达图并调整边缘线宽。
摘要由CSDN通过智能技术生成

先看效果：

效果和正常绘制内、外顶点那种是一样的。 但是思路不同。

链接：http://t.csdnimg.cn/SFVJO

本篇文章代码没有注释，注释版本在上面链接中。

实现方法：

颜色单词对应上面雷达图底图颜色和相应游戏对象身上的脚本名称。

Pink雷达图游戏对象呈现的效果就是描边效果。

属性说明：

  • 每个游戏对象身上的RectTransform组件中的Scale缩放不同，实现层级效果
  • 脚本中的Num字段为多边形的边数
  • Pink游戏对象脚本中的关联脚本为Green脚本，通过调用Green脚本中封装好的方法（本案例中为ChangeValue方法）给Green脚本中的集合传值，因为当Pink的Scale缩放改变时，Green的Scale缩放也要进行相同的改变方能实现描边效果
  • Green中的Board字段为描边用线的线宽

代码如下：

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class Blue : MaskableGraphic
{
    List<float> m_List = new List<float>();
    public int m_Num;
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        base.OnPopulateMesh(vh);
        if (m_Num <= 2)
        {
            return;
        }
        for (int i = 0; i < m_Num; i++)
        {
            m_List.Add(50);
        }
        vh.Clear();
        vh.AddVert(Vector3.zero, color, Vector2.zero);
        float rad=2*Mathf.PI/ m_Num;
        float w=GetComponent<RectTransform>().rect.width;
        float h=GetComponent<RectTransform>().rect.height;
        float r=w<h ? w/2 : h/2;
        float ratio = r / m_List.Max();
        for (int i = 0; i < m_Num; i++)
        {
            float x = Mathf.Sin(i* rad) * ratio * m_List[i];
            float y = Mathf.Cos(i* rad) * ratio * m_List[i];
            vh.AddVert(new Vector3(x,y,0),color,Vector2.zero);
            if (i==0)
            {
                vh.AddTriangle(0, m_Num, 1);
            }
            else
            {
                vh.AddTriangle(0, i, i+1);
            }
        }
        Mesh mesh = new Mesh();
        vh.FillMesh(mesh);
    }
}

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class Pink : MaskableGraphic
{
    public Button btn;
    List<float> m_List = new List<float>();
    public int m_Num;
    public Green radarMap;
    protected override void Start()
    {
        //按钮点击改变Pink中集合的值
        btn.onClick.AddListener(() =>
        {
            for (int i = 0; i < m_List.Count; i++)
            {
                m_List[i] = Random.Range(50,100);
            }
            //改变Pink中集合的值后，传给Green中的集合
            radarMap.ChangeValue(m_List);
            SetVerticesDirty();
        });
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        base.OnPopulateMesh(vh);
        if (m_Num <= 2)
        {
            return;
        }
        for (int i = 0; i < m_Num; i++)
        {
            m_List.Add(50);
        }
        vh.Clear();
        vh.AddVert(Vector3.zero, color, Vector2.zero);
        float rad=2*Mathf.PI/ m_Num;
        float w=GetComponent<RectTransform>().rect.width;
        float h=GetComponent<RectTransform>().rect.height;
        float r=w<h ? w/2 : h/2;
        float ratio = r / m_List.Max();
        for (int i = 0; i < m_Num; i++)
        {
            float x = Mathf.Sin(i* rad) * ratio * m_List[i];
            float y = Mathf.Cos(i* rad) * ratio * m_List[i];
            vh.AddVert(new Vector3(x,y,0),color,Vector2.zero);
            if (i==0)
            {
                vh.AddTriangle(0, m_Num, 1);
            }
            else
            {
                vh.AddTriangle(0, i, i+1);
            }
        }
        Mesh mesh = new Mesh();
        vh.FillMesh(mesh);
    }
}

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class Green : MaskableGraphic
{
    List<float> m_List = new List<float>();
    public int m_Num;
    public float board;
    /// <summary>
    /// 接收Pink中传过来的集合，修改Green中的集合
    /// </summary>
    /// <param name="_list"></param>
    public void ChangeValue(List<float> _list)
    {
        m_List= _list;
        SetVerticesDirty();
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        base.OnPopulateMesh(vh);
        if (m_Num <= 2)
        {
            return;
        }
        for (int i = 0; i < m_Num; i++)
        {
            m_List.Add(50);
        }
        vh.Clear();
        vh.AddVert(Vector3.zero, color, Vector2.zero);
        float rad = 2 * Mathf.PI / m_Num;
        float w = GetComponent<RectTransform>().rect.width;
        float h = GetComponent<RectTransform>().rect.height;
        float r = w < h ? w / 2 : h / 2;
        float ratio = r / m_List.Max();
        for (int i = 0; i < m_Num; i++)
        {
            float x = Mathf.Sin(i * rad) * ratio * m_List[i];
            float y = Mathf.Cos(i * rad) * ratio * m_List[i];
            vh.AddVert(new Vector3(x, y, 0), color, Vector2.zero);
            if (i == 0)
            {
                vh.AddTriangle(0, m_Num, 1);
            }
            else
            {
                vh.AddTriangle(0, i, i + 1);
            }
        }


        //描边
        //int n = m_Num + 1;
        //for (int i = 0; i < m_Num; i++)
        //{
        //    float xN = Mathf.Sin(i * rad) * (ratio * m_List[i] - board);
        //    float yN = Mathf.Cos(i * rad) * (ratio * m_List[i] - board);
        //    vh.AddVert(new Vector3(xN, yN, 0), boardColor, Vector2.zero);//添加内顶点

        //    float xW = Mathf.Sin(i * rad) * ratio * m_List[i];
        //    float yW = Mathf.Cos(i * rad) * ratio * m_List[i];
        //    vh.AddVert(new Vector3(xW, yW, 0), boardColor, Vector2.zero);//添加外顶点
        //    if (i == m_Num - 1)
        //    {
        //        //五边形   n=6     i=4
        //        vh.AddTriangle(i + 2, 2 * i + n, 2 * n + i - 1);//6 14  15
        //        vh.AddTriangle(i + 2, 2 * n + i - 1, n + 1);//6 15  7
        //    }
        //    else
        //    {
        //        vh.AddTriangle(i * 2 + n, i * 2 + 1 + n, (i + 1) * 2 + n);
        //        vh.AddTriangle(i * 2 + 1 + n, (i + 1) * 2 + 1 + n, (i + 1) * 2 + n);
        //    }
        //}

        Mesh mesh = new Mesh();
        vh.FillMesh(mesh);
    }
}

效果：

描边雷达图

注意是在最外层RadarMap_BG的属性中修改边线数量 ！

 层级：

属性： 

 

 附上代码：

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class RadarMap_BG : MaskableGraphic
{
    [Header("边数")]
    public int m_Num;
    public RadarMap_Outline outline;
    public RadarMap radarMap;
    protected override void Start()
    {
        CanvasRenderer cr;
        if (gameObject.TryGetComponent(out cr))
        {
            return;
        }
        gameObject.AddComponent<CanvasRenderer>();
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        outline.m_Num = m_Num;
        radarMap.m_Num = m_Num;
        base.OnPopulateMesh(vh);
        if (m_Num<=2)
        {
            return;
        }
        List<float> values = new List<float>();
        for (int i = 0; i < m_Num; i++)
        {
            values.Add(50);
        }
        float m_Rad = 2 * Mathf.PI / m_Num;
        float w=GetComponent<RectTransform>().rect.width;
        float h=GetComponent<RectTransform>().rect.height;
        float radius=w<h ? w/2 : h/2;
        float ratio = radius / values.Max();
        vh.Clear();
        vh.AddVert(Vector3.zero, color, Vector2.zero);
        for (int i = 0;i < m_Num;i++)
        {
            float x = Mathf.Sin(i * m_Rad) * values[i]*ratio;
            float y = Mathf.Cos(i * m_Rad) * values[i]*ratio;
            vh.AddVert(new Vector3(x,y,0), color, Vector2.zero);
            if (i==0)
            {
                vh.AddTriangle(0,m_Num,1);
            }
            else
            {
                vh.AddTriangle(0, i, i+1);
            }
        }
    }
}

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class RadarMap_Outline : MaskableGraphic
{
    public int m_Num;
    public Button btn;
    public RadarMap radarMap;

    List<float> values = new List<float>();
    protected override void Start()
    {
        btn.onClick.AddListener(() =>
        {
            for (int i = 0; i < m_Num; i++)
            {
                values[i]=Random.Range(50,100);
            }
            radarMap.ChangeValue(values);
            SetVerticesDirty();
        });
        CanvasRenderer cr;
        if (gameObject.TryGetComponent(out cr))
        {
            return;
        }
        gameObject.AddComponent<CanvasRenderer>();
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        base.OnPopulateMesh(vh);
        if (m_Num<=2)
        {
            return;
        }
        for (int i = 0; i < m_Num; i++)
        {
            if (values.Count<=i)
            {
                values.Add(50);
            }
        }
        float m_Rad = 2 * Mathf.PI / m_Num;
        float w=GetComponent<RectTransform>().rect.width;
        float h=GetComponent<RectTransform>().rect.height;
        float radius=w<h ? w/2 : h/2;
        float ratio = radius / values.Max();
        vh.Clear();
        vh.AddVert(Vector3.zero, color, Vector2.zero);
        for (int i = 0;i < m_Num;i++)
        {
            float x = Mathf.Sin(i * m_Rad) * values[i]*ratio;
            float y = Mathf.Cos(i * m_Rad) * values[i]*ratio;
            vh.AddVert(new Vector3(x,y,0), color, Vector2.zero);
            if (i==0)
            {
                vh.AddTriangle(0,m_Num,1);
            }
            else
            {
                vh.AddTriangle(0, i, i+1);
            }
        }
    }
}

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class RadarMap : MaskableGraphic
{
    public int m_Num;
    public List<float> values = new List<float>();
    public void ChangeValue(List<float> _list)
    {
        values = _list;
        SetVerticesDirty();
    }
    protected override void Start()
    {
        CanvasRenderer cr;
        if (gameObject.TryGetComponent(out cr))
        {
            return;
        }
        gameObject.AddComponent<CanvasRenderer>();
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        base.OnPopulateMesh(vh);
        if (m_Num<=2)
        {
            return;
        }
        for (int i = 0; i < m_Num; i++)
        {
            if (values.Count<=i)
            {
                values.Add(50);
            }
        }
        float m_Rad = 2 * Mathf.PI / m_Num;
        float w=GetComponent<RectTransform>().rect.width;
        float h=GetComponent<RectTransform>().rect.height;
        float radius=w<h ? w/2 : h/2;
        float ratio = radius / values.Max();
        vh.Clear();
        vh.AddVert(Vector3.zero, color, Vector2.zero);
        for (int i = 0;i < m_Num;i++)
        {
            float x = Mathf.Sin(i * m_Rad) * values[i]*ratio;
            float y = Mathf.Cos(i * m_Rad) * values[i]*ratio;
            vh.AddVert(new Vector3(x,y,0), color, Vector2.zero);
            if (i==0)
            {
                vh.AddTriangle(0,m_Num,1);
            }
            else
            {
                vh.AddTriangle(0, i, i+1);
            }
        }
    }
}

一个可变的描边雷达图就完成啦！ 

-婧瑄-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity实现属性雷达图
qq_34702827的博客
01-02 463
unity雷达属性图
Unity数组节点绘制一个雷达图
m0_57252175的博客
08-14 122
绘制雷达图与刷新顶点数据
unity 3d物体描边效果_Unity 实现带均匀描边的雷达图
weixin_39901439的博客
12-11 268
前言 雷达图是游戏中常见的图表表现之一，比如用来呈现英雄的属性等等，本文将在 Unity 中实现一个带均匀描边、可响应点击的雷达图。Graphic类 Unity 的原生 UI 系统 UGUI 提供了名为 Graphic 的基类用于实现各自 UI组件的。该类中有名为 OnPopulateMesh 的方法，只要向参数 VertexHelper 传递正确的顶点数组与下标数组，即可构造出我们期...
Unity绘制雷达图
qq_62137537的博客
09-13 731
雷达图：雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形极坐标图或Kiviat图。它相当于平行坐标图，轴径向排列。想必大家在观看LoL比赛时总能看见类似这样的图片 这就是雷达图游戏中的雷达图。
unity 绘制属性雷达图 - 绘制描边（更改uv）
alla_Candy的博客
08-17 1328
实现的效果 先绘制一个五边形的mesh，然后在给边缘绘制一圈mesh。 对uv进行重新赋值，实现描边效果 第一步 绘制mesh 绘制多边形mesh，首先先绘制一个五边形。 mesh绘制要素：顶点，三角形，uv信息 顶点信息 就是勾勒三角形用的几个顶点。 按照五边形来说的画， 五边形是五个边。 因为每个边的顶点要做拉伸，所以以中心点为原点，向外扩展画三角形，方便后续操作。 顶点顺序可以按照下图顺序。 绘制三角形 绘制三角形的时候，顶点排列顺序要按照顺时针的方向进行排列才可以绘制出来 所以第一个三角形，顶
Android实现带描边的圆角图片
08-28
Android实现带描边的圆角图片是Android开发中的一种常见需求。通过使用BitmapShader渲染类，我们可以实现带描边的圆角图片。下面是实现带描边的圆角图片的详细步骤： 首先，我们需要创建一个自定义的绘图类，继承...
php实现图片添加描边字和马赛克的方法
10-25
`imagetextouter`函数是用于在图像上绘制带有描边的文字，可以设置文字的大小、位置、颜色、字体文件以及描边颜色。`color`参数是文字颜色，采用十六进制的RGB格式，如`#ff0000`代表红色。`outercolor`则是描边颜色...
css 11种方法实现一个tips带有描边的小箭头
12-28
我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边，今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边，本章不...
h5页面的雷达图 五边形_程序丨以五边形为例，使用UGUI绘制多边形雷达图
weixin_36326053的博客
01-12 514
使用UGUI绘制多边形(这里以五边形为例子)， 首先我们先看一下UGUI里的绘制一张图片需要实现的一个函数。protected override void OnPopulateMesh(VertexHelper toFill){if ((UnityEngine.Object) this.activeSprite == (UnityEngine.Object) null){base.OnPopul...
雷达图 带描边
ZJ0817的博客
01-30 95
雷达图
⭐Unity 雷达图【双层图带描边带背景】
惊鸿醉的博客
09-20 273
Unity开发用到的雷达图。
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
向宇
07-09 4982
最近在学习shader Graph相关内容，其实关于实现2d图片描边效果，网上可以看到很多教程，但是我发现大多数都是基于比较老旧的2018unity版本，可是我们实际开发使用可能是比较新的2021及以上版本，差别还是有的，实际在升级或者使用过程中，会遇到诸多问题，而且也很少有人会分享shader Graph的连线图源码没有的话我就想着把我的学习笔记和整理源码分享出来吧，我想于是就有了这篇文章。
【游戏开发实战】Unity ShaderGraph 2D描边效果、不规则描边效果
linxinfa的专栏
03-03 1万+
本文介绍使用Unity的ShaderGraph实现2D的描边效果
Unity 2d描边基于SpriteRender，高性能的描边解决方案
最新发布
qq_58047420的博客
08-08 1180
以Unity默认渲染管线为例，打造不需要图片内边距，描边平滑，高性能的描边解决方案
[Unity] ShaderGraph实现Sprite图片描边/发光效果 URP
连连看爱好者
01-18 3677
[Unity] ShaderGraph实现Sprite描边发光效果。 超详细解说，内含完整连线图及下载资源。
用UGUI绘制雷达图
Cjj_151的博客
08-14 86
它可以将数据可视化，更直观的将数据展现了出来， 可以让我们快速了解游戏中人物的各项数据，从而让更快的选出适合我们的人物。除了选人之外，还有很多地方也用到了雷达图，今天，让我们一起来学习一下UGUI中雷达图的绘制。里面包括了计算宽高，比例，顶点坐标，UV坐标，添加点，添加绘制顺序等各个步骤，代码中我的注释写的还是挺详细的，大家可以仔细看一下。2..然后我们构建五边形的5个顶点(初始位置在正五边形的五个顶点位置)，之后创建外部系数控制5项数据的大小，得到5个顶点的最终显示位置，之后3个顶点构成面即可；
Unity UGUI学习系列(三) ------ 雷达图实现
千喜
08-22 1044
本系列文章是学习siki学院UGUI整体解决方案-案例篇笔记 GitHub地址：https://github.com/BlueMonk1107/UGUISolution 本文实现的是雷达图,效果如下 : 项目结构如下: 实现原理大概就是根据Handle0-4顶点的位置绘制图片区域,Point0-4是生成Handle0-4的起始位置,同时Point会随着H...
Unity 2D图片外轮廓描边和内发光的Shader实现
热门推荐
qq_33288536的博客
09-18 2万+
很长时间没有写博客了，一方面Sebastian大佬正在更新程序生成星球的教程，所以想等到大佬更新接近尾声的时候开始那个教程的分享。最近主要是在工作之余补一补Unityshader的基础知识，然后正好在项目中遇到这么一个问题，需要实现2D图片的描边和内发光。找了很多资料一直都没有找到实现起来比较不错的方法，而且搜出来的大部分都是3D的描边，3D描边的思想很容易掌握，但是一直没有2D的外轮廓的描边，所...
UGUI案例篇第(四)节：UGUI实现雷达图
专注游戏研发
09-17 1752
UGUI实现雷达图（一） 雷达图介绍（二）UGUI实现雷达显示图的原理（三）利用UGUI制作雷达图（四）项目工程链接 （一） 雷达图介绍 雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法，它利用代表各项数据占比的顶点位置连接成面状，直观的反应当前事物的一个能力倾向。 例如下图：我们能直观的看到该玩家对于（输出，发育）两项的能力比较好 （二）UGUI实...
用python写一个图形描边
03-23
可以使用Python的Pillow库来实现图形描边。以下是一个简单的示例代码： ```python from PIL import Image, ImageDraw # 打开图片 image = Image.open("example.jpg") # 创建画布 canvas = Image.new("RGB", image.size, "white") # 创建画笔 draw = ImageDraw.Draw(canvas) # 绘制描边 draw.rectangle((0, 0, image.width - 1, image.height - 1), outline="black") # 保存图片 canvas.save("example_with_border.jpg") ``` 这段代码会打开名为"example.jpg"的图片，创建一个白色画布，然后在画布上绘制一个黑色矩形描边，最后保存图片为"example_with_border.jpg"。你可以根据需要修改代码来实现不同的描边效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值