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

Javascript:在数字范围之间转换,保持正确的比率,javascript,math,range,Javascript,Math,Range,我有两组表示边界框的像素坐标: top left: x: 19757934 y: 25240264 bottom right: x: 19759195 y: 25240776 我需要将另一个点的坐标(位于不同的数字范围)转换为上述范围,保持原始比率(以找出该点在边界框内的位置) 假设有一个用户点击的框,它对其他地方的“结果”框做了一些操作,比如缩小的框 var from_coords = {x1:50,y1:80,x2:150,y2:180}; var to_coords = {x1:2

我有两组表示边界框的像素坐标:

top left: 
x: 19757934
y: 25240264

bottom right: 
x: 19759195
y: 25240776
我需要将另一个点的坐标(位于不同的数字范围)转换为上述范围,保持原始比率(以找出该点在边界框内的位置)


假设有一个用户点击的框,它对其他地方的“结果”框做了一些操作,比如缩小的框

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.

什么是“不同的数字范围”?我的意思是说数字比例…原始边界框坐标与点坐标在不同的数字比例上。我需要找出点在原始数字比例上的坐标。两个范围/比例之间的关系是什么?第一个边界框坐标是全平铺地图上的div边界像素坐标。点坐标与屏幕大小上的div(包含平铺贴图)相关。
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.