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

您需要像对待计算器一样对待计算机。因为这就是它的字面意思，只是更花哨。完全按照您使用计算器求解方程式的方式进行操作。不要使用心算来解方程。使用计算器无法按原样求解方程式。因为那不是计算器的工作原理。相反，如果您使用计算器，则需要重新安排计算，以便您可以将数字输入计算器 - 再次强调，不要作弊和使用心算。所以，第一个等式给了我们两个可以用计算器计算的函数（在数学意义上）：1a: x = (1287 - y) / 21b: 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/42b: 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)) / 22x = 1287 - (4x / 3)6x = 3861 - 4x6x + 4x = 386110x = 3861x = 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)) / 22x = viewport_width - (4x / 3)6x = (3 * viewport_width) - 4x10x = viewport_width * 3x = 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) / 44x = 9y / 4x = 9 * y / 16或者y = 16 * x / 9回到最初的布局方程式：x = (viewport_width - y) / 2同样，替换为y给我们：x = (viewport_width - (16x / 9)) / 22x = viewport_width - (16x / 9)18x = (9 * viewport_width) - 16x18x + 16x = viewport_width * 9x = 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.68y = 605.65如果将它们四舍五入并相加，您会得到：606 + 341 + 341 = 1288. 偏离一个像素但足够接近 UI 工作。如果结果偏离一个像素，您始终可以将景观的宽度减少一个像素。请注意，当我写完我的完整答案时，我没有意识到上面的两个函数是你的第二个等式的实现。如果我们插入上面 x 和 y 的两个值，我们确实会满足您的第二个等式。感谢@audzzy 指出你的第二个等式给出 y:x 比率为 16:9：(4/3) * 340.68 - (3/4) * 605.65 ≈ 0

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

2回答