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

IT技术 javascript jquery
2021-03-09 12:49:46

在其他编程语言（例如处理）中，有一个函数可以将一个数字范围内的数字转换为不同范围内的数字。我想要做的是将鼠标的 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();
    }

});

感谢您的任何帮助，您可以提供。

6个回答

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

const map = (num, in_min, in_max, out_min, out_max) => (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min 应该包括在内以使用 ES6 语法。
2021-05-04 12:49:46
分钟： Number.prototype.map=function(a,b,c,d){return c+(d-c)*((this-a)/(b-a))};
2021-05-15 12:49:46

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

伟大的！+1 但“如果值 < OR >”应该返回最小值 (dstRange[0]) 或最大值 (dstRange[1])....
2021-05-08 12:49:46

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

http://rosettacode.org/wiki/Map_range#JavaScript

是的 - 好地方。如果向上滚动，则有一个更广泛的向后兼容解决方案： rosettacode.org/wiki/Map_range#JavaScript
2021-04-23 12:49:46
这很好，但需要 underscore.js，这可能是 OP 的附加依赖项，因为他提到仅使用 jQuery。
2021-05-02 12:49:46

这是简单的数学。

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

请注意，这可以返回一个十进制数；如果你不想那样，你可以Math.round在结果上使用。

活生生的例子

function proportion(value,max,minrange,maxrange) {
    return Math.round(((max-value)/(max))*(maxrange-minrange))+minrange;
}

在您的情况下，将其用作 proportion(screencoord,screensize,0,15)

您可能还想获得客户端尺寸，而不是屏幕尺寸，因为屏幕尺寸是指显示器的最大尺寸，并不是所有用户都会最大化他们的屏幕。

其它你可能感兴趣的问题
上一篇带有较长文本的 Chrome 语音合成 下一篇Ember.js 和 RequireJS