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 函数:

function scale (number, inMin, inMax, outMin, outMax) {
    return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}

使用该函数，如下所示:

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

我使用 scale 作为函数名称，因为 map 经常与数组和对象的迭代相关。