Question

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

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

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

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

...其中您在＆＃34;最小值＆＃34;中指定和＆＃34;最大＆＃34;预期输入值和最小值＆＃34;和＆＃34;最大＆＃34;要输出的值。如果传入值本身不在in_min和in_max之间，则此可以和将生成超出范围的值。

像这样使用：

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

修改： I've made this available as a 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]);

一样使用

Answer 3

对于通用映射功能，这是OP要求的，请转到此处：

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

Answer 4

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

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

您也可能希望获得客户端尺寸，而不是屏幕尺寸，因为屏幕尺寸指的是显示器的最大尺寸，并非所有用户都能最大化其屏幕。

Answer 5

假设您有6个变量：

minRange（在您的示例中为0）
maxRange（在您的示例中为15）
X
ý
browserWidth
browserHeight

拥有范围：

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

Answer 6

Floats 应始终计算。

function scale(
    srcNum: number,
    src: [start: number, end: number],
    dst: [start: number, end: number]
): number {
    return ((srcNum - src[0]) * (dst[1] - dst[0])) / (src[1] - src[0]) + dst[0];
}

scale(1, [0, 10], [0, 255]);   // 25.5
scale(1.5, [0, 10], [0, 255]); // 38.25
scale(2, [0, 10], [0, 255]);   // 51

Integers，一个有效的方法是创建一个映射，所以不需要更多的计算。但这实际上取决于 src 范围的大小。对于大范围，scale(...) 应该更有效。

function createScale(
    src: [start: number, end: number],
    dst: [start: number, end: number]
): Record<number, number> {
    const map: Record<number, number> = {};
    for (let i = src[0]; i <= src[1]; i++) {
        map[i] = ((i - src[0]) * (dst[1] - dst[0])) / (src[1] - src[0]) + dst[0];
    }
    return map;
}

createScale([0, 10], [0, 255]);
// {
//     "1": 25.5,
//     "2": 51,
//     "3": 76.5,
//     "4": 102,
//     "5": 127.5,
//     "6": 153,
//     "7": 178.5,
//     "8": 204,
//     "9": 229.5,
//     "10": 255
// }

Answer 7

这是一个简单的数学。

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

请注意，这可以返回十进制数;如果您不想这样，可以在结果上使用Math.round。

Live example

Answer 8

我采用了August Miller的想法并为它们增加了限制（值不能超出in_min和in_max的范围，如果确实如此，则分别返回out_min和out_max）并将其缩小为那些想要复制粘贴功能的人他们的剧本：

params就像map（value，in_min，in_max，out_in，out_max）

Answer 9

它的简单数学。您有两个范围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);

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

9 个答案: