Radar de atributos de dibujo en Unity (1)
1. El efecto final del gráfico de radar:
En esta demostración, configuro cuatro teclas de acceso directo A, B, C y D para probar el efecto de visualización del gráfico de radar. , lo cual es conveniente, lo pruebo y veo cómo funciona. a es un valor de atributo de gráfico de radar generado aleatoriamente, B es un gráfico de radar generado de pequeño a grande, C es un gráfico de radar con todos los atributos y D es un gráfico de radar con visualización de datos personalizada.
2. Desmontaje de la función del gráfico de radar
Como se puede ver en el vídeo de demostración anterior, el gráfico de radar tiene principalmente seis anillos, 11 líneas de dimensión, 11 puntos de atributos máximos y valores de atributos.
1. Cálculo de coordenadas de vértices
Primero, para dibujar la línea anterior y completar los datos, se deben calcular las coordenadas de cada vértice. El cálculo de las coordenadas de los vértices puede establecer un sistema de coordenadas de la siguiente manera:
Esto nos permite calcular las coordenadas de cada vértice mediante funciones trigonométricas familiares.
vector 2[]polygonVertex = nuevo vector 2[m _ polygonCount+1]
floatrad=2*Mathf. PI/m _ polygonCount;
for(inti = 0; i & ltm _ polygonCounti++)
{
float = rad * I;
if(m_align==EAlign.Y_FORWARD){
a+=Mathf. PI/2.0f;
}
Polígono[i]. x=m_center.x+m_radius*Mathf. cos(a);
Polígono[i]. y=m_center.y+m_radius*Mathf. sin(1);
if(m_align==EAlign.y_forward)
{
if(m_drawDirection==EDirection.en el sentido de las agujas del reloj)
Polígono[i]. x * =-1.0f;
}
Otro
{
if(m_drawDirection==EDirection. En el sentido de las agujas del reloj)Polígono[ i ]. y * =-1.0f;
}
}
Nota: 2 * Mathf. PI = 360 grados, excepto la dimensión 11, se puede calcular el ángulo ocupado por cada dimensión, y luego cada punto de coordenadas se puede calcular mediante tres funciones y el radio del círculo.
2. Calcula las coordenadas del vértice de cada anillo en 11 dimensiones.
A través del primer paso, se han calculado los puntos de coordenadas de 11 vértices, y luego los puntos de coordenadas en una dimensión se dividen en seis partes iguales, de modo que se puedan calcular los puntos de coordenadas en cada dimensión. Luego usa el bucle for para dividir las 11 dimensiones en 6 partes iguales, de modo que puedas obtener 6 de cada dimensión en las 11 dimensiones.
for(int index = 0; index & ltm _polygon count; index++)
{
intvertexOffset = index * round count;
for(inti = 0; i& ltm _ polygonCounti++)
{
polygonVertex[I]= límites _[I]/m _ recuento externo de polígonos *(index+1);
}
polígonoVértice[bounds_. length-1]= polygonVertex[0];
}
Descripción: índice = 0, que es la estructura alámbrica circular más interna, y luego divide las coordenadas del vértice por 6 para calcular cada coordenada. de un punto.
De esta manera, cada bucle calcula las coordenadas de cada punto de la estructura alámbrica circular en una capa. polígonoVértice[límites_. length-1]= polygonVertex[0]; esta oración reasigna el primer vértice en la matriz de vértices al último vértice, lo que facilita atravesar y dibujar el triángulo más adelante.
3. Dibuje el área de llenado de atributos del gráfico de radar.
Utilizando los datos de cada vértice, se pueden dibujar las áreas llenas de atributos en el gráfico de radar. Por ejemplo, los 11 valores de atributos de un héroe, con estos valores de 11 dimensiones, se pueden asignar a una dimensión del gráfico de radar y luego, a través de la interfaz de dibujo de la interfaz de usuario de Unity, el punto central y los dos puntos de atributos forman un triángulo, y los datos del triángulo puede ser Le dice a la interfaz de dibujo de Unity que dibuje triángulos.
Nota: Al dibujar un triángulo, al enviar los datos de la matriz de vértices del triángulo y el índice a Unity, preste atención al orden del índice. Por ejemplo, en la Figura 3, agregue índices en el sentido de las agujas del reloj en el orden 0.1.2 y la capa inferior de Unity dibujará triángulos en nuestro orden.
Este artículo también se publicó en Zhihu: Dibujo del gráfico de radar de atributos "I" - Zhihu.