以不同的纵横比定位和调整图像大小，保持相对于屏幕的相同位置
我面临的问题更多的是逻辑和算法问题，而不是特定语言功能的问题，我用 lua 对其进行编码，但我相信它可以在其他语言中复制，不会出现重大问题。
首先，我将向您展示一些属性和默认设置，我必须使用它们来提出解决方案。
1.我有一个通用函数，在屏幕上显示图像，给定X、Y位置和W、H尺寸，为了方便理解，这个函数是drawImage(x, y, w, h)
2. 所有值和计算都将基于默认分辨率和宽高比，在本例中为开发人员的。这些变量将是：DEV_SCREEN_W = 1366、DEV_SCRE_H = 768、（长宽比为 16:9）
3. 到目前为止，我们有在屏幕上显示图像的函数，以及将设置给定图像的 X、Y 位置和 W、H 尺寸的默认屏幕值。
4.现在，我们有了客户端，它可以是任何人，具有任何分辨率和宽高比，该客户端将在他的设备上运行代码电脑。
5.知道了这一点，我们需要制定一种算法，以便无论使用什么屏幕来显示图像，图像的位置和尺寸都保持相对相同。
知道了这些属性和定义，我们就可以继续解决这个问题了。假设我作为一名开发人员，拥有一个值为 DEV_SCREEN_W = 1366、DEV_SCRE_H = 768 的屏幕，我想在位置 X = 352< /code>、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在不同分辨率下的位置相对相同。
遵循这个概念，无论客户使用什么分辨率，图像在位置和尺寸上始终保持相同的比例，只有比例为16：9（与开发人员相同）时
，这就是问题所在出现这种情况，将相同的概念应用于任何比例，在 4:3 的屏幕上，两个图像都会被拉伸：
<图像src="https://i.sstatic.net/NVpGS.png" alt="Scratch">
尽管相对于屏幕保持相同的 X 和 Y，但 W 和 H 必须不成比例地更改适应屏幕，获得上面看到的结果，这是不可能发生的。
为了避免这种情况，我设置了一个比例率，通过将客户端的屏幕除以开发人员的屏幕来获得该比例，从而得到一个代表另一个的比例，然后将其乘以两个图像的 W 和 H，以便将两个图像按比例调整为它们的原始尺寸，而不是任意乘以 0 - 1 之间的相对值。
获取比例就像： PROPORTION_RATE = CLIENT_SCREEN_W/DEV_SCREEN_W
应用它： W = 900*PROPORTION_RATE, H = 300*PROPORTION_RATE
基本上，这种纵横比的乘法使图像保持在屏幕调整大小的精确比例中，但是，应用这样，图像就会失去其相对位置，如下图所示：
正如您所看到的，尽管宽度和高度保持相同的比例，但图像在与开发人员屏幕上定义的原始位置的关系。
我已经遇到这个问题有一段时间了，
我得到的最接近的是在 Y 和 X 轴上添加某个图像减少了多少，但是，如果我这样做，两个图像都会被纠正，但它们仍然会超出它们之间的相对位置，如下图：
[
]
这个逻辑和算法的问题有点超出了仅凭我的应用知识，我找不到解决方案，所以我真诚地请求帮助，或者指导我可以解决它的方法。
the problem I'm facing is more a matter of logic and algorithm than a specific language functionalities, i'm coding it in lua, but i believe it could be replicated in other languages with no major problems.
First of all, I'm going to show you some properties and default settings that i'm having to use to come up with a solution.
1. I have a general function that displays an image on the screen, given the X, Y position and W, H dimension, to facilitate understanding, this function is drawImage(x, y, w, h)
2. All values and calculation will be based on a default resolution and aspect ratio, which in this case is the developer's. These variables will be these: DEV_SCREEN_W = 1366, DEV_SCREE_H = 768, (aspect ratio is 16:9)
3. So far, we have a function that displays an image on the screen, and default screen values to which the X, Y position and W, H dimensions of a given image will be set.
4. Now, we have the CLIENT, which can be anyone, with any resolution and aspect ratio, this client will run the code on his computer.
5. Knowing this, we need to make an algorithm, so that the positions and dimensions of the image stay relatively the same regardless of the screen being used to show it.
Knowing these properties and definitions we can proceed with the problem. Let's assume that me as a developer, having a screen whose values are DEV_SCREEN_W = 1366, DEV_SCREE_H = 768 i want to set an image at position X = 352, Y = 243 with W = 900, H = 300. So At the developer screen, i'll have this:
Okay, now let's add one more image, with position and dimension X = 352, Y = 458, W = 193, H = 69
Okay, now we need to write an algorithm that keeps the same dimension and position on the screen regardless of size, as W and H are different for each resolution, we can't use pixel points to define, my solution was to define the position between 0 and 1, so the position would represent a certain percentage of the screen, the same for the W and H.
Let's suppose i get the screen information from the client and I get CLIENT_SCREEN_W = 1280, CLIENT_SCREEN_H = 720.
Since it's the same aspect ratio, I could apply this concept to both position and dimension as it would remain perfectly proportional to the screen, so i would have:
Getting the percentage based on the DEV screen for BOTH images would be like:
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,
Basically, for those who didn't understand what is happening, i get the data of how many % position in pixels represents from the developer's screen (X = 352/DEV_SCREEN_W) that is (X = 352/1366 = 0.2576) and multiply this result by the W of the client screen: 0.2576 * CLIENT_SCREEN_W, that is 0.2576 * 1280 = 329. Thus, we concluded that 329 and 352 are relatively the same position in different resolutions.
Following this concept, no matter what resolution the client uses, the images are always in the same proportion, both in position and in dimension, ONLY IF IT IS IN RATIO 16:9 (the same as the developer)
And this is where the problem arises, applying this same concept to any ratio, on a 4:3 screen the both image would be stretched:
despite keeping the same X and Y relative to the screen, the W and H had to be altered out of proportion to fit the screen, obtaining the result seen above, which cannot happen.
To avoid this, i set a proportion rate, which i get by dividing the client's screen by the dev's, thus getting how much of one represents the other, and i multiply that by W and H of both images so that both are proportionately resized to their original dimension, instead of multiplying by a relative value between 0 - 1 arbitrarily.
Getting the proportion would be like:PROPORTION_RATE = CLIENT_SCREEN_W/DEV_SCREEN_W
Applying it:W = 900*PROPORTION_RATE, H = 300*PROPORTION_RATE
Basically, this multiplication for aspect ratio, makes the image stay in the exact proportion of the screen resizing it, however, applying this, the images lose their relative position, as seen in the image below:
As you can see, despite keeping the same proportion in W and H, the image lost its structural organization in relation to the original position defined on the developer's screen.
I've been in this problem for a while
The closest I got was to add on the Y and X axis how much a certain image has decreased, however, if i do that both images will be corrected, but they would still be out of relative position between them, as shown in the image below:
[]
This problem of logic and algorithm is a little beyond my applicable knowledge, alone I can't find a solution, so I sincerely ask for help, or direction to the way where I can solve it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
根据您的评论，您希望将两个轴缩放相同的量，并且希望通过根据需要在窗口边缘添加空条纹来处理比率不匹配。
首先计算比例：
scale = min(w2/w1, h2/h1)，其中w1、h1是源大小，并且w2,h2是目标尺寸。接下来，假设
0,0位于屏幕中心，您可以执行x2 = x1*scale,y2 = y1*scale，其中x1,y1是源坐标，x2,y2是转换后的坐标。但是，如果
0,0位于屏幕的一角（可能性更大），则必须执行以下操作：然后：
Based on your comments, you want to scale both axes by the same amount, and you want to handle ratio mismatch by adding empty stripes at window edges as needed.
First you compute the scale:
scale = min(w2/w1, h2/h1), wherew1,h1is the source size, andw2,h2is the target size.Next, assuming
0,0is in the center of the screen, you can just dox2 = x1*scale,y2 = y1*scale, wherex1,y1are source coordinates andx2,y2are converted coordinates.But if
0,0is in a corner of the screen for you (which is more probable), you have to do something like:Then: