Unity アレイ ノードがレーダー チャートを描画します

	雷达图也叫蜘蛛网,常用处就是展示出多组数据值的比较,能清晰看出变量在数据集合中的高低。
	绘制一个雷达图需要借用UnityUGUI中对UI的绘制流程,以下是实现过程:
	
	定义一个 节点数组 arr ,该数组用于确定顶点数量位置与大小。
	activeSprite 为一个精灵Sprite 变量,用于后面的向雷达图添加图形,可以略过
	public float[] arr;
    public Sprite activeSprite;
    public override Texture mainTexture
    {
    
    
    /*
    	 get写入判断了三种情况
		先是没有精灵变量,则返回精灵的纹理
		然后判断材质是否为空以及材质上的纹理是否为空,为空则返回默认的白色纹理s_WhiteTexture
		不为空就返回该材质的纹理
    */
        get
        {
    
    
            if (activeSprite == null)
            {
    
    
                if (material != null && material.mainTexture != null)
                {
    
    
                    return material.mainTexture;
                }
                return s_WhiteTexture;
            }
            return activeSprite.texture;
        }
    }
    /*
    该段就是重写 MaskableGraphic 中的 OnPopulateMesh 填充网格
    最开始的if用于判断节点是否小于3 只有大于3才能构建三角形形成网格
    */
    protected override void OnPopulateMesh(VertexHelper vh)
    {
    
    
        if (arr.Length < 3)
        {
    
    
            base.OnPopulateMesh(vh);
            return;
        }

        float w = rectTransform.sizeDelta.x;   
        float h = rectTransform.sizeDelta.y;

        vh.Clear();
        float ang = 2 * Mathf.PI / arr.Length;
        vh.AddVert(Vector3.zero, color, new Vector2(0.5f,0.5f));
        
		/*该循环遍历了节点数量,并计算出节点的坐标和uv坐标分量*/
        for (int i = 0; i < arr.Length; i++)
        {
    
    
            float x = Mathf.Sin(i * ang) * arr[i];
            float y = Mathf.Cos(i * ang) * arr[i];

            float uvx = (x+w/2)/w;
            float uvy = (y+h/2)/h;

            vh.AddVert(new Vector3(x, y, 0), color, new Vector2(uvx, uvy));
            /*遍历结束后
              如果 i == 0  表明该节点是第一个,则需要中心点与第一个后最后一个顶点构成三角形,
              不等于0 即不是第一个顶点,就只要中心点与相邻两个顶点构成三角形
              两者都是获取顶点添加三角形索引
            */
            if (i == 0)
            {
    
    
                vh.AddTriangle(0, arr.Length, 1);
            }
            else
            {
    
    
                vh.AddTriangle(0, i, i + 1);
            }
        }
    }

ここに画像の説明を挿入します
このコードは、配列のサイズを使用して、このような多角形グリッド描画を実装します。ノード数が十分であれば、円の特徴も現れます。

–補足
シルダー、スクロールバー、または通常の乱数を使用してレーダー チャートの頂点の値を変更することもできます。
TODO:原顶点的数值会一直保留,改变后的新值不会直接修改原值,需要将原值标记为 脏 ,脏数据会在下一帧重现渲染

//将全部Graphic 组件标记为脏
public virtual void SetAllDirty();
//将Graphic 组件上的布局标记为脏
public virtual void SetLayoutDirty();
//将Graphic 组件上关联的材质标记为脏
public virtual void SetMaterialDirty();

上記の 3 つは、ダーティとしてマークを付けるための異なる方法です。データを頻繁にダーティとしてマークすると、パフォーマンスに影響が生じます。これは 对象池 と同じであり、 脏标记模式ダーティデータを一元管理するには

おすすめ

転載: blog.csdn.net/m0_57252175/article/details/132273800