First, the final effect of radar map:
In this demonstration, I set four shortcut keys, A, B, C and D, to test the display effect of radar chart, which is convenient for me to test and check the effect. A is the attribute value of randomly generated radar chart, B is the radar chart generated from small to large, C is the radar chart with all attributes, and D is the radar chart with customized data display.
Second, the radar chart function disassembly
As can be seen from the above demonstration video, the radar map mainly has six rings, 1 1 dimension line, 1 1 maximum attribute point, and the filling and drawing of attribute values.
1, calculation of vertex coordinates
First of all, to draw the above lines and fill in the data, we must calculate the coordinates of each vertex. The calculation of vertex coordinates can establish a coordinate system in the following ways:
This allows us to calculate the coordinates of each vertex through the familiar trigonometric function.
vector 2[]polygonVertex = new vector 2[m _ polygonCount+ 1]；
floatrad=2*Mathf。 PI/m _ polygonCount；
for(inti = 0； I<m _ polygonCounti+++)
{
float = rad * I；
if(m_align==EAlign。 Y_FORWARD){
a+=Mathf。 PI/2.0f；
}
Polygon [i]. x=m_center.x+m_radius*Mathf。 cos(a)；
Polygon [i]. y=m_center.y+m_radius*Mathf。 Crime (1);
if(m_align==EAlign。 Y _ forward)
{
if(m_drawDirection==EDirection。 Clockwise)
Polygon [i]. x * =- 1.0f；
}
other
{
if(m_drawDirection==EDirection。 Clockwise) polygon [i]. y * =- 1.0f；
}
}
Note: 2 * Mathf. PI = 360 degrees, except the dimension 1 1, the angle occupied by each dimension can be calculated, and then each coordinate point can be calculated by three functions and the radius of the circle.
2. Calculate the vertex coordinates of each ring in 1 1 dimension.
Through the first step, the coordinate points of 1 1 vertices have been calculated, and then the coordinate points in one dimension are divided into six equal parts, so that the coordinate points in each dimension can be calculated. Then, through the for loop, the 1 1 dimension is divided into six equal parts, so that the 6 of each dimension in the 1 1 dimension can be obtained.
for(int index = 0； Index & ltm _ polygon count; index++)
{
intvertexOffset = index * round count；
for(inti = 0； I<m _ polygonCounti+++)
{
polygonVertex[I]= bounds _[I]/m _ polygon outer count *(index+ 1)；
}
polygonVertex[bounds_。 length- 1]= polygonVertex[0]；
}
Description: index=0, which is the innermost circular wireframe, and then divide the vertex coordinates by 6 to calculate the coordinates of each point. In this way, the coordinates of each point of a layer of round wire frame are calculated every cycle. polygonVertex[bounds_。 length- 1]= polygonVertex[0]； Reassign the first vertex in the vertex array to the last vertex, so that it is easier to traverse and draw triangles later.
3. Draw the radar map attribute filling area.
Using the data of each vertex, the attribute filling area in radar map can be drawn. For example, a hero's 1 1 attribute value, with these 1 1 dimension values, can be mapped to a dimension of this radar map, and then through the UI drawing interface of Unity, the center point and two attribute points form a triangle, and the triangle data can be told to the drawing interface of Unity to draw a triangle.
Note: When drawing triangles, pay attention to the order of indexes when sending triangle vertex array data and indexes to Unity. For example, as shown in Figure 3, add indexes in the order of 0. 1.2 clockwise, and the bottom of Unity will draw triangles in our order.
This article was also published in Zhihu: Drawing the Attribute Radar Map "I"-Zhihu.