javascript - Javascript: 数値範囲間の変換、正しい比率の維持

Question

境界ボックスを表すピクセル座標のセットが 2 つあります。

top left: 
x: 19757934
y: 25240264

bottom right: 
x: 19759195
y: 25240776

別の数値範囲にある別のポイントの座標を上記の範囲に変換し、元の比率を維持する必要があります (このポイントが境界ボックス内のどこにあるかを調べるため)。

x: 423
y: 142

Answer 1

ユーザーがクリックしたボックスがあるとします。これは、縮小されたボックスのように、別の場所の「結果」ボックスに対して何かを行います。

var from_coords = {x1:50,y1:80,x2:150,y2:180};
var to_coords = {x1:200,y1:230,x2:400,y2:430};
function translate(input_coords) { // input_coords = {x:123,y:123}
    return {
        x:to_coords.x1+(input_coords.x-from_coords.x1)*(to_coords.x2-to_coords.x1)/(from_coords.x2-from_coords.x1),
        y:to_coords.y1+(input_coords.y-from_coords.y1)*(to_coords.y2-to_coords.y1)/(from_coords.y2-from_coords.y1)
    };
}

console.log(translate({x:123,y:123}); // outputs {x:346,y:316}

Answer 2

OK、最初のバウンディング ボックスは 1261x512 で、幅/高さ = 2.462890 になります。

幅 W2 と高さ H1 のボックスを「異なる数値範囲」と呼んでいます。W2/H2 が 2.462890 に等しくない場合、幅または高さを再スケーリングする必要があるため、この演習全体は無意味です。

2 番目のボックスの左上が (0,0) でない場合は、すべてのポイントを (0,0) に移動し、計算後に元に戻します。(0,0) が左上隅であると想定しています。

したがって、必要なのは 1 つの次元の比率だけです。423/W2 を調べてから、1261 を掛けます。これにより X オフセットが得られ、これを 19757934 に加算します。

測定された比率を使用して、Y に対して 512 * 423/W2 を乗算し、25240264 を加算します。

Example: second box is 985x400. Ratio = 423/985 = 0.429.
0.429 * 1261 = 541; 541 + 19757934 = 19758475.
for Y: 0.429 * 512 = 219; 219 + 25240264 = 25240483.