如何在 javascript 中将 map 的值从一个范围转移到另一个范围？

Question

如何在 javascript 中将 map 的值从一个范围转移到另一个范围？

例如取从 0 到 256 的数字，这是颜色的范围。

我怎样才能将 map 调整到 0 到 7 的范围。

例如，如果我在 (0, 256) 范围内取一个像 125 这样的数字，则应该对应于 (0,7) 范围内的值 3 或 4。

这是我尝试过的。 但它没有按预期工作。

    const scale = (number, fromRange, toRange) => {
      return (
        ((number - fromRange[0]) * (toRange[1] - toRange[0])) /
          (fromRange[1] - fromRange[0]) +
        toRange[0]
      );
    };

// use it like console.log(scale(125, [0,256], [0,7])) which should return either 3 or 4 (could be math.ceil or math.floor)

所以我的主要想法是将 map 长度为 slider 到另一个值范围。

例如，如果 slider 的 clientWidth 为 300px（因此范围为 (0, 300)），那么我想要 map 这个长度的 Z10BF08F0BBD6689475BE65B4AE4AE489475BE65B4AE4AE489475BE65B4AE4AE41BD39Z 到0,512) 那样.... 因此，如果 slider 上的当前 position 为 150 像素（这是滑块的中间），那么它应该对应于 (0,13) 范围内的值 18 或 (0, 100) 范围内的 50或 256 in (0,512) 这样....

我希望这很清楚。

注意它不只是从 0 开始，它可以从任何数字开始并以任何数字结束（谈论范围）。 我希望你得到我。

Answer 1

我尝试运行你的代码，它给出了 output: 3.41796875。 我看到这正是您想要的结果（3 与 math.floor 或 4 与 math.ceil）。 那么你的问题是什么？

Answer 2

我们首先需要将范围“转换”为从 0 开始：

const range = max - min

我们还需要移动输入数字：

const shiftedNumber = number - inMin

然后你应该得到数字的“百分比”。 那么它的规模有多远：

const p = shiftedNumber / inRange;

然后将其乘以新范围的最大值以“拉伸”它：

const newValueOnRange = p * outRange;

然后你用最小值抵消它：

const newValue = newValueOnRange + outMin ;

所以最后：

 const scale = (number, [inMin, inMax], [outMin, outMax]) => { // if you need an integer value use Math.floor or Math.ceil here return (number - inMin) / (inMax - inMin) * (outMax - outMin) + outMin; } console.log(scale(128, [0, 256], [0, 8])); console.log(scale(64, [0, 256], [0, 8]));

Answer 3

要将 function 用作映射回调，您需要在范围上使用闭包并返回 function ，它具有值广告参数并返回新值。

为了简化问题，您需要计算斜率d并将其用作调整值的因子。

 const scale = (fromRange, toRange) => { const d = (toRange[1] - toRange[0]) / (fromRange[1] - fromRange[0]); return from => (from - fromRange[0]) * d + toRange[0]; }; // single value console.log(scale([0, 256], [0, 7])(125)); // map console.log([0, 128, 256].map(scale([0, 256], [0, 7])));

Answer 4

闭合区间是包含所有限制点的区间，因此在区间 [0, 300] 中，您有 301 个单位 (300 - 0 + 1)，而 150 不在区间的正中间（区间的中间是 150.5)。

在比例函数中：

• 首先我得到每个间隔的单位（计算间隔中的 integer 数字）。
• 然后我从区间中获取数字（参数）position 以及从区间中获取 position 的百分比。 如果从间隔不是从零开始，则数字 position 很重要。
• 继续我使用百分比来获取新区间中的数字 position（我使用 Math.round 对值进行四舍五入），然后返回 position 中的数字。

const scale = (number, fromInterval, toInterval) => {
         if(number >= fromInterval[0] && number <= fromInterval[1]) {
                let oldIntervalUnits = fromInterval[1] - fromInterval[0] + 1;
                let newIntervalUnits = toInterval[1] - toInterval[0] + 1;
    
                let oldNumberPosition = -fromInterval[0] + number + 1;
    
                let percentage = oldNumberPosition / oldIntervalUnits;
                
                let newNumberPosition = Math.round(percentage * newIntervalUnits);
       
                return toInterval[0] + newNumberPosition - 1;
        }
        
        return NaN;
};

let res1 = scale(3, [2, 4], [0, 5]);  //return 3   
let res2 = scale(150, [0, 300], [10, 20]); //return 15