Une fonction d'une valeur de curseur adapté pour le zoom

Question

J'utilise le jquery curseur pour zoomer ui. Il est censé zoomer de 25% à 500%, et environ la moitié de la gamme est utilisée pour la première% 100 de la taille.

Le curseur a des valeurs de 1 à 100. J'ai besoin une fonction qui peut être utilisé pour calculer le zoom en fonction de la valeur du curseur, par exemple.

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

Toutes les suggestions?

Answer 1

Je pense qu'il vaut mieux pour l'utilisateur si vous fournissez ajustement exponentiel.

Javascript Math.pow (a, b) qui calcule une ^b .

Le réglage est plus logique si vous associez plage [0100] à [25%, 400%], car alors 50 est à mi-chemin exact et peut être facilement carte trop 100%. 50 points sur le curseur correspondent alors à la division ou la multiplication par quatre, de sorte que vous pouvez définir

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

Alors vous obtenez la carte ci-dessous:

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%

Maintenant, je vois que cela ne répond pas à votre question complètement parce que votre échelle est [1100] au lieu de [0100], et que vous voulez atteindre 500% au lieu de 400%.

Pour y arriver, vous pouvez d'abord normaliser le curseur:

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

(cela correspond [1100] à [0100]), puis, si vous voulez, il faut multiplier positif valeurs de l'exposant par (log 5) / (log 4) afin que vos extrémités d'échelle à 500%, soit

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

Answer 2

Fondamentalement, vous voulez quelque chose rééchelonner 1-100 à 25-500.

100-1 = 99
500-25 = 475

qui est votre facteur d'échelle -. Chaque point de différence sur votre curseur est des points 475/99 de différence sur le zoom

Et le décalage fixe est à seulement 1 et 25, vous donnant une formule simple:

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

Bien sûr, si vous voulez généraliser, deux échelles de (a,b) à (c,d):

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

Maintenant, si vous voulez faire une sorte de chose moitié-moitié, vous pouvez simplement utiliser la formule ci-dessus pour diviser les portions que vous voulez, et appeler des fonctions différentes variables sur la valeur du curseur. Tant qu'ils sont continus (les valeurs sont les mêmes pour les cas à la frontière), il devrait se sentir bien.

Pour votre cas, essayez le mappage à 25% de 1 à 50,5 à 100%, 50,5 à 100 à 100% -500%.