Javascript 中的重映射或映射函数

Posted 2023-03-11

【中文标题】Javascript 中的重映射或映射函数

【英文标题】：Remap or Map function in Javascript

【发布时间】：2011-08-04 17:20:03

【问题描述】：

最近，我的大部分编程经验都在Processing，最近我一直想更深入地研究一些 javascript，因为它们有点相关。

我只是想知道，因为我最近的搜索没有任何结果，如果 JavaScript 具有与 Processing 的“map”函数类似的函数，其中一个值及其范围被获取并重新映射到一个新范围？

更多信息在这里：http://processing.org/reference/map_.html

PS：是的，我也知道 www.processingjs.org 存在，但我只是想知道 JS 是否原生有这样的功能。

【问题讨论】：

没有这样的原生函数。但是您可以轻松编写自己的代码。

为了将来参考，大多数处理函数的源代码都可以在这里找到：github.com/processing/processing/blob/master/core/src/…

【参考方案1】：

不是本地的。 Javascript 核心非常小（详情请参阅see）。数学函数仅限于您在 Math 对象中找到的内容。因此，要广泛使用这样的功能，您需要在 Javascript 本身中实现。

【参考方案2】：

edit 使用@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);

我个人不会称它为“地图”，因为（嗯，我的）“地图”与列表处理机制相关联。

（请注意，我猜您可能想检查范围反转错误；我不熟悉 Processing 中“map”的确切语义。）

【讨论】：

符号检测也不应该依赖于value - 该函数应该独立于所提供值的符号。

@Alnitak - 啊你是对的......我会让你的答案站起来并编辑我的。

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

【参考方案3】：

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

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

【讨论】：

非常感谢！这非常有用！欣赏它。

@jl 使您的编辑既没有用也没有必要。我已将它们还原。

【参考方案4】：

这是 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/

【参考方案5】：

可重复使用的重映射

如果您想将多个值重新映射到定义的范围，您可能需要改用此版本。

/**
 * 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://***.com/a/41350248/938822
 */
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