Преобразование прозрачности в непрозрачность - PullRequest
0 голосов
/ 31 марта 2020

Мой вопрос в основном математический, но здесь некоторый контекст: у меня есть HTML диапазон ввода (в основном слайдер), представляющий прозрачность объекта карты (открытых слоев) с процентным диапазоном от 0 до 100. Моя функция onChange в javaScript должна преобразовывать процентное значение в непрозрачность, которая варьируется от 1 до 0.

Эти два диапазона являются косвенно пропорциональными, то есть значение прозрачности 0% должно приводить к значению непрозрачности 1, а значение прозрачности, например 70%, должно давать непрозрачность 0,3 и т. c.

Прозрачность: [0 ... 100]

Непрозрачность: [1 ... 0]

Я кодирую в реакции, поэтому непрозрачность происходит из состояния компонента. Входное значение использует прозрачность для вычисления значения прозрачности, функция onChange пересчитывает прозрачность из прозрачности и устанавливает состояние компонента.

Чтобы показать, что вы даете представление, вот некоторый псевдокод:

<input
        type="range"
        min="0"
        max="100"
        rows="1"
        value={opacity =complicatedConversion=> transparency}
        onChange={e => {
          this.setState({opacity: transparency =complicatedConversion=> opacity});
        }}
      />

Мне нужны формулы, которые преобразуют значения диапазона в соответствующее значение в другом диапазоне. Я пытался придумать формулу, но обычно получалось деление на ноль или получение непрозрачности больше 1.

Самое простое решение - просто забыть о прозрачности и просто использовать прозрачность, но мои требования к задаче строгие, и я думаю, что этот тип формулы может пригодиться в других ситуациях.

Есть ли какие-нибудь математические головы, которые могли бы дать мне подсказку? Или кто-нибудь знает формулу для таких диапазонов?

Большое спасибо

1 Ответ

1 голос
/ 31 марта 2020

Формула:

opacity = 1 - (transparency/100)

Вы можете легко убедиться, что она работает:

  • Прозрачность = 0 приводит к непрозрачности = 1
  • Прозрачность = 100 приводит к непрозрачность = 0
  • Прозрачность = 50 приводит к непрозрачности = 0,5
...