Настройка трех переменных с помощью ползунка HTML5 CANVAS JS

Question

У меня есть ползунок, который должен настроить 3 переменных.Минимальное значение ползунка равно 0, максимальное значение равно 100.

Какова математическая основа для соответствующей корректировки переменных при перемещении ползунка?

См. Изображения ...

Любыепомощь оценена !!

Answer 1

Я не знаю о холстах, но если вы спросите только о простой математике:

Если значение ползунков X:

A = 25 + макс. (50 - X, 0) / 2

B = 50 - абс (50 - X) / 2

C = 25 + max (X - 50, 0) / 2

В javascript есть Math.max () и Math.abs (), поэтому метод для вычисления этого:

function calculate(slidervalue) {
    var res = [];
    res['a'] = 25 + Math.max(50 - slidervalue, 0) / 2;
    res['b'] = 50 - Math.abs(50 - slidervalue) / 2;
    res['c'] = 25 + Math.max(slidervalue - 50, 0) /2;
    return res;
}

Конечно, вы можете сделать объект для результата или сделать с ним что угодно, это просто пример кода.

Answer 2

Дайте мне посмотреть, правильно ли я понимаю ваши требования по вашим чертежам.

• Когда ползунок находится точно на min: A = 50, B = 25, C = 25
• Когда ползунок находится точно на max: A = 25, B = 25, C = 50
• Когда ползунок точно на 50%: A = 25, B = 50, C = 25
• Когда ползунок находится где-то между min и 50%, A и B должны быть между 25 и 50 в зависимости от расстояния от значения ползунка до min и 50% соответственно
• Когда ползунок находится где-то между max и 50%, B и C должны быть между 25 и 50 в зависимости от расстояния от значения ползунка до max и 50% соответственно

Попробуйте это:

// Assuming the variable value is already set
var a = 25, b = 25, c = 25;
if (value < 50) {
    a = 25 + (50 - value) / 2;
    b = 25 + (value) / 2;
}
else {
    b = 25 + (100 - value) / 2;
    c = 25 + (value - 50) / 2;
}

Checkpoints:

// value = 0:
a = 25 + (50 - 0) / 2; // 25 + 50 / 2 = 25 + 25 = 50
b = 25 + (0) / 2; // 25 + 0 = 25
c = 25;

// value = 50:
b = 25 + (100 - 50) / 2; // 25 + 50 / 2 = 25 + 25 = 50
c = 25 + (50 - 50) / 2; // 25 + 0 = 25
a = 25;

// value = 100:
b = 25 + (100 - 100) / 2; // 25 + 0 / 2 = 25
c = 25 + (100 - 50) / 2; // 25 + 50 / 2 = 25 + 25 = 50
a = 25;

// value = 75:
b = 25 + (100 - 75) / 2; // 25 + 25 / 2 = 25 + 12.5 = 37.5
c = 25 + (75 - 100) / 2; // 25 + 25 / 2 = 25 + 12.5 = 37.5