[Unity][UGUI]UGUI的饼状统计图



参考资料1里面有 Unity 商店 AssestStore 现成的插件。但是鉴于 囊中羞涩,就得自己做。


参考资料2,3的资料 相对完整,其 实现的 效果图如下所示。

[Unity][UGUI]UGUI的饼状统计图_第1张图片


我实现的效果是这样的。

[Unity][UGUI]UGUI的饼状统计图_第2张图片

[Unity][UGUI]UGUI的饼状统计图_第3张图片

其理念就 是 进度条,因为 UGUI 的 显示层级是 ,Canvas最下面 的 UI是在Game 的Screne视图 的最上方显示。

因此就是 视觉差。

[Unity][UGUI]UGUI的饼状统计图_第4张图片

[Unity][UGUI]UGUI的饼状统计图_第5张图片

unity 5.6.4p1


先创建 UI的如下图所示,然后制作成预制体

[Unity][UGUI]UGUI的饼状统计图_第6张图片



Panel下面的四个 Image的配列用到的是UGUI的Layout Element,本文不赘述,实现应该是很简单的。

像左边的方框的按钮 预制体Image如下图所示

[Unity][UGUI]UGUI的饼状统计图_第7张图片

把颜色属性,Work Info 的属性进行设置即可。


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class WorkInfo : MonoBehaviour {

    public int num;
	
}




[Unity][UGUI]UGUI的饼状统计图_第8张图片

GO_Prefab_Array存放的是 几个 样式 的预制体 的 数组 的 对象。

GOPOS_Array存放的是Scene视图里面的位置。


通过JobManager来控制这几个 统计图 的样式,以及填充的 类型 等。

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

//
//选择不同样式,复制,赋予颜色,并且使得
//
public class JobManager : MonoBehaviour {

    
    
    public GameObject[] GOPrefab_Array;//存放 统计图的几个样式 预制体
    public GameObject[] GOPOS_Array;//存放 实际UI 的GO 的位置

    //暂存 几个 项目的 (输出0、治疗50、DPS20、控制30) 的数值数组
    private int[] GO_work_array;//暂时存放 需要被统计显示出来的 的 数值的 数组

    public Image.Type ImageType;//设置填充的类型
    public Image.FillMethod Image_FillMethod;
    public int Image_FillOrigin;
    public bool Image_FillClockwise;//顺时针,逆时针


    Vector3 v = new Vector3(0,0,0);
    // Use this for initialization
    void Start () {
        //找到子类的 几个 项目的 (输出0、治疗50、DPS20、控制30) 的数值
        SortingWorkNum(this.gameObject);
        
        //遍历 样式,生成其 子类
        for (int j=0; j< GOPrefab_Array.Length;j++)
        {
            print("   "+ GOPrefab_Array[j].transform.name);
            CreateGO(this.gameObject, GOPrefab_Array[j], GOPOS_Array[j]);
        }
    }

    //ReferenceGO是物体Panel,也就是自身的对象。
    public void CreateGO(GameObject ReferenceGO, GameObject go_,GameObject goPos)
    {
        //定义 一个 显示类型 的子类。并 在遍历 中 递减。
        int ChildCount = ReferenceGO.transform.childCount;//子类的数量
        int control_num = 0;
        float each_totalnum = 0;//每个(输出0、治疗50、DPS20、控制30)项目的 应该显示的数值
        int totalNum = 0;//(输出0、治疗50、DPS20、控制30)

        //遍历 工作类型 的子类,并对其 进行设置
        for (int i = 0; i < ReferenceGO.transform.childCount; i++)
        {
            totalNum = totalNum + ReferenceGO.transform.GetChild(i).transform.GetComponent().num;
        }
        print("    totalNum:" + totalNum);

        //遍历 工作类型 的子类,并对其 进行设置
        for (int i=0;i< ReferenceGO.transform.childCount; i++)
        {
            //重置 (输出0、治疗50、DPS20、控制30)每个 项目 的应该 显示 的数值,如果是 输出项目,则为0.治疗,数值100.DPS,数值50.控制,数值30.
            each_totalnum = 0;
            ChildCount = ReferenceGO.transform.childCount;//由于这个变量,在 循环中会 递减,因此 在 每个项目 的判断启动的时候,就要重置。

            //生成 新的物体Image预制体 的 物体对象
            GameObject child1 = Instantiate(go_);
            child1.transform.SetParent(goPos.transform);
            child1.transform.GetComponent().localPosition = v;
            child1.transform.GetComponent().localScale = new Vector3(1, 1, 1);

            //GameObject go_1 = Instantiate(go_,goPos.transform);
            //go_1.transform.GetComponent().position = v;

            //对每个 样式 的 新建 的 子类 ,进行 设置 
            goPos.transform.GetChild(i).transform.GetComponent().color = ReferenceGO.transform.GetChild(i).transform.GetComponent().color;
            goPos.transform.GetChild(i).transform.name = goPos.transform.GetChild(i).transform.name + i;
            goPos.transform.GetChild(i).transform.GetComponent().type = ImageType;
            goPos.transform.GetChild(i).transform.GetComponent().fillMethod = Image_FillMethod;
            //goPos.transform.GetChild(i).transform.GetComponent().fillOrigin = Image_FillOrigin;
            goPos.transform.GetChild(i).transform.GetComponent().fillClockwise = Image_FillClockwise;
            
            //从 最后一个 开始进行 累加的处理。
            control_num = i;
            for (int j = ChildCount-1; j >= control_num; j--)
            {
                //each_totalnum = each_totalnum + ReferenceGO.transform.GetChild(j).transform.GetComponent().num;
                each_totalnum = each_totalnum + GO_work_array[j];

                //print("       j:" + j + "  GO_work_array[j]: " + GO_work_array[j]);
            }
            //print("       i:"+i+"  each_totalnum: " + each_totalnum);

            goPos.transform.GetChild(i).transform.GetComponent().fillAmount =  each_totalnum/totalNum;

            //print("         ImageType " + ImageType);
            //print("         .name " + goPos.transform.GetChild(i).transform.name);
            //print("         .fillOrigin " + goPos.transform.GetChild(i).transform.GetComponent().fillOrigin);

            ChildCount = ChildCount - 1;
        }

    }

    //几个 项目的 (输出0、治疗50、DPS20、控制30) 的数值 放入 数组中
    private void SortingWorkNum(GameObject ReferenceGO)
    {
        GO_work_array = new int[ReferenceGO.transform.childCount];
        for (int j = 0; j < ReferenceGO.transform.childCount; j++)
        {
            //print(" " + j + "  " + ReferenceGO.transform.GetChild(j).transform.name);
            //print(" "+j+"  " + ReferenceGO.transform.GetChild(j).transform.GetComponent().num);
            GO_work_array[j] = ReferenceGO.transform.GetChild(j).transform.GetComponent().num;
            //CreateGO(this.gameObject, GO_Array[j], GOPOS_Array[j]);
        }
    }
}


逻辑图如下所示

[Unity][UGUI]UGUI的饼状统计图_第9张图片



参考资料:

1.

Unity怎么用UGUI制作图表,柱状图,饼图?有现成的插件吗,推荐几款?

2.

Untiy自定义UI组件

3.

Unity自定义UI组件(三)饼图篇

4.

5.

6.


你可能感兴趣的:(Unity,UGUI)