Mesh绘制雷达图(UGUI)

/********************************************************************************

参考资料:http://www.cnblogs.com/jeason1997/p/5130413.html

** 类名称: RadarEditor

** 描述:雷达图

** 作者: 田树东

*********************************************************************************/

using UnityEngine;

using UnityEditor;

using UnityEngine.UI;

[AddComponentMenu("UI/Extensions/RadarEditor")]

public class RadarEditor : MaskableGraphic

{

public bool isFill = true;

[Range(0, 0.99f)]

public float fillPercent = 0.8f;

[Range(0f, 1f)]

public float[] values;

[Range(0f, 360f)]

public float angleOffset = 0;

public bool useStateLine = true;

public Color lineColor = Color.white;

public float lineWidth = 0.5f;

[Range(0f, 1f)]

public float lineLength = 0.8f;

/// <summary>

/// 重写OnPopulateMesh

/// </summary>

/// <param name="vh"></param>

protected override void OnPopulateMesh(VertexHelper vh)

{

Vector2 size = GetComponent<RectTransform>().rect.size / 2f;

vh.Clear();

int partCount = values.Length;

for (int i = 0; i < partCount; i++)

{

Vector2 pos1 = GetPoint(size, i) * values[i];

Vector2 pos2 = isFill ? Vector2.zero : (pos1 * fillPercent);

Vector2 pos4 = (i + 1 >= partCount) ? (GetPoint(size, 0) * values[0]) : (GetPoint(size, i + 1) * values[i + 1]);

Vector2 pos3 = isFill ? Vector2.zero : (pos4 * fillPercent);

vh.AddUIVertexQuad(GetQuad(pos1, pos2, pos3, pos4));

if (useStateLine)

{

if (i != 0)

{

Vector2 lineEndPos = GetPoint(size, i) * lineLength;

Vector2 lineStartPos = Vector2.zero;

vh.AddUIVertexQuad(GetLine(lineStartPos, lineEndPos));

}

if (i + 1 == partCount)

{

Vector2 lineEndPos = GetPoint(size, 0) * lineLength;

Vector2 lineStartPos = Vector2.zero;

vh.AddUIVertexQuad(GetLine(lineStartPos, lineEndPos));

}

}

}

}

/// <summary>

/// 画线

/// </summary>

/// <param name="start"></param>

/// <param name="end"></param>

/// <returns></returns>

private UIVertex[] GetLine(Vector2 start, Vector2 end)

{

UIVertex[] vs = new UIVertex[4];

Vector2[] uv = new Vector2[4];

uv[0] = new Vector2(0, 0);

uv[1] = new Vector2(0, 1);

uv[2] = new Vector2(1, 0);

uv[3] = new Vector2(1, 1);

Vector2 v1 = end - start;

Vector2 v2 = (v1.y == 0f) ? new Vector2(0f, 1f) : new Vector2(1f, -v1.x / v1.y);

v2.Normalize();

v2 *= lineWidth / 2f;

Vector2[] pos = new Vector2[4];

pos[0] = start + v2;

pos[1] = end + v2;

pos[2] = end - v2;

pos[3] = start - v2;

for (int i = 0; i < 4; i++)

{

UIVertex v = UIVertex.simpleVert;

v.color = lineColor;

v.position = pos[i];

v.uv0 = uv[i];

vs[i] = v;

}

return vs;

}

/// <summary>

/// 获取点Vector2

/// </summary>

/// <param name="size"></param>

/// <param name="i"></param>

/// <returns></returns>

private Vector2 GetPoint(Vector2 size, int i)

{

int partCount = values.Length;

float angle = 360f / partCount * i + angleOffset;

float sin = Mathf.Sin(angle * Mathf.Deg2Rad);

float cos = Mathf.Cos(angle * Mathf.Deg2Rad);

return new Vector2(size.x * cos, size.y * sin);

}

/// <summary>

/// 根据点获取UIVertex

/// </summary>

/// <param name="vertPos"></param>

/// <returns></returns>

private UIVertex[] GetQuad(params Vector2[] vertPos)

{

UIVertex[] vs = new UIVertex[4];

Vector2[] uv = new Vector2[4];

uv[0] = new Vector2(0, 0);

uv[1] = new Vector2(0, 1);

uv[2] = new Vector2(1, 0);

uv[3] = new Vector2(1, 1);

for (int i = 0; i < 4; i++)

{

UIVertex v = UIVertex.simpleVert;

v.color = color;

v.position = vertPos[i];

v.uv0 = uv[i];

vs[i] = v;

}

return vs;

}

}

时间: 2024-10-09 14:05:45

Mesh绘制雷达图(UGUI)的相关文章

利用d3.js绘制雷达图

利用d3,js将数据可视化,可以做到数据与代码的分离,方便以后修改数据. 这次利用d3.js绘制了一个五维的雷达图,即将多个对象的五种属性在一张图上对比. 数据写入data.csv.数据类型写入type.csv文件. 效果如下图所示 源码连接:http://download.csdn.net/detail/svap1/7358123 使用是只需调用 radar()函数即可,如下是测试页面代码. <!DOCTYPE html> <html> <head> <meta

Emgu-WPF 激光雷达研究-绘制雷达图

原文:Emgu-WPF 激光雷达研究-绘制雷达图 硬件:Hokuyo URG04LX 环境:VS2017- win10- 64??Emgu_3.2.0.2682 语言:C#? WPF?? 数据解析参考: https://sourceforge.net/p/urgnetwork/wiki/Home/ https://github.com/bqhdev/urg04lx_data_decoder http://sourceforge.net/projects/urgnetwork/files/urg_

【带着canvas去流浪(6)】绘制雷达图

目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细节. 坐标转换 为了避免在绘制过程中不断根据

利用matlibplot绘制雷达图

之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不过可以基于‘polar’图形特征来改进,下面就记录一下如何绘制雷达图. import numpy as np import matplotlib.pyplot as plt # 用于正常显示中文 plt.rcParams['font.sans-serif'] = 'SimHei' #用于正常显示符号

在Unity中使用uGUI绘制自定义图形(饼状图 雷达图)

饼状图或者是雷达图是根据属性自动生成的自定义图形.这里展示了如何使用uGUI完成这一功能. 先附上我制作雷达图的控件的代码  UIPropWidget.cs using UnityEngine; using System.Collections.Generic; using UnityEngine.UI; /* * * 2 6 * * 3 7 * * 0 1 5 4 * * * 2 6位为属性0 3为属性1 0为属性2 4为属性3 7为属性4 */ public class UIPropWidg

Matlab-Octave中绘制网格图和等高线:mesh 和 surf

x=linspace(-50, 50, 50); % 在x轴上取50点y=linspace(-25, 25, 25); % 在y轴上取25点[xx,yy]=meshgrid(x, y); % xx和yy都是矩阵zz=8000-2.*xx.*xx-5.*yy.*yy; % 计算函数值,zz也是21x21的矩阵surf(xx, yy, zz); % 画出立体曲面图colorbar; %如下图,右边那个色卡 可按回车 contour(xx,yy,zz)colorbar 可按回车surfc(xx,yy,

Python简单雷达图绘制

import numpy as npimport matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams['font.family'] = 'SimHei'matplotlib.rcParams['font.sans-serif'] = ['SimHei']lables = np.array(['综合','KDA','发育','推进','生存','输出'])nAttr = 6date = np.array([7, 5, 6, 9,

javascript雷达图/星形图/极坐标图Radar &amp; Polar chart介绍

Radar & Polar chart 控件为软件开发人员提供了雷达图/星形图/极坐标图,它以轴上的同一个点为起点,绘制出三个或更多的变量. 具体功能: 任意多的轴 动态或静态 简单.堆积.100%堆积的图表 网格线能转换为圆环 在轴之间进行填充 以自定义范围值填充 跨平台 导出为图像 可通过JavaScript进行控制 可直接通过HTML文件进行设置和数据交换 自定义图像和Flash(动态)背景 无限的标签 可旋转的标签 可使用预设频率重新加载数据 格式任何气球文本 Amcharts可以从简单

Android自定义控件 芝麻信用分雷达图

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 1.介绍 首先看下支付宝上芝麻信用分的效果图: 2.思路 确定雷达图中心点坐标 绘制多边形及连接线 根据维度值绘制覆盖区域 绘制分数 绘制每个维度的标题文字和图标 3.实现 获取布局的中心坐标 在onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根据View的长宽,计算出雷达图的半径(这里取布局宽高最小值的四分之一,可以自定义),获取整个布局的中心坐标.