Javascript:在数字范围之间转换，保持正确的比例

Javascript: Converting between number ranges, keeping the correct ratio

本文关键字：数字 范围 转换 之间 Javascript      更新时间：2023-09-26

我有两组像素坐标来表示一个边界框：

top left: 
x: 19757934
y: 25240264
bottom right: 
x: 19759195
y: 25240776

我需要将另一个点的坐标（位于不同的数字范围内）转换为上述范围，保持原始比率（以找出该点在边界框中的位置）。

x: 423
y: 142

假设有一个用户单击的框，该框对其他地方的"结果"框执行某些操作，例如缩小的框。

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}

好的，第一个边界框是 1261x512，使宽度/高度 = 2.462890

我将"不同的数字范围"称为宽度为 W2 且高度为 H1 的框。如果 W2/H2 不等于 2.462890，则整个练习毫无意义，因为您需要重新缩放宽度或高度。

如果第二个框的左上角不是 （0，0），请将所有点移动到 （0，0），然后在执行计算后移回。我假设 （0，0） 是左上角。

所以，你只需要一个维度上的比率。找出 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.
相关文章：