如何计算矩形所需的比例以适合屏幕

Posted

技术标签:

【中文标题】如何计算矩形所需的比例以适合屏幕【英文标题】:How to calculate the required scale of a rectangle to fit the screen 【发布时间】:2020-06-26 02:59:11 【问题描述】:

我想根据相机位置调整我的矩形以适应屏幕尺寸。

这是矩形的 VBO 数据。

width = 50.0f;
height = 50.0f;
verticesRect = 
        // Positions        // Normal Coords          // Texture Coords
        width,  height, 0.0f,    0.0 , 0.0, 1.0 ,     1.0f, 0.0f,   // Top Right
        width, -height, 0.0f,    0.0 , 0.0, 1.0 ,     1.0f, 1.0f,   // Bottom Right
       -width, -height, 0.0f,    0.0 , 0.0, 1.0 ,     0.0f, 1.0f,   // Bottom Left
       -width, height, 0.0f,    0.0 , 0.0, 1.0 ,     0.0f, 0.0f    // Top Left 
    ;

投影矩阵。

 float angle = 45.0f;
    glm::mat4 projection = glm::perspective(glm::radians(angle), (float)1920.0 / (float)1080.0, 0.1, 1000.0);

视图矩阵

glm::vec3 Position( 0.0 , 0.0 , 500.0);
glm::vec3 Front( 0.0 , 0.0 , 0.0);
glm::vec3 Up( 0.0 , 1.0 , 0.0);
glm::mat4 view = glm::lookAt(Position, Front , Up);

矩形对象的矩阵是

glm::model = PositionMarix * RotationMatrix * ScalingMatrix;

如何计算对象的缩放比例以使其适合屏幕尺寸

矩形对象可以在z位置平移,因此相机也可以在z位置移动。

【问题讨论】:

【参考方案1】:

在透视投影中,视口上的投影大小取决于到相机的距离 (depth)。

aspect = width / height

height_vp = depth * 2 * atan(fov_y / 2)
width_vp  = height_vp * aspect

在您的情况下,对象围绕 (0, 0, 0) 绘制,相机到原点的距离为 500。视野 (fov_y) 为 glm::radians(angle)。 使用上面的公式,您可以在视口上投影一个左下角 (-1, -1) 和右上角 (1, 1) 的矩形。由于矩形的左下角是 (-50, -50),右上角是 (50, 50),因此您必须除以这个比例。 因此规模是:

float scale_x = 500.0f * 2.0f * atan(glm::radians(angle) / 2.0f);
float scale_y = scale_x * 1920.0f / 1080.0f;

glm::mat4 ScalingMatrix = glm::scale(glm::mat4(1.0f), 
    glm::vec3(scale_x / 50.0f, scale_y / 50.0f, 1.0f));

【讨论】:

我有一个问题,对于宽度为 100 的矩形和另一个宽度为 200 的矩形,缩放因子不会不同。 @Summit 哦,当然可以。我计算了一个大小为 2x2、从 (-1, -1) 到 (1, 1) 的矩形的缩放比例。你想画不同大小的矩形吗? 它们可以有不同的宽度和高度。 @Summit 我已经扩展了答案。

以上是关于如何计算矩形所需的比例以适合屏幕的主要内容,如果未能解决你的问题,请参考以下文章

计算在一个屏幕到另一个屏幕之间导航所需的时间

如何计算偏移量以绘制到画布中应用了比例变换的最近像素?

自动布局 - 如何分配内容以按比例填充屏幕[重复]

我对提交 App Store 所需的所有屏幕截图以及如何获取它们感到困惑

如何打印(在屏幕上)带有外部 url 的 iframe 所需的所有 JS 代码

缩放 html 以根据屏幕分辨率按比例调整大小