javascript - 适合缩放的滑块值的函数

Question

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

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

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

有什么建议么？

Answer 1

我认为如果您提供指数拟合，对用户来说会更好。

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

如果您将范围 [0,100] 映射到 [25%,400%]，则该设置更有意义，因为 50 正好位于中点，并且可以很容易地映射到 100%。滑块上的 50 个点对应于除以 4 或乘以 4，因此您可以设置

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_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);

Answer 2

基本上，您想将某些东西从 1-100 重新调整为 25-500。

100-1 = 99
500-25 = 475

这就是您的比例因子 - 滑块上的每个差异点都是缩放上的差异475/99点。

固定偏移量只有 1 和 25，给你一个简单的公式：

f( slider_value ) =
    ( slider_value - 1 ) * ( 475 / 99 ) + 25

当然，如果你想概括，从(a,b)到两个尺度(c,d)：

 f( slider_value ) =
     ( slider_value - a ) * ( ( d - c ) / ( b - a ) ) + c

现在，如果你想做某种半对半的事情，你可以使用上面的公式来划分你想要的部分，并根据滑块的值调用不同的函数。只要它们是连续的（边界情况的值相同），它应该感觉很好。

对于您的情况，请尝试将 1-50.5 映射到 25%-100%，将 50.5-100 映射到 100%-500%。