javascript - 适合缩放的 slider 值的函数

Question

我正在使用 jquery ui slider用于缩放。它应该从 25% 缩放到 %500，大约一半的范围用于前 %100 的大小。

slider 的值从 1 到 100。我需要一些可用于根据 slider 值计算缩放的函数，例如

function getZoom(sliderVal) {
    //return number from 25 to 500
}

有什么建议吗？

Answer 1

我认为如果你提供指数拟合对用户更好。

Javascript 有 Math.pow(a,b) 计算 a^b。

如果将范围 [0,100] 映射到 [25%,400%]，该设置会更有意义，因为 50 正好位于中点，并且可以很容易地映射到 100%。 slider 上的50个点然后对应除以或乘以四，所以你可以设置

scaling = Math.pow(2,(slider - 50) / 25);

然后你得到下面的映射:

slider     scaling
------------------
     0     2**-2 = 1/4 =  25%
    25     2**-1 = 1/2 =  50%
    50     2**0  = 1   = 100%
    75     2**1  = 2   = 200%
   100     2**2  = 4   = 400%

现在我发现这并不能完全回答您的问题，因为您的比例是 [1,100] 而不是 [0,100]，并且您希望达到 500% 而不是 400%。

为此，您可以先规范化 slider :

slider_n = (slider - 1) * (100/99);

(这会将 [1,100] 映射到 [0,100])，然后，如果需要，将指数的正值乘以 (log 5)/(log 4)，这样您的比例就结束了500%，即

exp = (slider_n - 50) / 25.0;
if (exp > 0) exp = exp * Math.log(5)/Math.log(4);
scaling = Math.pow(2,exp);