В этой статье блога мы углубимся в DrawSizePreservingFillContainer в osu! Framework и изучите различные методы его эффективного использования при разработке пользовательского интерфейса. Этот контейнер играет решающую роль в управлении и сохранении размера элементов пользовательского интерфейса, обеспечивая удобство взаимодействия с пользователем. Мы продемонстрируем несколько примеров кода, чтобы продемонстрировать, как использовать эту функцию в ваших проектах.

Метод 1: базовое использование
DrawSizePreservingFillContainer обычно используется для хранения элементов пользовательского интерфейса, которым необходимо сохранять соотношение сторон при адаптации к различным размерам экрана. Вот простой пример:

using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osuTK;
public class MyDrawable : CompositeDrawable
{
    public MyDrawable()
    {
        RelativeSizeAxes = Axes.Both;
        AddRangeInternal(new Drawable[]
        {
            new DrawSizePreservingFillContainer
            {
                Child = new SpriteText
                {
                    Text = "Hello, osu! Framework!",
                    Anchor = Anchor.Centre,
                    Origin = Anchor.Centre,
                },
                TargetDrawSize = new Vector2(1920, 1080),
            }
        });
    }
}

Метод 2: управление масштабированием
Иногда вам может потребоваться управлять масштабированием на основе определенной оси. Вот пример, демонстрирующий, как этого добиться:

using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osuTK;
public class MyDrawable : CompositeDrawable
{
    public MyDrawable()
    {
        RelativeSizeAxes = Axes.Both;
        AddRangeInternal(new Drawable[]
        {
            new DrawSizePreservingFillContainer
            {
                Child = new SpriteText
                {
                    Text = "Hello, osu! Framework!",
                    Anchor = Anchor.Centre,
                    Origin = Anchor.Centre,
                },
                TargetDrawSize = new Vector2(1920, 1080),
                ScaleAxes = Axes.Y, // Scale only on the Y-axis
            }
        });
    }
}

Метод 3: настройка соотношения сторон
В некоторых случаях вам может потребоваться настроить соотношение сторон контейнера. Вот пример, демонстрирующий, как этого добиться:

using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osuTK;
public class MyDrawable : CompositeDrawable
{
    public MyDrawable()
    {
        RelativeSizeAxes = Axes.Both;
        AddRangeInternal(new Drawable[]
        {
            new DrawSizePreservingFillContainer
            {
                Child = new SpriteText
                {
                    Text = "Hello, osu! Framework!",
                    Anchor = Anchor.Centre,
                    Origin = Anchor.Centre,
                },
                TargetDrawSize = new Vector2(1920, 1080),
                CustomAspectRatio = 16 / 9f, // Custom aspect ratio (16:9)
            }
        });
    }
}

Контейнер DrawSizePreservingFillContainer в osu! Framework — мощный инструмент для управления и сохранения размера элементов пользовательского интерфейса. Используя методы, продемонстрированные в этой статье, вы можете гарантировать, что ваш пользовательский интерфейс легко адаптируется к экранам разных размеров, сохраняя при этом желаемое соотношение сторон. Поэкспериментируйте с этими примерами кода и откройте для себя универсальность этого контейнера в своих проектах.