Javascript/jQuery - отображение диапазона чисел в другой диапазон чисел

В других языках программирования, таких как обработка, есть функция, которая позволяет вам преобразовать число, которое попадает в диапазон чисел, в число в другом диапазоне. То, что я хочу сделать, - это преобразовать координату мыши 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();
    }

});

Спасибо за любую помощь, которую вы можете предоставить.

Ответы

Ответ 1

Если вы хотите получить доступ к этому в классе 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;
}

... где вы указываете в "минимальном" и "максимальном" значениях ожидаемого ввода и "минимальном" и "максимальном" значениях, которые должны выводиться. Это может и будет выдавать значения вне диапазона, если входящее значение не находится между 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

Изменить: Я сделал это доступным как Gist, так что вам не нужно будет смотреть это в будущем.

Ответ 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]);

Ответ 4

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

В вашем случае используйте это как proportion(screencoord,screensize,0,15)

Вероятно, вы также захотите получить размер клиента, а не размер экрана, так как размер экрана относится к максимальным размерам монитора, и не все пользователи максимизируют их экран.

Ответ 5

Скажем, у вас есть 6 переменных:

  • minRange (0 в вашем примере)
  • maxRange (15 в вашем примере)
  • х
  • у
  • browserWidth
  • browserHeight

Чтобы иметь диапазон:

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

Ответ 6

Это простая математика.

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

Обратите внимание, что это может вернуть десятичное число; если вы этого не хотите, вы можете использовать Math.round для результата.

Живой пример

Ответ 7

Я вздумал идею Августа Миллера и добавил к ним ограничения (значение не может выходить за пределы диапазона in_min и in_max, и если он возвращает его out_min и out_max соответственно) и минимизировал его для тех, кто хочет использовать функцию вставки копии для их скриптов:

function map(n,i,o,r,t){return 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 (value, in_min, in_max, out_in, out_max)

Ответ 8

ну его простая математика. у вас есть два диапазона range1 = [a1,a2] и range2 = [b1,b2], и вы хотите сопоставить значение s в диапазоне один со значением 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);