Javascript 中的重映射或映射函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5649803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remap or Map function in Javascript
提问by Jonathon Toon
Of late, most of my programming experience has been in Processing, and more recently I have been wanting to branch out a little deeper in to some JavaScript, since they are slightly related.
最近，我的大部分编程经验都在Processing 中，最近我一直想更深入地研究一些 JavaScript，因为它们略有相关。
I was just wondering, as my recent searching has turned up nothing, if JavaScript had a similar function to Processing's "map" function, in which a value and it's range is taken and remapped to a new range?
我只是想知道，由于我最近的搜索没有发现任何结果，JavaScript 是否具有与 Processing 的“map”函数类似的功能，其中一个值及其范围被获取并重新映射到一个新范围？
More info here: http://processing.org/reference/map_.html
更多信息在这里：http: //processing.org/reference/map_.html
PS: Yes, I also know that www.processingjs.org exists, but I was just wondering if JS had such a function natively.
PS：是的，我也知道 www.processingjs.org 存在，但我只是想知道 JS 是否原生有这样的功能。
回答by Alnitak
The function below produces the same behaviour as the original Processing function:
下面的函数产生与原始处理函数相同的行为：
function map_range(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
回答by trembl
Here's an implementation of the Processing Math convenience methods in Javascript. It's a straight conversion of the original Processing Java source.
这是在 Javascript 中处理数学便利方法的实现。它是原始处理 Java 源代码的直接转换。
p5.sq()
p5.constrain()
p5.degrees()
p5.mag()
p5.dist()
p5.lerp()
p5.norm()
p5.map()
Get the code from here: https://github.com/trembl/p5.Math.js/
从这里获取代码：https: //github.com/trembl/p5.Math.js/
回答by Vitim.us
Reusable remap
可重用的重映射
If you want to remap more than one value to a defined range, you may want to use this version instead.
如果要将多个值重新映射到定义的范围，则可能需要改用此版本。
/**
* Create a function that maps a value to a range
* @param {Number} inMin Input range minimun value
* @param {Number} inMax Input range maximun value
* @param {Number} outMin Output range minimun value
* @param {Number} outMax Output range maximun value
* @return {function} A function that converts a value
*
* @author Victor N. wwww.victorborges.com
* @see https://gist.github.com/victornpb/51b0c17241ea483dee2c3a20d0f710eb/
*/
function createRemap(inMin, inMax, outMin, outMax) {
return function remaper(x) {
return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
};
}
Usage examples
使用示例
var f2c = createRemap(32,212, 0,100); //fahrenheit to celsius
var c2f = createRemap(0,100, 32,212); //celsius to fahrenheit
f2c(-459.67) //-273.15
c2f(-273.15) //-459.6699999999999
c2f(96) //204.8
f2c(96) //35.55555555555556
f2c(60) //15.555555555555555
f2c(90) //32.22222222222222
c2f(70) //158
c2f(-30) //-22
c2f(0) //32
f2c(32) //0
var p = createRemap(0,1, 0,100);
p(0) //0
p(0.33) //33
p(0.5) //50
p(0.99) //99
p(1) //100
p(1.5) //150
p(-0.1) //-10
var map8b10b = createRemap(0,255, 0,1023);
map8b10b(0) //0
map8b10b(32) //128.3764705882353
map8b10b(64) //256.7529411764706
map8b10b(128) //513.5058823529412
map8b10b(255) //1023
回答by Jacob Oscarson
Not natively. Javascript core is really minimal (See seefor details). Mathematical functions are limited to what you find in the Mathobject. So for such a function to be widely available, you need an implementation in Javascript itself.
不是原生的。Javascript 核心真的很小（请参阅有关详细信息）。数学函数仅限于您在Math对象中找到的内容。因此，要广泛使用这样的函数，您需要在 Javascript 本身中实现。
回答by Pointy
editUse @Alnitak's code; that version is correct.
编辑使用@Alnitak 的代码；那个版本是正确的。
No, it doesn't, but you could write one pretty easily:
不，它没有，但你可以很容易地写一个：
function adjust(value, r0, r1, r2, r3) {
var mag = Math.abs(value - r0), sgn = value < 0 ? -1 : 1;
return sgn * mag * (r3 - r2) / (r1 - r0);
}
I wouldn't call it "map", personally, because of the (well, my) association of "map" with a list processing mechanism.
我个人不会称它为“地图”，因为（好吧，我的）“地图”与列表处理机制的关联。
(Note that you might want to check for range reversal errors, I guess; I'm not familiar with the exact semantics of "map" from Processing.)
（请注意，我猜您可能想要检查范围反转错误；我不熟悉 Processing 中“地图”的确切语义。）
