如何在 javascript 中实现计算图像尺寸的方程式？

Question

计算图像尺寸（图像渲染器）和数学检查，但我真的坚持如何在代码中实际实现它...

方程组：

我。 2x + y = 1287（视口宽度）

二． 4/3x - 3/4y = 0

您将如何在代码中实现它？确实也很感谢为我指明正确的方向！

提前致谢，祝您愉快！

Answer 1

应该这样做：

let viewport = 1287;
let y = (8/17) * viewport;
let x = (viewport - y) / 2;

这会给你这些值：

viewport = 1287, 
x = 340.6764705882353, 
y = 605.6470588235294

Answer 2

您需要像对待计算器一样对待计算机。因为这就是它的字面意思，只是更花哨。

完全按照您使用计算器求解方程式的方式进行操作。不要用心算解方程。

使用计算器无法按原样求解方程式。因为那不是计算器的工作原理。相反，如果您使用计算器，则需要重新安排计算，以便您可以将数字输入计算器 - 再次强调，不要作弊和使用心算。

所以，第一个等式给出了我们可以用计算器计算的两个函数（在数学意义上）：

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
}

你提到：

one row of images would have 2 profile oriented images (and one landscape)

想必你想显示你的图片如下：

布局简单

 ┌─────┐ ┌─────┐
 │     │ │     │ ┌───────┐
 │     │ │     │ │       │
 │     │ │     │ └───────┘
 └─────┘ └─────┘
 ┌─────┐           ┌─────┐
 │     │ ┌───────┐ │     │
 │     │ │       │ │     │
 │     │ └───────┘ │     │
 └─────┘           └─────┘

或

 ┌─────┐ ┌─────┐ ┌───────┐
 │     │ │     │ │       │
 │     │ │     │ └───────┘
 │     │ │     │
 └─────┘ └─────┘
 ┌─────┐ ┌───────┐ ┌─────┐
 │     │ │       │ │     │
 │     │ └───────┘ │     │
 │     │           │     │
 └─────┘           └─────┘

对此的计算相当简单。如果您使用的是 1287 像素的 fixed-width 显示器，您甚至不需要计算机。你可以用笔和纸简单地解决这个问题，因为结果是不变的：

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

如何在 javascript 中实现计算图像尺寸的方程式？

How to implement equation for calculate image dimensions in javascript?

javascript

equation

algebra

布局简单

布局复杂