透明度到不透明度的转换

Question

我的问题主要是数学问题，但这里有一些上下文：我有一个 HTML 范围输入（基本上是一个滑块），表示地图对象（开放图层）的透明度，百分比范围为 0-100。我在 javaScript 中的 onChange 函数应该将百分比值转换为不透明度，范围为 1-0。

这两个范围是间接成比例的，这意味着 0% 的透明度值应该导致 1 的不透明度值，而透明度值例如70% 应该导致 0.3 不透明度等。

透明度：[0...100]

不透明度：[1...0]

我正在编写 React 代码，所以不透明度来自组件状态。输入值使用不透明度计算透明度值，onChange 函数从透明度重新计算不透明度并设置组件状态。

为了给你一个想法，这里是一些伪代码：

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

我需要将范围值转换为另一个范围内的相应值的公式。我试图想出一个公式，但通常最终会被零除或导致不透明度大于 1。

最简单的解决方法是忘记透明度，只使用不透明度，但我的任务要求很严格，我认为这种类型的公式在其他情况下可能会有用。

周围有数学家可以给我提示吗？或者有人知道这些范围的公式吗？

非常感谢

Answer 1

公式为

opacity = 1 - (transparency/100)

您可以轻松验证它是否有效：

透明度=0 导致不透明度=1
透明度=100 导致不透明度=0
透明度=50 导致不透明度=0.5

透明度到不透明度的转换

Transparency to Opacity conversion

math

transparency

opacity

reactjs