计算左值和宽度值的公式（基于 0% 和 100% 值）

Question

如何找到基于百分比值并根据以下 0% 和 100% 值给出左值和宽度值的公式？

对于 0,00 百分比，左和宽度值将是：

• 宽度：658
• 左：11

对于 100,00 百分比，左和宽度值将是：

• 宽度：0（或 1）
• 左：670

我有一个渐变图像，其上我应用一种颜色来直观地表示百分比值。 渐变图像从 11 像素开始（左：11 表示 0,00%），宽度为 659（左：670 表示 100,00% = 659 + 11）

左和宽度值需要根据百分比，使颜色覆盖渐变。

如果百分比为 0%，则颜色将覆盖整个渐变（左：11，宽度：659）

------------------------------
|____________________________|
0                            100

如果百分比为 100%，则颜色根本不会覆盖渐变（左：670，即 659 + 11，宽度: 1 或 0)

                              -
|____________________________|
0                            100

Answer 1

您要查找的公式可以表示为 f(x) = ax+b。 f(x)是你想要得到的宽度，x是百分比，a & b 是（当前未知）常数。

如果您有两个点（例如 0 和 100）的 f(x) 值，您可以导出如下公式：

f(0) = valueAtZero = a*0 + b
b = valueAtZero
f(100) = valueAtOneHundred = a*100 + b
valueAtOneHundred - b = a*100
a = (valueAtOneHundred - b) / 100

现在您有了 a 和 b，您可以求解出您想要的任何百分比 x。上面的过程转换为伪代码如下：

function getValueAtXPercent(x, valueAtZero, valueAtOneHundred):
    b = valueAtZero
    a = (valueAtOneHundred - b) / 100
    return a*x + b

现在您可以调用 getValueAtXPercent(50, 658, 1)，它将返回 50% 的宽度值。

这是一个具体的实现，在Python中：

def f(x, valueAtZero, valueAtOneHundred):
    b = valueAtZero
    a = (valueAtOneHundred - b) / 100.0
    return a*x + b

def showStats(percent):
    left = f(percent, 11, 670)
    width = f(percent, 658, 0)
    output = "At {0}%, left={1} and width={2}".format(percent, left, width)
    print output

showStats(0)
showStats(50)
showStats(100)

输出：

At 0%, left=11.0 and width=658.0
At 50%, left=340.5 and width=329.0
At 100%, left=670.0 and width=0.0