在编辑器和运行时 UI 中创建饼图

版本: 2023.2+

此示例演示如何使用 Vector API 在编辑器和运行时UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 术语表中创建图形。

示例概述

此示例将饼图生成到VisualElement上，并在编辑器和运行时 UI 中显示它。

您可以在此GitHub 存储库中找到此示例创建的完整文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容

• 生成 2D 可视化内容
• MeshGenerationContext

创建饼图

创建一个使用 Vector API 中的Arc和Fill方法将饼图绘制到可视元素可视树的一个节点，它实例化或派生自 C# VisualElement 类。您可以设置外观样式，定义行为，并将其作为 UI 的一部分显示在屏幕上。 更多信息
参见 术语表中的 C# 脚本。

1. 使用任何模板创建一个 Unity 项目。
2. 创建一个名为pie-chart的文件夹来存储您的文件。
3. 在pie-chart文件夹中，创建一个名为PieChart.cs的 C# 脚本，内容如下

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

[UxmlElement]
public partial class PieChart : VisualElement
{
    float m_Radius = 100.0f;
    float m_Value = 40.0f;

    public float radius
    {
        get => m_Radius;
        set
        {
            m_Radius = value;
        }
    }

    public float diameter => m_Radius * 2.0f;

    public float value {
        get { return m_Value; }
        set { m_Value = value; MarkDirtyRepaint(); }
    }

    public PieChart()
    {
        generateVisualContent += DrawCanvas;
    }

    void DrawCanvas(MeshGenerationContext ctx)
    {
        var painter = ctx.painter2D;
        painter.strokeColor = Color.white;
        painter.fillColor = Color.white;

        var percentage = m_Value;

        var percentages = new float[] {
            percentage, 100 - percentage
        };
        var colors = new Color32[] {
            new Color32(182,235,122,255),
            new Color32(251,120,19,255)
        };
        float angle = 0.0f;
        float anglePct = 0.0f;
        int k = 0;
        foreach (var pct in percentages)
        {
            anglePct += 360.0f * (pct / 100);

            painter.fillColor = colors[k++];
            painter.BeginPath();
            painter.MoveTo(new Vector2(m_Radius, m_Radius));
            painter.Arc(new Vector2(m_Radius, m_Radius), m_Radius, angle, anglePct);
            painter.Fill();

            angle = anglePct;
        }
    }
}

在编辑器 UI 中添加饼图

1. 创建一个名为Editor的文件夹来存储您的文件。
2. 在Editor文件夹中，创建一个名为PieChartWindow.cs的 C# 脚本，内容如下

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PieChartWindow : EditorWindow
{
    [MenuItem("Tools/PieChart Window")]
    public static void ShowExample()
    {
        PieChartWindow wnd = GetWindow<PieChartWindow>();
        wnd.titleContent = new GUIContent("PieChartWindow");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
            
        root.Add(new PieChart());
    }
}

要查看编辑器窗口中的饼图，请从菜单中选择工具>饼图窗口。

在运行时 UI 中添加饼图

在 SampleScene 中的 UIDocument游戏对象Unity 场景中的基本对象，可以表示角色、道具、场景、摄像机、路径点等。游戏对象的函数由附加在其上的组件定义。 更多信息
参见 术语表中添加饼图。为此，首先在pie-chart文件夹中创建一个名为PieChartComponet.cs的 C# 脚本，内容如下

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

[RequireComponent(typeof(UIDocument))]
public class PieChartComponent : MonoBehaviour
{
    PieChart m_PieChart;

    void Start()
    {
        m_PieChart = new PieChart();
        GetComponent<UIDocument>().rootVisualElement.Add(m_PieChart);
    }
}

要查看运行时的饼图

1. 在 SampleScene 中，选择游戏对象>UI 工具包>UI 文档。
2. 在层次结构中选择UIDocument游戏对象。
3. 将PieChartComponet.cs作为 UIDocument 游戏对象的组件添加。
4. 进入播放模式以查看场景场景包含游戏环境和菜单。可以将每个唯一的场景文件视为一个唯一的关卡。在每个场景中，您放置环境、障碍物和装饰，从本质上讲，将游戏设计和构建成片段。 更多信息
   参见 术语表中的饼图。

其他资源

• 使用 Vector API 创建径向进度