Javascript / jQuery - 将一系列数字映射到另一个数字范围 [英] Javascript / jQuery - map a range of numbers to another range of numbers

问题描述

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

In other programming languages such as processing, there is a function which allows you to convert a number that falls within a range of numbers into a number within a different range. What I want to do is convert the mouse's X coordinate into a range between, say, 0 and 15. So the browser's window dimensions, while different for every user, might be, say, 1394px wide, and the current X coordinate might be 563px, and I want to convert that to the range of 0 to 15.

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

I'm hoping to find a function of jquery and javascript that has this ability built in. I can figure out the math to do this by myself, but I'd rather do this in a more concise and dynamic way.

我已经在捕捉屏幕尺寸和使用此代码的鼠标尺寸：

I'm already capturing the screen dimensions and mouse dimensions with this code:

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();
    }

});

感谢您提供的任何帮助。

Thanks for any help you can provide.

推荐答案

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

You can implement this as a pure Javascript function:

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 经常与迭代数组和对象相关联。

I'm using scale for the function name, because map is frequently associated with iterating over arrays and objects.

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

Below is the original answer. I can no longer recommend modification of native prototypes.

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

If you'd like to have access to this in the Number class, you can add it as…

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_min 和<$之间，则此 和将生成超出范围的值c $ c> in_max 。

…wherein you specify in the "minimum" and "maximum" values of expected input and the "minimum" and "maximum" values to be output. This can and will produce out-of-range values if the incoming value itself is not between in_min and in_max.

像这样使用：

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

编辑： 我已将其作为Gist 提供，因此您将来不必查看此内容。

I've made this available as a Gist, so you don't have to look this up, in the future.

这篇关于Javascript / jQuery - 将一系列数字映射到另一个数字范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！