Вопрос по javascript, jquery – Javascript / jQuery - сопоставить диапазон чисел с другим диапазоном чисел

17

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

});

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

Я не понимаю вопроса или это просто правило трех? Jerome Cance

Ваш Ответ

8   ответов
3

о которой просил OP, перейдите сюда:

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

Да, хорошее место Если вы прокрутите вверх, есть более широко обратно совместимое решение:rosettacode.org/wiki/Map_range#JavaScript
Это хорошо, но требует underscore.js, который, вероятно, является дополнительной зависимостью для OP, потому что он упоминал об использовании только jQuery.
1

minRange (0 in your example) maxRange (15 in your example) x y browserWidth browserHeight

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

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

ожет выходить за пределы диапазона 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}

параметры подобны карте (значение, in_min, in_max, out_in, out_max)

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

proportion(screencoord,screensize,0,15)

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

6

то все, что вам нужно сделать, это

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, но & quot; если значение & lt; ИЛИ & gt; & Quot; должен вернуть минимальное значение (dstRange [0]) ИЛИ максимальное значение (dstRange [1]) ....
0

ну у вас есть два диапазонаrange1 = [a1,a2] а такжеrange2 = [b1,b2] и вы хотите отобразить значениеs в диапазоне от одного до значенияt в диапазоне двух. так что это формула. t = b1 + (s-a1)*(b2-b1)/(a2-a1) in js it will be.

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);
58

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 часто ассоциируется с переборами массивов и объектов.

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

Если вы хотите иметь доступ к этому в классе Number, вы можете добавить его как & # x2026;

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

& gt; x2026; где вы указываете в поле "минимум" и "максимум" значения ожидаемого ввода и «минимума» и "максимум" значения для вывода. этоcan а такжеwill производить значения вне диапазона, если само входящее значение не находится между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так что вам не придется искать это в будущем.

мин:Number.prototype.map=function(a,b,c,d){return c+(d-c)*((this-a)/(b-a))};
const map = (num, in_min, in_max, out_min, out_max) = & gt; (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min Должен быть включен для использования синтаксиса ES6.
0

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

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

Live example

Похожие вопросы