以不同的纵横比定位和调整图像大小，保持相对于屏幕的相同位置
Positioning and Resizing images in different aspect ratios keeping the same position relative to the screen
我面临的问题更多是逻辑和算法问题，而不是特定语言功能，我正在用 lua 编写它，但我相信它可以用其他语言复制，没有专业问题。
首先，我将向您展示一些我必须用来提出解决方案的属性和默认设置。
1.我有一个通用函数，在屏幕上显示一个图像，给定X，Y位置和W，H维度，为了方便理解，这个函数是drawImage(x, y, w, h)
2. 所有值和计算都将基于默认分辨率和纵横比，在本例中是开发人员的。这些变量将是这些：DEV_SCREEN_W = 1366、DEV_SCREE_H = 768、（纵横比为 16:9）
3.至此，我们已经有了一个在屏幕上显示图像的函数，以及X、Y位置和W、H尺寸的默认屏幕值将设置给定图像。
4. 现在，我们有 CLIENT，可以是任何人，任何分辨率和纵横比，此客户将 运行 他计算机上的代码。
5. 知道了这一点，我们需要做一个算法，让图像的位置和尺寸保持相对不变，不管用什么屏幕显示它。
了解了这些属性和定义，我们就可以继续解决这个问题了。假设我是一名开发人员，屏幕的值为 DEV_SCREEN_W = 1366、DEV_SCREE_H = 768 我想在 X = 352、Y = 243 和 W = 900 位置设置图像, H = 300.所以在开发者屏幕上，我会这样：
好的，现在我们再添加一张图片，位置和尺寸为X = 352、Y = 458、W = 193、H = 69
好吧，现在我们需要写一个算法，无论尺寸如何，在屏幕上保持相同的尺寸和位置，因为每个分辨率的W和H不同，我们不能用像素点来定义，我的解决方案是定义0和1之间的位置，所以这个位置代表屏幕的一定百分比，W和H也一样。
假设我从客户端获取屏幕信息并且我得到 CLIENT_SCREEN_W = 1280, CLIENT_SCREEN_H = 720.
由于纵横比相同，我可以将此概念应用于位置和尺寸，因为它与屏幕保持完美比例，所以我会：
根据两个图像的 DEV 屏幕获取百分比如下：
X = 352/DEV_SCREEN_W * CLIENT_SCREEN_W,
Y = 243/DEV_SCREEN_H * CLIENT_SCREEN_H,
W = 900/DEV_SCREEN_W * CLIENT_SCREEN_W,
H = 300/DEV_SCREEN_H * CLIENT_SCREEN_H,
基本上，对于那些不明白发生了什么的人，我从开发人员的屏幕 (X = 352/DEV_SCREEN_W) 那里得到了多少百分比的像素位置数据，即 (X = 352/1366 = 0.2576)并将此结果乘以客户端屏幕的W：0.2576 * CLIENT_SCREEN_W，即0.2576 * 1280 = 329。因此，我们得出结论，329和352在不同分辨率下是相对相同的位置。
遵循这个概念，无论客户端使用什么分辨率，图像在位置和尺寸上始终保持相同的比例，ONLY IF IT IS IN RATIO 16:9（与开发者相同)
这就是问题所在，将相同的概念应用于任何比例，在 4:3 屏幕上，两个图像都会被拉伸：
尽管相对于屏幕保持相同的 X 和 Y，但必须不按比例更改 W 和 H 以适合屏幕，从而获得如上所示的结果，这是不可能发生的。
为了避免这种情况，我设置了一个比例比率，我通过将客户端的屏幕除以开发人员的屏幕得到，从而得到一个代表另一个的比例，然后我将其乘以两个图像的 W 和 H，以便两者都按比例调整为原始尺寸，而不是任意乘以 0 - 1 之间的相对值。
获取比例如下：
PROPORTION_RATE = CLIENT_SCREEN_W/DEV_SCREEN_W
应用它：
W = 900*PROPORTION_RATE、H = 300*PROPORTION_RATE
基本上，宽高比的这种乘法使图像保持在屏幕调整大小的精确比例，但是，应用它，图像失去了它们的相对位置，如下图所示：
如您所见，尽管在 W 和 H 中保持相同的比例，但图像失去了与开发人员屏幕上定义的原始位置相关的结构组织。
这个问题我已经有一段时间了
我得到的最接近的结果是在 Y 轴和 X 轴上添加某个图像减少了多少，但是，如果我这样做，两个图像都将被校正，但它们之间的相对位置仍然不正确，如下图所示：
[]
这个逻辑和算法问题有点超出我的应用知识范围，我自己找不到解决方案，所以我真诚地寻求帮助，或者指导我可以解决的方法。
根据您的评论，您希望将两个轴缩放相同的量，并且您希望通过根据需要在 window 边缘添加空条纹来处理比率不匹配。
首先计算比例：scale = min(w2/w1, h2/h1)，其中 w1、h1 是源大小，w2、h2 是目标大小.
接下来，假设0,0在屏幕中央，你可以做x2 = x1*scale、y2 = y1*scale，其中x1、y1是源坐标和 x2,y2 是转换后的坐标。
但是如果 0,0 位于屏幕的一角（这更有可能），您必须执行以下操作：
offset_x = (w2 - w1 * scale) / 2
offset_y = (h2 - h1 * scale) / 2
然后：
x2 = x1 * scale + offset_x
y2 = y1 * scale + offset_y
我面临的问题更多是逻辑和算法问题，而不是特定语言功能，我正在用 lua 编写它，但我相信它可以用其他语言复制，没有专业问题。
首先，我将向您展示一些我必须用来提出解决方案的属性和默认设置。
1.我有一个通用函数，在屏幕上显示一个图像，给定X，Y位置和W，H维度，为了方便理解，这个函数是drawImage(x, y, w, h)
2. 所有值和计算都将基于默认分辨率和纵横比，在本例中是开发人员的。这些变量将是这些：DEV_SCREEN_W = 1366、DEV_SCREE_H = 768、（纵横比为 16:9）
3.至此，我们已经有了一个在屏幕上显示图像的函数，以及X、Y位置和W、H尺寸的默认屏幕值将设置给定图像。
4. 现在，我们有 CLIENT，可以是任何人，任何分辨率和纵横比，此客户将 运行 他计算机上的代码。
5. 知道了这一点，我们需要做一个算法，让图像的位置和尺寸保持相对不变，不管用什么屏幕显示它。
了解了这些属性和定义，我们就可以继续解决这个问题了。假设我是一名开发人员，屏幕的值为 DEV_SCREEN_W = 1366、DEV_SCREE_H = 768 我想在 X = 352、Y = 243 和 W = 900 位置设置图像, H = 300.所以在开发者屏幕上，我会这样：
好的，现在我们再添加一张图片，位置和尺寸为X = 352、Y = 458、W = 193、H = 69
好吧，现在我们需要写一个算法，无论尺寸如何，在屏幕上保持相同的尺寸和位置，因为每个分辨率的W和H不同，我们不能用像素点来定义，我的解决方案是定义0和1之间的位置，所以这个位置代表屏幕的一定百分比，W和H也一样。
假设我从客户端获取屏幕信息并且我得到 CLIENT_SCREEN_W = 1280, CLIENT_SCREEN_H = 720.
由于纵横比相同，我可以将此概念应用于位置和尺寸，因为它与屏幕保持完美比例，所以我会：
根据两个图像的 DEV 屏幕获取百分比如下：
X = 352/DEV_SCREEN_W * CLIENT_SCREEN_W,
Y = 243/DEV_SCREEN_H * CLIENT_SCREEN_H,
W = 900/DEV_SCREEN_W * CLIENT_SCREEN_W,
H = 300/DEV_SCREEN_H * CLIENT_SCREEN_H,
基本上，对于那些不明白发生了什么的人，我从开发人员的屏幕 (X = 352/DEV_SCREEN_W) 那里得到了多少百分比的像素位置数据，即 (X = 352/1366 = 0.2576)并将此结果乘以客户端屏幕的W：0.2576 * CLIENT_SCREEN_W，即0.2576 * 1280 = 329。因此，我们得出结论，329和352在不同分辨率下是相对相同的位置。
遵循这个概念，无论客户端使用什么分辨率，图像在位置和尺寸上始终保持相同的比例，ONLY IF IT IS IN RATIO 16:9（与开发者相同)
这就是问题所在，将相同的概念应用于任何比例，在 4:3 屏幕上，两个图像都会被拉伸：
尽管相对于屏幕保持相同的 X 和 Y，但必须不按比例更改 W 和 H 以适合屏幕，从而获得如上所示的结果，这是不可能发生的。
为了避免这种情况，我设置了一个比例比率，我通过将客户端的屏幕除以开发人员的屏幕得到，从而得到一个代表另一个的比例，然后我将其乘以两个图像的 W 和 H，以便两者都按比例调整为原始尺寸，而不是任意乘以 0 - 1 之间的相对值。
获取比例如下：
PROPORTION_RATE = CLIENT_SCREEN_W/DEV_SCREEN_W
应用它：
W = 900*PROPORTION_RATE、H = 300*PROPORTION_RATE
基本上，宽高比的这种乘法使图像保持在屏幕调整大小的精确比例，但是，应用它，图像失去了它们的相对位置，如下图所示：
如您所见，尽管在 W 和 H 中保持相同的比例，但图像失去了与开发人员屏幕上定义的原始位置相关的结构组织。
这个问题我已经有一段时间了
我得到的最接近的结果是在 Y 轴和 X 轴上添加某个图像减少了多少，但是，如果我这样做，两个图像都将被校正，但它们之间的相对位置仍然不正确，如下图所示：
[
这个逻辑和算法问题有点超出我的应用知识范围，我自己找不到解决方案，所以我真诚地寻求帮助，或者指导我可以解决的方法。
根据您的评论，您希望将两个轴缩放相同的量，并且您希望通过根据需要在 window 边缘添加空条纹来处理比率不匹配。
首先计算比例：scale = min(w2/w1, h2/h1)，其中 w1、h1 是源大小，w2、h2 是目标大小.
接下来，假设0,0在屏幕中央，你可以做x2 = x1*scale、y2 = y1*scale，其中x1、y1是源坐标和 x2,y2 是转换后的坐标。
但是如果 0,0 位于屏幕的一角（这更有可能），您必须执行以下操作：
offset_x = (w2 - w1 * scale) / 2
offset_y = (h2 - h1 * scale) / 2
然后：
x2 = x1 * scale + offset_x
y2 = y1 * scale + offset_y