Deplacement en crollrect pour une loupe photo : une colle pour les matheux !

Question

salut je réalise une petite appli qui permet d'afficher une photo plein format dans un Rectangle mis en scrol rect et la faire defiler en fonction de la position de la souris sur une version reduite de celle ci.
Tout fonctionne parfaitement sauf que je n'arrive pas à formuler un calcul.

Pour l'instant ce que je fais c'est une simple mise à l'echelle de la photo survolée à la photo originale. 
soit
var ratio_aggrandissement:Number=taille_image_plein_format / taille_fenetre_survolee;

Bien sur la taille de mon rectangle est fixe et son format est sans rapport avec les photos présentées.
du coup j'aimerai modérer mon ration en fonction du format de l'image et de celui de mon Rectangle.

mais voilà là je sèche ! je sais pas comment calculer de chiffre modérateur et l'appliquer à mon ratio de départ ?
Je vois seulement que je vais devoir appliquer deux ratio séparés pour la hauteur et la largeur...

Merci de m'aider à garder un peu de cheveux sur la tête !

Steph

pegase31 · Answer

bonjour, c'est une simple règle de 3 ton truc :

ratio = taille de la petite image/taille de la grande image.

Rien de sorcier à ça.

Peg'

cs_ourso · Answer

ben non cher peg' !
J'aurais aimé que ce fusse si simple !
C'est cette bête regle de trois que j'applique justement déjà, et vu que le format de la photo et celui du rectangle ne sont pas les même il faut compenser avec un calcul qui prend en compte le format de l'image par rapport à celui de la fenêtre... et pour compliquer le tout que la le centre de la fenêtre loupe corresponde exactement au point donné par la souris... mais en fait ça c'est pas le plus dur !
J'imagine qui'il faudrait lui donner un calcul du genre :
Pour l'equivalent de la taille de la fenetre si le coté le plus grand de l'image faisait cette taille alors le plus petit coté aurait besoin d'un aggrandissement de tant pour remplir le reste de la fenetre...
Il faudrait que je puisse appliquer le resultat de ce calcul pour modérer chacun des ratio ... et ainsi que arrivé à chacun des bords de l'image cela corresponde bien à l'arrivée dans la loupe quelque soit son format à elle...
A suivre ?

Steph

pegase31 · Answer

le résultat est le même. Il suffit que tu puisses définir le rectangle visible dans ta fenêtre de miniature, et de cette taille tu détermines les coordonnées d'affichage dans ta "loupe"
C'est un double rapport.

Peg'

CortoHHasur · Answer

salut,

et un travail par unite de surface, non? genre pixel² ou meme ce que tu veux.. 

je dis surement une betise, remarque..

C.

cs_ourso · Answer

Je vois ce que tu veux dire mais  je voudrais conserver ces calculs à l'interieur de ma classe... et que celle dans laquelle elle s'imbrique n'ai aucun parametre de gestion de celle là. 
voilà en l'état les trois methodes qui alimentent le mouvement... c'est dans demasquer(even:MouseEvent) que je crée mon ratio qui pour l'instant est assez fantaisiste mais retranscrit un peu l'idée que je voudrais lui appliquer... ça marche pour x mais pour y c'est n'importe quoi !

      public function moving(even:MouseEvent):void

        {

            if (ratio_deplacement_x.valueOf()!=0)

            {

            var FinalX:Number = Number(even.localX * ratio_deplacement_x);

            var FinalY:Number = Number(even.localY * ratio_deplacement_y);


            if (!interpolation_x.isPlaying)

            {

                interpolation_x = new Tween(leurre_tween, Tweenables.X,
Exponential.easeOut, rectangle_scroll.x, FinalX, 20, false);

                interpolation_x.addEventListener(TweenEvent.MOTION_CHANGE, deplacement);

                interpolation_y = new Tween(leurre_tween, Tweenables.Y,
Exponential.easeOut,rectangle_scroll.y ,FinalY,20, false);

            }

            else

            {

                interpolation_x.continueTo(FinalX, 20);

                interpolation_y.continueTo(FinalY, 20);

            }

            }

        }

        

        public function demasquer(even:MouseEvent)

        {

            ratio_deplacement_x =(even.target.parent.width /(hauteur_imageFull-largeur_fenetre/2));

            ratio_deplacement_y =(even.target.parent.width /(largeur_imageFull-hauteur_fenetre/2));

            trace(" / ratio = "+ratio_deplacement_x+" /" +ratio_deplacement_y); 

            var apparition: Tween = new Tween(this, "alpha", Exponential.easeIn, 0, 1, 8);

        }

        

        public function masquer(even:MouseEvent)

        {

            var disparition: Tween = new Tween(this, "alpha", Exponential.easeIn, 1, 0, 8);

        }

Steph

cs_ourso · Answer

en fait la fonction demasquer devrait plutot ressembler à un truc comme ça :

        public function demasquer(even:MouseEvent)
        {
            var ratio_aggrandissement:Number;
            var compensation:Number;
            var largeur_image:Number = limiteur_x;
            var hauteur_image:Number = limiteur_y;

            if (largeur_image > hauteur_image)
            {
                ratio_aggrandissement =  even.target.parent.width / limiteur_x;
                var ratio_largeur = largeur_fenetre / largeur_image;
                compensation = ((hauteur_fenetre / hauteur_image) - ratio_largeur);
                ratio_deplacement_x =(even.target.parent.width /(largeur_image-largeur_fenetre));
                ratio_deplacement_y =(even.target.parent.width /(hauteur_image/compensation));
            }
            else
            {
                ratio_aggrandissement =  even.target.parent.width / limiteur_x;
                var ratio_hauteur = hauteur_fenetre / hauteur_image;
                compensation = ((largeur_fenetre / largeur_image) - ratio_largeur);
                ratio_deplacement_x =(even.target.parent.width /(limiteur_x-largeur_fenetre)*compensation);
                ratio_deplacement_y =(even.target.parent.width /(limiteur_y-hauteur_fenetre));
            }

            trace(" / ratio = "+ratio_deplacement_x+" /" +ratio_deplacement_y); 
            var apparition: Tween = new Tween(this, "alpha", Exponential.easeIn, 0, 1, 8);
        }

Steph

CortoHHasur · Answer

tu dis que ca fonctionne pour x mais pas y? parceque x est certainement ta plus grande mesure, et donc la transformation est moindre que sur y. 

a nouveau, je vais peut-etre dire une betise, mais tu as un scroll sur x et y? seul ton rectangle/clip qui affiche le zoom est fixe dans ses dimensions. rien ne t'empeche de faire "depasser" ton image agrandie, de chaque cote de ton rectangle d'affichage, et que les utilisateurs se servent du scroll ou de la souris pour deplacer ton agrandissement.

pour ton code, je suis deja pas bien lourd en AS2, mais en AS3 je debute tout juste..

cs_ourso · Answer

le principe de ma classe c'est de loader l'image hq d'une reférence  image et d'afficher un zoom losque l'on passe sur un aggrandissement intermediaire...
je cherche pas à avoir un fonctionnement type google map...
Déjà merci à toi et à peg' pour votre sollicitude ..

Steph

Deplacement en crollrect pour une loupe photo : une colle pour les matheux !

8 réponses

Votre réponse

Discussions similaires