Javascript/jQuery - 将一系列数字映射到另一个数字范围

Question

在其他编程语言(如处理)中,有一个功能允许您将数字范围内的数字转换为不同范围内的数字.我想要做的是将鼠标的X坐标转换为介于0和15之间的范围.因此,浏览器的窗口尺寸虽然对每个用户都不同,但可能是1394px宽,当前X坐标可能是563px ,我想将其转换为0到15的范围.

我希望找到一个内置此功能的jquery和javascript函数.我可以自己弄清楚数学运算,但我宁愿以更简洁和动态的方式做到这一点.

我已经使用以下代码捕获屏幕尺寸和鼠标尺寸:

var $window = $(window);
var $document = $(document);


$document.ready(function() {
    var mouseX, mouseY; //capture current mouse coordinates
    var screenW, screenH; //capture the current width and height of the window
    var maxMove = 10;
    windowSize();

    $document.mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;

    });

    $window.resize(function() {
        windowSize();
    });

    function windowSize(){
        screenW = $window.width();
        screenH = $window.height();
    }

});

感谢您的任何帮助,您可以提供.

Answer 1

您可以将其实现为纯Javascript函数:

const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

使用该功能,如下所示:

const num = 5;
console.log(scale(num, 0, 10, -50, 50)); // 0
console.log(scale(num, -20, 0, -100, 100)); // 150

我正在使用scale函数名,因为map它经常与迭代数组和对象相关联.

以下是原始答案.我不能再推荐修改原生原型了.

如果您想在Number类中访问它,可以将其添加为...

Number.prototype.map = function (in_min, in_max, out_min, out_max) {
  return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

...其中指定了预期输入的"最小"和"最大"值以及要输出的"最小"和"最大"值.如果传入值本身不在和之间,则这可以并且将产生超出范围的值.in_minin_max

像这样使用它:

var num = 5;
console.log(num.map(0, 10, -50, 50)); // 0
console.log(num.map(-20, 0, -100, 100)); // 150

编辑:我已将其作为Gist提供,因此您将来不必查看此内容.

Answer 2

如果您的范围始终从0开始,那么您所要做的就是

mouseValue * range.max / screen.max

任何范围到任意范围的转换都需要更多参与

function convertToRange(value, srcRange, dstRange){
  // value is outside source range return
  if (value < srcRange[0] || value > srcRange[1]){
    return NaN; 
  }

  var srcMax = srcRange[1] - srcRange[0],
      dstMax = dstRange[1] - dstRange[0],
      adjValue = value - srcRange[0];

  return (adjValue * dstMax / srcMax) + dstRange[0];

}

用得像 convertToRange(20,[10,50],[5,10]);