Javascript / jQuery – 将一系列数字映射到另一个数字范围
在其他编程语言（如处理）中，有一个function允许您将数字范围内的数字转换为不同范围内的数字。 我想要做的是将鼠标的X坐标转换为介于0和15之间的范围。因此，浏览器的窗口尺寸虽然对于每个用户都不同，但可能是1394px宽，当前X坐标可能是563px ，我想将其转换为0到15的范围。
我希望找到一个内置此function的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(); } }); 感谢您的任何帮助，您可以提供。
您可以将其实现为纯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; }
使用这个function，如下所示：
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; }
…其中指定了预期输入的“最小”和“最大”值以及要输出的“最小”和“最大”值。 如果输入值本身不在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提供 ，因此您将来不必查看此内容。
如果您的范围始终从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]);一样使用convertToRange(20,[10,50],[5,10]);
对于通用映射function，这是OP要求的，请转到此处：
function proportion(value,max,minrange,maxrange) { return Math.round(((max-value)/(max))*(maxrange-minrange))+minrange; }
在你的情况下，使用它作为proportion(screencoord,screensize,0,15)
您还可能希望获得客户端大小，而不是屏幕大小，因为屏幕大小是指显示器的最大尺寸，并非所有用户都能最大化其屏幕。
假设你有6个变量：
- minRange（在你的例子中为0）
- maxRange（在你的例子中为15）
- X
- ÿ
- browserWidth
- browserHeight
要有范围：
interval = maxRange - minRange; rangeX = interval * x / browserWidth + minRange rangeY = interval * y / browserHeight + minRange
这是简单的数学。
var screenWidth = $(window).width(); var mousePosition = e.pageX; var max = 15; var value = (mousePosition / screenWidth) * max;
请注意，这可以返回十进制数; 如果你不想这样，你可以在结果上使用Math.round 。
实例
我采用了August Miller的想法并为它们增加了限制（值不能超出in_min和in_max的范围，如果它确实分别返回out_min和out_max）并将其缩小为那些想要为其脚本执行复制粘贴function的人：
function map(n,i,o,r,t){return i>o?i>n?(ni)*(tr)/(oi)+r:r:o>i?o>n?(ni)*(tr)/(oi)+r:t:void 0}
params就像map（value，in_min，in_max，out_in，out_max）
这是简单的数学。 你有两个范围range1 = [a1,a2]和range2 = [b1,b2]你想要将范围1中的值s映射到范围2中的值t 。 所以这就是公式。 在js中t = b1 + (s-a1)*(b2-b1)/(a2-a1) 。
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);