问题描述
计算图像尺寸（图像渲染器），然后进行数学检查，但是我真的对如何在代码中实际实现实现感到困惑……
方程组：
I。 2x + y = 1287（视口宽度）
II。 4 / 3x-3 / 4y = 0
您将如何在代码中实现呢？的确也向我指出了正确的方向！
谢谢，祝你有美好的一天！
解决方法
您需要像对待计算器一样对待计算机。因为这就是字面上的意思，所以只会更加花哨。
精确执行使用计算器求解方程式的操作。不要使用心算来求解方程。
使用计算器无法原样求解方程。因为那不是计算器的工作方式。相反，如果您使用计算器，则需要重新排列计算，以便可以将数字输入到计算器中-再次不要作弊和使用心理算法。
因此，第一个方程式为我们提供了两个可以用计算器计算的函数（在数学上）：
1a: x = (1287 - y) / 2
1b: y = 1287 - 2x
现在，您可以根据天气情况将上面的方程式视为代码，具体取决于您输入的是x还是y：
function getX (y) {
return (1287 - y) / 2
}
function getY (x) {
return 1287 - (2 * x)
}
第二个方程式有点令人困惑。人像图片的宽高比为3：4，风景图片仅旋转。 这意味着风景图片的宽度与人像图片的宽度之比也只是4：3 （注意：在编写此答案时，我还没有意识到您的第二个方程式描述了我将在下面探索的另一种布局。.继续阅读以获取所需的函数。但是，我将在此处保留答案的这一部分，因为它说明了如何将数学方程式转换为函数。这给了我们：
2a: x = 3y/4
2b: y = 4x/3
再次给我们：
function getX (y) {
return y * 3 / 4
}
function getY (x) {
return x * 4 / 3
}
您提到：
一排图像将具有2个面向轮廓的图像（和一个横向图像）
大概您想要显示图像如下：
简单的布局
┌─────┐ ┌─────┐
│ │ │ │ ┌───────┐
│ │ │ │ │ │
│ │ │ │ └───────┘
└─────┘ └─────┘
┌─────┐ ┌─────┐
│ │ ┌───────┐ │ │
│ │ │ │ │ │
│ │ └───────┘ │ │
└─────┘ └─────┘
或
┌─────┐ ┌─────┐ ┌───────┐
│ │ │ │ │ │
│ │ │ │ └───────┘
│ │ │ │
└─────┘ └─────┘
┌─────┐ ┌───────┐ ┌─────┐
│ │ │ │ │ │
│ │ └───────┘ │ │
│ │ │ │
└─────┘ └─────┘
对此的计算非常简单。如果您使用的是1287像素的固定宽度显示器，则您甚至都不需要计算机。您可以用纸和笔简单地解决此问题，因为结果将是恒定的：
x = (1287 - y) / 2
和
y = 4x / 3
通过替换y来解决：
x = (1287 - (4x / 3)) / 2
2x = 1287 - (4x / 3)
6x = 3861 - 4x
6x + 4x = 3861
10x = 3861
x = 386.1
给我们：
y = 514.8
仔细检查514.8 + 386.1 + 386.1 = 1287。我们可以方便地将数字取整以获得漂亮的整数像素值：386 + 386 + 515 = 1287。
因此，您可以在代码中简单地编写：
const x = 386;
const y = 515;
但是，如果您希望宽度是可变的，则第一个方程式的固定值不会为1287。相反，您可以将其编写为：
x = (viewport_width - y) / 2
再次用y代替：
x = (viewport_width - (4x / 3)) / 2
2x = viewport_width - (4x / 3)
6x = (3 * viewport_width) - 4x
10x = viewport_width * 3
x = viewport_width * 3 / 10
为我们提供两个功能：
function portraitWidth (viewport_width) {
return viewport_width * 3 / 10;
}
function landscapeWidth (viewport_width) {
return portraitWidth(viewport_width) * 4 / 3; // y = 4x/3
}
当然，您可以轻松地重写上面的代码以给出舍入的整数值：
function portraitWidth (viewport_width) {
let x = viewport_width * 3 / 10;
return Math.round(x);
}
function landscapeWidth (viewport_width) {
let y = portraitWidth(viewport_width) * 4 / 3;
return Math.round(y);
}
事后看来，考虑到这些功能的简单性，我们可能应该在进行固定的1287像素计算之前首先导出它们。
复杂的布局
但是，如果您打算按以下方式显示图像，则会变得更加复杂：
┌─────┐ ┌─────┐ ┌────────────┐
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
└─────┘ └─────┘ └────────────┘
┌─────┐ ┌────────────┐ ┌─────┐
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
└─────┘ └────────────┘ └─────┘
这使得第2部分中的关系不那么直接。轮廓图片的高度与风景图片的高度相同。我们知道人像图片的宽高比是3/4。但这意味着风景和图片的宽度之间的关系并不像4：3那样简单。
相反，关系有点间接。人像图片的高度与风景图片的高度相同：
hx = hy
鉴于x:hx = 3:4和y:hy = 4:3我们得到：
x = 3 * hx / 4
和
hy = 3 * y / 4
用hx代替hy，因为它们相等：
x = 3 * (3y / 4) / 4
4x = 9y / 4
x = 9 * y / 16
或
y = 16 * x / 9
回到原来的布局方程：
x = (viewport_width - y) / 2
再次用y代替：
x = (viewport_width - (16x / 9)) / 2
2x = viewport_width - (16x / 9)
18x = (9 * viewport_width) - 16x
18x + 16x = viewport_width * 9
x = viewport_width * 9 / 34
这为我们提供了以下功能：
function portraitWidth (viewport_width) {
return viewport_width * 9 / 34;
}
function landscapeWidth (viewport_width) {
return portraitWidth(viewport_width) * 16 / 9;
}
通过插入1287进行双重检查，我们得到：
x = 340.68
y = 605.65
如果将它们四舍五入并加起来，将得到：606 + 341 + 341 = 1288。偏离一个像素，但足够接近UI工作。如果结果偏离一像素，则始终可以将横向宽度减小一像素。
请注意，当我写完完整的答案时，我还没有意识到上面的两个函数是第二个等式的实现。如果我们插入上面x和y的两个值，我们确实会满足您的第二个方程。感谢@audzzy指出您的第二个方程给出的y：x比率为16：9：
(4/3) * 340.68 - (3/4) * 605.65 ≈ 0
这应该做到：
let viewport = 1287;
let y = (8/17) * viewport;
let x = (viewport - y) / 2;
将为您提供以下值：
viewport = 1287,x = 340.6764705882353,y = 605.6470588235294