适合缩放的滑块值的函数

发布于 2024-08-23 14:39:17 字数 298 浏览 9 评论 0原文

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

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

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

有什么建议吗？

原文

I'm using the jquery ui slider for zooming. It's supposed to zoom from 25% to %500, and about half of the range is used for the first %100 of the size.

The slider has values from 1 to 100. I need some function that can be used to calculate zooming based on the slider value, e.g.

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

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温柔女人霸气范 2024-08-30 14:39:17

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

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

如果将范围 [0,100] 映射到 [25%,400%]，则该设置更有意义，因为 50 位于精确的中点，并且可以轻松映射为 100%。滑块上的 50 个点对应于除或乘以 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);

I think it's better for the user if you provide exponential fitting.

Javascript has Math.pow(a,b) which calculates a^b.

The setting makes more sense if you map range [0,100] to [25%,400%], because then 50 is at the exact midpoint and can be made easily to map too 100%. 50 points on the slider then correspond to division or multiplication by four, so you can set

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

So then you get the mapping below:

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%

Now I see that this doesn't answer your question completely because your scale is [1,100] instead of [0,100], and you want to reach 500% instead of 400%.

To get there, you can first normalize the slider:

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

(this maps [1,100] to [0,100]), and then, if you want, multiply positive values of the exponent by (log 5)/(log 4) so that your scale ends at 500%, i.e.

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

回复收藏 0 原文

慕烟庭风 2024-08-30 14:39:17

基本上，您想要将某个值从 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%。

Basically you want to rescale something from 1-100 to 25-500.

100-1 = 99
500-25 = 475

so that's your scaling factor - every point of difference on your slider is 475/99 points of difference on the zoom.

And the fixed offset is just 1 and 25, giving you a simple formula of:

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

Of course, if you want to generalize, two scales from (a,b) to (c,d):

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

Now, if you want to do some kind of half-half thing, you can just use the above formula to divide the portions you want, and call different functions varying on the slider's value. As long as they are continuous (the values are the same for the border cases) it should feel fine.

For your case, try mapping 1-50.5 to 25%-100%, 50.5-100 to 100%-500%.

回复收藏 0 原文

~没有更多了~