首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript / jQuery -将一个数字范围映射到另一个数字范围

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

Stack Overflow用户
提问于 2012-05-25 22:34:17
回答 6查看 47.3K关注 0票数 42

在其他编程语言中,例如processing,有一个函数允许您将落在数字范围内的数字转换为不同范围内的数字。我想要做的是将鼠标的X坐标转换成一个介于0和15之间的范围。所以浏览器的窗口尺寸,虽然对每个用户来说是不同的,但可能是1394px宽,而当前的X坐标可能是563px,我想把它转换成0到15的范围。

我希望找到一个jquery和javascript的函数,它内置了这个功能。我可以自己算出做这件事的数学方法,但我更愿意用一种更简洁、更动态的方式来做这件事。

我已经用下面的代码捕获了屏幕尺寸和鼠标尺寸:

代码语言: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();
    }

});

感谢您能提供的任何帮助。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-04-22 01:43:35

您可以将其实现为纯Javascript函数:

代码语言:javascript
复制
function scale (number, inMin, inMax, outMin, outMax) {
    return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}

使用函数,如下所示:

代码语言:javascript
复制
const num = 5;
console.log(scale(num, 0, 10, -50, 50)); // 0
console.log(scale(num, -20, 0, -100, 100)); // 150

我使用scale作为函数名,因为map经常与迭代数组和对象相关。

票数 125
EN

Stack Overflow用户

发布于 2013-11-06 17:29:47

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

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

票数 4
EN

Stack Overflow用户

发布于 2012-05-25 22:42:18

代码语言:javascript
复制
function proportion(value,max,minrange,maxrange) {
    return Math.round(((max-value)/(max))*(maxrange-minrange))+minrange;
}

在您的示例中,将此代码用作proportion(screencoord,screensize,0,15)

您可能还想要获取客户端大小,而不是屏幕大小,因为屏幕大小指的是显示器的最大尺寸,而不是所有用户都将屏幕最大化。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10756313

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档