统一纵横比 - C#

统一纵横比（Uniform Aspect Ratio），常用于游戏或类似应用程序中，以确保游戏中所有内容都可以在不同分辨率的屏幕上正确显示。它的主要思想是通过动态计算和调整元素的大小和位置，使它们在不同分辨率下保持正确的比例和位置。在本文中，我们将介绍如何在 C# 中实现统一纵横比。

实现方式

方式一：使用相对大小和位置

一种简单的实现方式是使用相对大小和位置来控制元素的大小和位置。具体地说，我们可以将屏幕分为若干行和列，并计算出每行和每列的高度和宽度，然后在布局时使用相对大小和位置来计算元素的大小和位置。代码示例如下：

public class UIElement
{
    public Vector2 position;
    public Vector2 size;
}

public class UIPanel
{
    public List<UIElement> children;

    // 统一纵横比
    public void UpdateLayout()
    {
        float aspectRatio = GetAspectRatio();
        int numberOfColumns = GetNumberOfColumns();
        int numberOfRows = Mathf.CeilToInt(children.Count / (float)numberOfColumns);

        float columnWidth = Screen.width / (float)numberOfColumns;
        float rowHeight = Screen.height / (float)numberOfRows;

        float elementWidth = columnWidth / aspectRatio;
        float elementHeight = rowHeight;

        for (int i = 0; i < children.Count; i++)
        {
            int columnIndex = i % numberOfColumns;
            int rowIndex = i / numberOfColumns;

            var child = children[i];
            child.position = new Vector2(columnIndex * columnWidth, rowIndex * rowHeight);
            child.size = new Vector2(elementWidth, elementHeight);
        }
    }

    // 获取屏幕纵横比
    private float GetAspectRatio()
    {
        return Screen.width / (float)Screen.height;
    }

    // 获取列数
    private int GetNumberOfColumns()
    {
        float aspectRatio = GetAspectRatio();

        if (aspectRatio < 1)
        {
            return 2;
        }
        else if (aspectRatio < 1.5)
        {
            return 3;
        }
        else
        {
            return 4;
        }
    }
}

方式二：使用画布缩放

另一种实现方式是使用画布缩放来控制元素的大小和位置。具体来说，我们需要先创建一个画布，然后在画布上添加元素，并将所有元素的父级设置为画布，在布局时，我们可以通过调整画布的缩放来控制元素的大小和位置，从而实现统一纵横比。代码示例如下：

public class UIElement : MonoBehaviour
{
    public void SetAspectRatio(float aspectRatio)
    {
        var canvas = GetComponentInParent<CanvasScaler>();
        float scale = GetScale(aspectRatio);
        canvas.scaleFactor = scale;
    }

    private float GetScale(float aspectRatio)
    {
        float screenWidth = Screen.width;
        float screenHeight = Screen.height;

        if (aspectRatio > 1f)
        {
            screenHeight = screenWidth / aspectRatio;
        }
        else
        {
            screenWidth = screenHeight * aspectRatio;
        }

        float scale = Mathf.Min(screenWidth / canvasReferenceResolution.x, screenHeight / canvasReferenceResolution.y);
        return scale;
    }
}

总结

通过以上两种实现方式可以实现统一纵横比，具体选择哪种方式，需要根据具体需求来定。无论采用哪种方式，都需要掌握屏幕纵横比的计算方法与如何调整元素的大小和位置。