Создание круговой диаграммы в Редакторе и Runtime UI

Версия: 2023.2+

В этом примере показано, как использовать вектор API для создания графиков в редакторе и в режиме выполнения UI.

Примерный обзор

Этот пример создает круговую диаграмму на VisualElementи отображает ее в редакторе и в режиме выполнения UI.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• Создание 2D визуального контента
• MeshGenerationContext

Создание круговой диаграммы

Создайте скрипт C#, который использует методы Arc и Fill в Векторе API для рисования круговой диаграммы в визуальный элемент.

1. Создайте проект Unity с любым шаблоном.
2. Создайте папку pie-chart для хранения ваших файлов.
3. В папке pie-chart создайте скрипт C# с именем PieChart.cs со следующим содержанием:

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 создайте скрипт C# с именем PieChartWindow.cs со следующим содержимым:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PieChartWindow : EditorWindow
{
    [MenuItem("UI Toolkit Examples/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());
    }
}

Чтобы просмотреть круговую диаграмму в окне Редактора, в меню выберите Инструменты > PieChart Window.

Добавить круговую диаграмму во время выполнения UI

Добавьте круговую диаграмму в UIDocument GameObject в SampleScene. Для этого сначала создайте скрипт C# с именем PieChartComponent.cs в папке pie-chart со следующим содержанием:

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

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

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

Чтобы просмотреть круговую диаграмму во время выполнения:

1. В SampleScene, выберите GameObject > UI Toolkit > UI Документ.
2. Выберите UIDocument GameObject в иерархии.
3. Добавить PieChartComponent.cs в качестве компонента UIDocument GameObject.
4. Перейдите в режим воспроизведения, чтобы просмотреть круговую диаграмму в сцене.

Дополнительные ресурсы

• Используйте вектор API для создания радиального прогресса