缩放两个数字范围

Question

我记得在某些时候使用方程来做到这一点 - 你如何在Javascript中做到这一点？

插件两个数字范围:

rangeX = 1 (through) 10;
rangeY = 300.77 (through) 559.22;

输入范围Y比例中的值:

inputY = 328.17;

转换为rangeX比例的比例值:

outputX = 1.43;

Answer 1

function convertRange( value, r1, r2 ) { 
    return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];
}

convertRange( 328.17, [ 300.77, 559.22 ], [ 1, 10 ] );

>>> 1.9541497388276272

Answer 2

使用百分比:

xMax = 10;
xMin = 1;

yMax = 559.22;
yMin = 300.77;

percent = (inputY - yMin) / (yMax - yMin);
outputX = percent * (xMax - xMin) + xMin;

Answer 3

我将 @Foggzie 的答案变成了 TypeScript 函数和 ES2016 函数。

打字稿：

const scale = (inputY: number, yRange: Array<number>, xRange: Array<number>): number => {
  const [xMin, xMax] = xRange;
  const [yMin, yMax] = yRange;

  const percent = (inputY - yMin) / (yMax - yMin);
  const outputX = percent * (xMax - xMin) + xMin;

  return outputX;
};

ES2016：

const scale = (inputY, yRange, xRange) => {
  const [xMin, xMax] = xRange;
  const [yMin, yMax] = yRange;

  const percent = (inputY - yMin) / (yMax - yMin);
  const outputX = percent * (xMax - xMin) + xMin;

  return outputX;
};

Answer 4

这是线性插值，与@oleq的答案相同，但明确使用最小和最大变量而不是范围数组

function getScaledValue(value, sourceRangeMin, sourceRangeMax, targetRangeMin, targetRangeMax) {
    var targetRange = targetRangeMax - targetRangeMin;
    var sourceRange = sourceRangeMax - sourceRangeMin;
    return (value - sourceRangeMin) * targetRange / sourceRange + targetRangeMin;
}