Pourquoi ma fonction de zoom sur un clip tend vers son centre ?

[nicolas2603]

Bonjour, j'ai une question qui me parait super complexe à expliquer, je vais essayer d'être le plus clair possible. Sur ma scène de 200*200 j'ai un clip de 100*100 centré à 100*100, j'ai une molette (genre volume) qui me permet de faire varier la taille du clip dynamiquement. Je drag ma molette à 50%, mon clip grandit à 500*500, toujours centré à 100*100. Jusque là, logique. J'ai également une fonction de drag sur le clip. Si je le drag à ce moment là, il n'est plus centré à 100*100, et si je continue à augmenter sa taille, il va s'agrandir, mais en se déplaçant vers un point X que je n'arrive pas à déterminer. Comment faire pour qu'il s'agrandisse mais en gardant les coordonnées du clip qui correspondent à ce moment là à x=100 et y=100 au centre de la scène ? vous avez compris ? Merci merci

[beekeep]

Lut,

au moment ou tu fait varier la taille de ton clip,
repositionne le au milieu.

Code :

1
2
clip._x = 100 - (clip._width/2);
clip._y = 100 - (clip._height/2);

[nicolas2603]

oui mais justement je veux pas qu'il reste centré, genre si je le drag de x=100 quand il fait 500*500, son centre se trouve à 200*100. Et là si je l'agrandit je ne veux pas que son centre reste à 200*100, je veux que ça reste centré sur le point du clip qui correspond à 100*100 de la scène, donc au zoom de 50 à 100%, son centre doit se déplacer vers la droite, tu vois ce que je veux dire ?

[beekeep]

re,

franchement j'ai pas trop compris.

soit tu veux le laisser centré, apparemment non, alors tu voudrai qu'il reste aligné sur un ou deux des cotés, c'est ça ?

[nicolas2603]

Salut ! Bon aprés une longue réflexion d'un week end, la solution est de passer par de la trigo, j'y suis forcé, mais j'ai passé 8h dessus sans succès, je n'arrive pas à trouver le rapport qui va bien ... Je vais prendre un exemple concret :

maScene : 200px 200px donc centre 100*100
monClip : 100px 100px centré en 100*100
(sur le clip 3 repères R1 à 50*100, R2 à 100*100 et R3 à 150*100)

1- avec ma fonction j'agrandit le clip à 200px 200px, il reste naturellement centré à 100*100
2- ensuite je drag le clip à 150*100 sur la scène, donc le repère R1 se trouve centré sur la scène
3- je réagrandit mon clip à 300px 300px, il va resté centré sur 150*100 et donc le repère R1 avec être décalé du centre de la scène
4- l'objectif est qu'au moment de ce zoom, R1 reste à 100*100, donc il faut que mon centre du clip change dynamiquement, et cela en fonction de la taille du clip
5- je pense qu'il faut donc qu'au moment où je relache la souris aprés le drag je calcule la différence qui sépare mon centre du clip du centre de la scène. Il s'agit donc d'un coefficient utilisant le centre du clip, la taille du clip, et les coordonnées fixes 100*100

Et c'est là que je bug ...

C'est super relou !!

[beekeep]

re,

donc si j'ai bien compri le but est simplement de garder le repere R1{50,100} centré à {100,100} lors du zoom.

ce qui revient (vu que ton clip fait 100*100) à centrer ton clip horizontalement et à aligner le bas du clip au centre de la scene.
c'est bien ça ?

sinon je crois que tu devrai mieux definir le besoin avant de te demander comment faire.

+

[nicolas2603]

non c'est pas ça ! mais je viens de réussir une formule qui apparemment a l'air de bien fonctionner. Mais comme ça m'ennuie que je n'arrive pas à me faire comprendre, je tente une dernière fois avec un exemple appliqué.

Au centre de ma scene qui fait 200px 200px j'ai un repère fixe (une croix) centré à 100*100. Imagine sur ma scène une carte de la france de 100px 100px centrée sur la croix (le centre de la carte correspond grosso modo à BOURGES). Imagine que je la zoom *4 -> elle devient 400px 400px toujours centrée sur la croix (à 100*100), donc toujours BOURGES sur la croix. Maintenant je la drag pour que TOULOUSE soit sur la croix en 100*100. Le centre de la carte va devenir x? y?. A ce moment là, si je continue à zoomer, genre *8, la carte deviens 800px 800px mais centrée sur x? y? et donc TOULOUSE ne se trouve plus sur la croix.

Mon objectif était de trouver la relation qui permettait de décaler dynamiquement le centre x? y? de la carte en fonction du zoom pour que TOULOUSE reste sur la croix, ce qui revient à simuler que le nouveau centre de la carte se trouve aux coordonnées de TOULOUSE !!

ça te parait plus clair comme ça ?

[beekeep]

ah, de suite c'est plus clair, c'est pas si compliqué finalement ;)

pour savoir,
es-ce que ta fonction qui effectue le zoom agit sur toutes l'animation ou seulement sur ta carte ?

dans ce cas on pourrai placer le code qui repositionne la carte dans la meme fonction.

+
ps: on devrai faire en sorte que Toulouse soit toujours au milieu sur les cartes :P

[nicolas2603]

beh voilà on a enfin réussir à se comprendre !! Ma fonction ne zoome que la carte. Le code que j'ai fait et qui fonctionne donne ça :

Code :

1
2
3
4
this.carte._width = carteL0 + (((carteLmax - carteL0) * zoomPourcentage) / 100);
this.carte._height = carteH0 + (((carteHmax - carteH0) * zoomPourcentage) / 100);
this.carte._x = carteX0 - (((carteX0-carteCentreX) / carteTailleL) * this.carte._width);
this.carte._y = carteY0 - (((carteY0-carteCentreY) / carteTailleH) * this.carte._height);

où carteL0 / carteH0 / carteX0 / carteY0 sont la taille et les coordonnées d'origine de la carte;
carteLmax la taille maxi possible à zoom=100;
zoomPourcentage et le pourcentage de zoom;
et carteCentreX / carteCentreY le centre de la carte à l'instant t aprés le drag.

J'ai fait en sorte qu'au moment où l'on relache la souris, le rapport taille/distance qui existe entre le centre de la carte et le 100*100 de la scène soit identique lorsque l'on rezoome. Je sais pas si comme ça tu vas pouvoir en tirer quelque chose, et je sais pas si y a une façon plus simple de faire mon calcul !!!

[beekeep]

re,

voila ce que je te propose pour garder le positionnement actuel;

mémoriser la position de l'ancre(100-100) par rapport au clip avant de faire le redimensionnement,
puis de ré appliquer le même rapport après.

ce qui donnerait:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
// memo
var nCoefPosX:Number = (100-carte._x)/carte._width;
var nCoefPosY:Number = (100-carte._y)/carte._height;
 
// Redim (inchangé)
this.carte._width = carteL0 + (((carteLmax - carteL0) * zoomPourcentage) / 100);
this.carte._height = carteH0 + (((carteHmax - carteH0) * zoomPourcentage) / 100);
 
// Replace
this.carte._x = 100 - nCoefPosX*carte._width;
this.carte._y = 100 - nCoefPosY*carte._height;

j'ai pas testé.

;)

[nicolas2603]

salut,

marche paaaaaaaaaaaaas ... Mais bon, j'ai reregardé mon code et finalement il n'est pas si compliqué que ça !! Je m'demande si je vais pas laisser comme ça moi ?