使用 Canvas Scaler 时 UI 元素不缩放答案

【问题标题】：UI Elements not scaling while using Canvas Scaler使用 Canvas Scaler 时 UI 元素不缩放
【发布时间】：2023-03-24 16:51:02
【问题描述】：

我正在尝试让我的 UI 元素正常工作，并在每种不同的分辨率下保持不变。我在我的 Canvas 中添加了一个 Canvas Scaler 并玩弄设置，直到它看起来完成。

然后我尝试构建游戏并以几种不同的分辨率运行它以确认它可以正常工作。但是，Canvas Scaler 似乎不起作用。

http://prntscr.com/d1afz6

以上是一些随机分辨率，但这就是我的编辑器屏幕有多大，这就是我用作参考分辨率的分辨率。这也是此特定 Canvas http://prntscr.com/d1aggx 的层次结构。当以 640x480 运行时，它几乎占据了整个屏幕。我不知道为什么这不起作用。我已经阅读了大多数统一指南，但似乎都没有这个问题。

【问题讨论】：

这可能不是缩放器故障。您可能使用的是绝对坐标和大小，它们不会随屏幕大小而变化。
您能说得更具体一点，更详细一点吗？我不确定绝对坐标和大小是什么意思，你说的是ui元素还是画布的属性？

标签： user-interface canvas unity3d resolution unity5

【解决方案1】：

好的，无论屏幕大小如何，您都必须使用与 Unity 的绝对坐标系不同的坐标系。 Unity 的模型之一是 View。视图是左上角的坐标 0,0，右下角的坐标 1,1。创建一个基本的 Rect 来处理它，如下所示。

using UnityEngine;

namespace SeaRisen.nGUI
{
    public class RectAnchored
    {
        public float x, y, width, height;

        public RectAnchored(float x, float y, float width, float height)
        {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
        }

        public static implicit operator Rect(RectAnchored r)
        {
            return new Rect
            {
                x = r.x * Screen.width,
                y = r.y * Screen.height,
                width = r.width * Screen.width,
                height = r.height * Screen.height
            };
        }
    }
}

在这里，我们采用普通的 Rect 浮点数、x,y 坐标以及宽度和高度。但这些都在值 [0..1] 中。我没有夹住它，所以如果需要的话，它可以在屏幕上和屏幕外进行补间。

以下是一个简单的脚本，它在屏幕右下角创建一个按钮，并随着屏幕的增大或缩小而调整大小。

void MoveMe()
{
    RaycastHit hit;
    if (Physics.Raycast(transform.position, -Vector3.up, out hit, float.MaxValue)
        || Physics.Raycast(transform.position, Vector3.up, out hit, float.MaxValue))
        transform.position = hit.point + Vector3.up * 2;
}

void OnGUI()
{
    if (GUI.Button(new RectAnchored(.9f, .9f, .1f, .1f), "Fix me"))
    {
        MoveMe();
    }
}

X 向右为 0.9，Y 距离顶部为 0.9，宽度和高度为 0.1，因此按钮的高度和宽度为屏幕的 1/10，位于屏幕底部的 1/10屏幕。

由于每帧（或左右）都会渲染 OnGUI，因此按钮 rect 会随着屏幕大小自动更新。如果您使用 Update() 来渲染窗口，那么在典型的 UI 中也是如此。

我希望这能解释我所说的绝对坐标之间的区别。在 640x480 中设置前面的示例（使用绝对值），它会类似于 new Rect(576, 432, 64, 48) 并且不会缩放。通过使用new RectAnchored(.9f, .9f, .1f, .1f) 并根据屏幕大小将其渲染到 UI 空间中，然后自动缩放。

【讨论】：