TA貢獻1825條經驗 獲得超4個贊
您需要像對待計算器一樣對待計算機。因為這就是它的字面意思，只是更花哨。
完全按照您使用計算器求解方程式的方式進行操作。不要使用心算來解方程。
使用計算器無法按原樣求解方程式。因為那不是計算器的工作原理。相反，如果您使用計算器，則需要重新安排計算，以便您可以將數字輸入計算器 - 再次強調，不要作弊和使用心算。
所以，第一個等式給了我們兩個可以用計算器計算的函數（在數學意義上）：
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
TA貢獻1802條經驗 獲得超10個贊
這應該這樣做：
let viewport = 1287;
let y = (8/17) * viewport;
let x = (viewport - y) / 2;
這會給你這些值：
viewport = 1287,
x = 340.6764705882353,
y = 605.6470588235294
舉報