Question

我有一个具有以下原始捕捉点的滑块：

[-100, -200, -300, -400, -500, -600]

我想转换滑动值以匹配以下捕捉点：

[0, 5, 10, 25, 50, 100]

应将[-100, -200)中的原始值映射到[0, 5)中的值
应将[-200, -300)中的原始值映射到[5, 10)中的值
应将[-300, -400)中的原始值映射到[10, 25)中的值

以此类推..

我该如何实现？

编辑：添加了我的尝试（尽管原始值不同）

// sliderValue is an integer obtained from the slider

const base = -70
const offset = -80

const limits = [
  base + offset * 0, // -70
  base + offset * 1, // -150
  base + offset * 2, // -230
  base + offset * 3, // -310
  base + offset * 4, // -390
  base + offset * 5, // -470
]

const points = [0, 5, 10, 25, 50, 100]

// I can't even begin to make sense of this
// don't know I came up with it, but it works ¯\_(ツ)_/¯
if (sliderValue <= limits[4]) {
  percentage = scaleValue(sliderValue, limits[4], limits[5], 50, 100)
} else if (sliderValue <= limits[3]) {
  percentage = scaleValue(sliderValue, limits[3], limits[4], 25, 50)
} else if (sliderValue <= limits[2]) {
  percentage = scaleValue(sliderValue, limits[2], limits[3], 10, 25)
} else if (sliderValue <= limits[1]) {
  percentage = scaleValue(sliderValue, limits[1], limits[2], 5, 10)
} else if (sliderValue <= limits[0]) {
  percentage = scaleValue(sliderValue, limits[0], limits[1], 0, 5)
}

console.log(percentage)

// ..

function scaleValue(num, in_min, in_max, out_min, out_max) {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

Answer 1

您可以通过查找该部分来使用某个功能。然后，基于四个值作为线性函数构建新值。

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}

function getValue(x) {
    var a = [-100, -200, -300, -400, -500, -600],
        b = [0, 5, 10, 25, 50, 100],
        i = a.findIndex((v, i, a) => v >= x && x >= a[i + 1]);

    return [x, (x -a[i])* (b[i + 1] - b[i]) / (a[i + 1] - a[i]) +b[i]].join(' ');
}

console.log([-100, -150, -200, -250, -300, -350, -400, -450, -500, -550, -600].map(getValue));

Answer 2

简单的线性方程：将100加除以20，然后取反。

更新：由于眼睛早觉模糊，我误解了问题。（对不起！）将线性关系相互映射的一般方法是弄清楚两组的偏移量和比例因子。

我在您给出的示例点之间找不到平滑的关系，因此我不确定如何找到一个可以整齐且连续地将点相互映射的方程。看来您的解决方案（您说的可行）可能是最好的：找出每个值映射到的范围并相应地缩放。

Answer 3

您可以映射值：

var mapping = {
  "-100": 0,
  "-200": 5,
  "-300": 10,
  "-400": 25,
  "-500": 50,
  "-600": 100
}

function map_values(array){
  return [mapping[array[0]], mapping[array[1]]];
}

var input = [-200,-300];

console.log(map_values(input));

将整数数组映射到整数数组

3 个答案: