在Javascript中的Remap或Map函数

Question

最近，我大部分的编程经验都是在Processing中，最近我想深入一些JavaScript，因为它们有点相关。

我只是想知道，因为我最近的搜索没有发现，是否JavaScript有类似于Processing的“map”函数，在该函数中，将一个值及其范围获取并重新映射到一个新范围？

更多信息请参见：http://processing.org/reference/map_.html

附注：是的，我也知道存在www.processingjs.org，但我只是想知道JS是否本身具有这样的功能。

- user553149

---

没有这样的原生函数。但是你可以很容易地编写自己的函数。 - Eldar Djafarov

为了以后参考，大多数Processing函数的源代码可以在这里找到：https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java - Eliot

可能与此无关：不同框架/语言中实现的一些参考资料：https://gist.github.com/nkint/077b6deccdf61351f016dee5b83a2021 - nkint

Answer 1

下面的函数与原始Processing函数产生相同的行为：

function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

- Alnitak

---

非常感谢！这非常有用！感激不尽。 - user553149

@jlmakes，你的修改既没有用处也不必要。我已经撤销了它们。 - Alnitak

Answer 2

这是Processing Math便捷方法在Javascript中的实现。它是原始Processing Java源代码的直接转换。

p5.sq()
p5.constrain()
p5.degrees()
p5.mag()
p5.dist()
p5.lerp()
p5.norm()
p5.map()

从这里获取代码：https://github.com/trembl/p5.Math.js/

- trembl

Answer 3

可重用的重新映射

如果您想将多个值重新映射到一个定义的范围内，您可能希望使用这个版本。

/**
 * 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 github.com/victornpb
 * @see https://dev59.com/D2035IYBdhLWcg3wC7qf#41350248
 */
function createRemap(inMin, inMax, outMin, outMax) {
    return function remaper(x) {
        return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
    };
}

使用示例

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

- Vitim.us

Answer 4

不是原生支持的。Javascript核心非常简洁（详见此处）。数学函数仅限于您在Math对象中找到的内容。因此，如果要广泛使用此类函数，则需要在Javascript本身中实现。

- Jacob Oscarson

Answer 5

编辑使用@Alnitak的代码，那个版本是正确的。

不，它并没有，但您可以很容易地编写一个：

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

我个人不会称之为“map”，因为我（或者说很多人）会把“map”和列表处理机制联系起来。

（请注意，你可能需要检查一下范围反转错误，我想；我对 Processing 中“map”的确切语义并不熟悉。）

- Pointy

---

同时，符号检测不应该依赖于“value” - 该函数应该独立于提供的值的符号。 - Alnitak

@Alnitak - 哦，你是对的...我会让你的回答保留并编辑我的回答。 - Pointy

感谢大家对此的帮助！干杯。 - user553149