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

在其他编程语言（如processing）中，有一个函数允许您将一个数字范围内的数字转换为另一个范围内的数字。我要做的是将鼠标的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();
    }

});

感谢您提供的帮助。

这是一个简单的数学问题

var screenWidth = $(window).width();
var mousePosition = e.pageX;
var max = 15;
var value = (mousePosition / screenWidth) * max;

注意，这可以返回一个十进制数；如果您不希望这样，可以对结果使用

Math.round

---

如果你的范围总是从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];

}

函数转换器范围（值、srcRange、dstRange）{
//值超出源范围返回
如果（值srcRange[1]）{
返回NaN；
}
var srcMax=srcsrange[1]-srcsrange[0]，
dstMax=dstRange[1]-dstRange[0]，
adjValue=value-srcRange[0]；
返回值（adjValue*dstMax/srcMax）+dstRange[0]；
}

像

convertToRange（20、[10,50]、[5,10]）一样使用

在您的情况下，将其用作
比例（screencoord，screensize，0,15）

您可能还希望获得客户端大小，而不是屏幕大小，因为屏幕大小指的是显示器的最大尺寸，并且并非所有用户都将其屏幕最大化。
假设您有6个变量：


minRange（示例中为0）
最大范围（示例中为15）
x
y
浏览器宽度
浏览器高度

要获得范围，请执行以下操作：

interval = maxRange - minRange;
rangeX = interval * x / browserWidth + minRange
rangeY = interval * y / browserHeight + minRange

对于OP要求的通用映射函数，请转到此处：

您可以将其实现为纯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
经常与迭代数组和对象相关联

编辑：，这样你以后就不必再查这个了。
我采纳了August Miller的想法，并对其进行了限制（值不能超出in_min和in_max的范围，如果超出范围，则分别返回out_min和out_max），并为那些希望脚本具有复制粘贴功能的人缩小了它：

函数映射（n，i，o，r，t）{返回i>o？i>n？（n-i）*（t-r）/（o-i）+r:r:o>i？o>n？（n-i）*（t-r）/（o-i）+r:t:void 0}

参数就像map（值，in_min，in_max，out_in，out_max）
这是一个简单的数学问题。
您有两个范围
range1=[a1，a2]
和
range2=[b1，b2]
，您希望将范围1中的值
s
映射到范围2中的值
t
。这就是公式。
t=b1+（s-a1）*（b2-b1）/（a2-a1）
在js中，它将是

var mapRange = function(from, to, s) {
  return to[0] + (s - from[0]) * (to[1] - to[0]) / (from[1] - from[0]);
};

var range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (var i = 0; i < range.length; i++) {
  range[i] = mapRange([0, 10], [-1, 0], range[i]);
}

console.log(range);

var-mapRange=函数（从，到，s）{
返回到[0]+（s-从[0]）*（到[1]-到[0]）/（从[1]-从[0]）；
};
风险值范围=[0,1,2,3,4,5,6,7,8,9,10]；
对于（变量i=0；i
浮动
应始终计算

功能量表(
srcNum:number，
src:[开始：编号，结束：编号]，
dst:[开始：编号，结束：编号]
)：号码{
返回（（srcNum-src[0]）*（dst[1]-dst[0]）/（src[1]-src[0]）+dst[0]；
}
刻度（1，[0,10]，[0,255]）；//25.5
比例（1.5、[0,10]、[0,255]）；//38.25
刻度（2、[0,10]、[0,255]）；//51

整数
，一种有效的方法是创建映射，因此不需要更多的计算。但这实际上取决于
src
范围的大小。对于大范围（…）

比例应该更有效

函数createScale(
src:[开始：编号，结束：编号]，
dst:[开始：编号，结束：编号]
)：记录{
常量映射：记录={}；
对于（设i=src[0]；我不理解这个问题，或者这只是一个三个规则？太好了！+1但是“if value<或>”应该返回最小值（dstRange[0]）或最大值（dstRange[1]）…这很好，但需要underline.js，这可能是OP的一个附加依赖项，因为他提到只使用jQuery。是的-很好。如果你向上滚动，有一个更广泛的向后兼容解决方案：min:
Number.prototype.map=function（a，b，c，d）{返回c+（d-c）*（（This-a）/（b-a））；
const-map=（num，in\u-min，in\u-min，out\u-min）=>（num-in\u-min）*（out\u-max-out\u-min）/（in\u-max-in\u-min）+out\u-min应该包含在ES6语法中。我喜欢这个，因为它不可读，但它似乎不尊重in\u-min。如果我映射（8,10,20,40,50）它会得到“38”。in\u-max仍然有效。无论如何使用它。谢谢。
var mapRange = function(from, to, s) {
  return to[0] + (s - from[0]) * (to[1] - to[0]) / (from[1] - from[0]);
};

var range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (var i = 0; i < range.length; i++) {
  range[i] = mapRange([0, 10], [-1, 0], range[i]);
}

console.log(range);