Flash AS3 - Comment faire pour centrer un objet autour d'un point d'après l'échelle

J'ai créé un mc qui fonctionne comme ma carte et des contrôles pour aller avec ce qui permettra la carte pour être déplacés et les principaux points de naviguer et de zoomer sur à différents niveaux de zoom.

Je suis en utilisant les propriétés scaleX et scaleY à l'échelle de la carte mc et une liste de positions x et y pour positionner correctement la carte pour chaque point clé.

Quand je veux aller à un certain domaine, j'ai effectuer ce calcul (offsetX et offsetY sont au centre de l'écran):

newX = posX * scale + offsetX;
newY = posY * scale + offsetY;

Puis je interpolation de la position et l'échelle de la carte de la douceur, de l'échelle et déplacer la carte à la position correcte:

var tween = new TweenLite(_background, EASING_SPEED, {x:newX, y:newY,scaleX:scale.getScale(),scaleY:scale,ease:EASING_TYPE,onComplete:moveToComplete,onCompleteParams:[room]});

J'ai maintenant besoin de mettre en œuvre un zoom in /out de fonction et c'est ce que je suis aux prises avec. Le zoom doit utiliser le centre de l'écran, comme le reg point pour l'échelle, alors j'ai essayé quelque chose le long des lignes de ce qui suit pour obtenir le positionnement correct:

var newX = offsetX - (offsetX - _background.x) * scale;
var newY = offsetY - (offsetY - _background.y) * scale;

Donc, dans mon esprit, c'obtient la distance à partir de la position actuelle de la carte par rapport au point central de l'écran (offsetX, offsetY) puis des échelles de distance par la nouvelle échelle.

Cependant, ce qui est manifestement faux, car il ne fonctionne pas et le positionnement de la carte est fausse.

J'ai aussi essayé d'utiliser une matrice de transformation pour obtenir les bonnes valeurs, mais je sais encore moins sur eux et de ne pas obtenu les résultats escomptés.

function scale(target:MovieClip, center:Point, scale:Number):Point {
    var m:Matrix = new Matrix();
    m.translate(-center.x, -center.y);//move the center into (0,0)
    m.scale(scale, scale);//scale relatively to (0,0) (which is where our center is now)
    m.translate(center.x, center.y);//move the center back to its original position
    return m.transformPoint(new Point());//transform (0,0) using the whole transformation matrix to calculate the destination of the upper left corner
}

Si quelqu'un pourrait jeter quelque lumière sur l'endroit où je vais mal, je lui en serais vraiment reconnaissante!

InformationsquelleAutor eb_Dev | 2011-10-27

2

J'ai eu un problème similaire où j'ai voulu l'image à faire pivoter sur le centre de l'image quand j'ai changé la rotation de l'image, mais l'image serait tourner autour de l'0,0 point.

Dans les deux cas( la vôtre et la mienne ) il y a 2 travail autour de cela.

La première approche consisterait à définir avec les mathématiques lors de la mise à l'échelle des changements.
```
var newX = stage.width/2 - _background.width/2
var newY = stage.height/2- _background.height/2
```
L'autre manière, qui une fois chargé nécessitera pas de code supplémentaire.

Ajouter un autre movieClip à l'intérieur de _background dans ce movieclip l'image va aller.
Cette image sera placée avec le point central 0,0 point au lieu de la topleft de l'image 0,0.
Donc, fondamentalement,
```
image.x = -(image.width/2)
image.y = -(image.height/2)
```
Cela fonctionne pour l'échelle et la rotation de l'image, tous centrés sur le centre de l'image.

[MODIFIER]

Ok, donc ce que vous devez faire est de commencer un nouveau projet et de créer quelque chose comme ce schéma.

Mettre l'image dans un conteneur movieclip

L'image et le conteneur ont la même hauteur et la largeur

Déplacer l'image de sorte que le centre de celui-ci est à l'0,0 point de MovieClip

Mettre le récipient sur scène.
2 boutons sur l'événement click ajouter .1 l'autre pour soustraire .1 à l'échelle sur le conteneur.

Maintenant, exécutez le test

Comme vous pouvez le voir le scaleing est centrée sur l'image

Maintenant pour le test 2 ouvrir le récipient et faites glisser l'image à gauche
Exécutez à nouveau le test.

Vous voyez l'image est maintenant mise à l'échelle et à la droite du centre(en face de l'endroit où vous l'avez déposée).

Donc, pour résumer, le décalage est mouvement inverse à partir du centre de l'image.(+2 points si vous comprenez une)
```
image.x = -(image.width/2) - offsetX
image.y = -(image.height/2) - offsetY
```
REMARQUE: la mise à l'échelle s'appliquent à l'contenant pas l'image directement sur le lieu de l'image de mouvement sera toujours de l'image.x et de l'image.y
- Je vous remercie pour votre reponse The_asMan, corrigez-moi si je me trompe, mais cette solution ne me permettent de zoomer dans et hors du centre de l'image et non pas le point dans l'image à laquelle le centre de l'écran est aligné?
- assurez-vous qu'il peut tout simplement s'ajuster selon votre décalage
- ok grande. J'ai vraiment du mal à voir comment implémenter cela dans mes calculs, pourriez-vous élaborer sur le premier point, s'il vous plaît?
- Votre centre devient l'0,0 point sur le conteneur de l'image d'arrière-plan. L'0,0 point sur le conteneur sera toujours centré sur la scène. Ensuite vous déplacer/redimensionner l'image dans le conteneur.
- ok merci, comment puis-je correctement décalage de l'image de fond?
- Ajout d'une modifier mon code pour que vous
- merci homme, très apprécié. Va marquer ce que la réponse que je peux pas le faire fonctionner dans l'autre sens.
InformationsquelleAutor The_asMan

function scaleAroundPoint (object:DisplayObject, offsetX:Number, offsetY:Number, absScaleX:Number, absScaleY:Number ):void {
    var relScaleX:Number = absScaleX / object.scaleX;
    var relScaleY:Number = absScaleY / object.scaleY;
    var AC:Point = new Point( offsetX, offsetY );
    AC = object.localToGlobal( AC );
    AC = object.parent.globalToLocal( AC );
    var AB:Point = new Point( object.x, object.y );
    var CB:Point = AB.subtract( AC );
    CB.x *= relScaleX;
    CB.y *= relScaleY;
    AB = AC.add( CB );
    object.scaleX *= relScaleX;
    object.scaleY *= relScaleY;
    object.x = AB.x;
    object.y = AB.y;
}

De http://timwhitlock.info/blog/2008/04/13/scale-rotate-around-an-arbitrary-centre/

Exemple d'utilisation de la fonction ci-dessus:

var currentScale:Number = 1;
mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick (e:MouseEvent):void {
    var point:Point = new Point(e.localX, e.localY);
    currentScale += .1;
    scaleAroundPoint(mc, point.x, point.y, currentScale, currentScale);
}

InformationsquelleAutor Pup

1

Lorsque vous redimensionnez un objet , le point de focalisation devrait conserver le même système de coordonnées. Puisque vous êtes mise à l'échelle de l'objet , vous devriez probablement utiliser ce point de coordonnées par rapport à la taille de la carte.

Depuis ce point reste dans le même stade de position , il devrait alors être possible de calculer les coordonnées cartographiques par rapport à cette valeur fixe.
```
//Pseudo Code
   //the point you want to zoom in
   //Record Mouse Click Coordinates , store in variable
   var origin:Point = new Point ( mouseX , mouseY );

   //calculate these coordinates as percentage of 
   //the map's width & height
    //store in variable 
    var percent:Object = { x% , y%}

   //during scaling, calculate the point's 
    //position using the "percent" values and
   //tween back to original ( var origin ) position 
```
bien, je n'ai pas essayé, mais ce serait ma première approche 🙂

Espère que cela aide!

Disons que votre carte à un ratio de 1:1 est 800x400. Le centre aurait alors (400 , 200 ).
Si vous avez l'échelle de la carte en haut, disons 1600x800 , le point central sera déplacé à (800, 400 ). Vous devez l'interpolation de la carte afin d'obtenir que le point précédent à ( 400 , 200 ) cela aura pour effet de donner l'impression que le point central est resté en place.

L'exemple que je vous ai donné était basée sur l'idée que le "zoom" point vas variable, où les clics de la souris, par exemple . Si ce n'est pas le cas, alors il vous suffit de déplacer votre point d'enregistrement au centre 🙂
- Merci pour votre réponse Patrick. Comme à l'origine, dans ce cas, est au centre de l'écran et la carte a un ratio de 1:1 initally avec l'écran, les valeurs de l'objet de pourcentage sera {50%, 50%} et je ne suis pas tout à fait sûr de savoir comment faire la prochaine bits, pouvez-vous en dire un peu plus s'il vous plaît?
InformationsquelleAutor PatrickS

Les gens, je pense que c'est juste un problème de maths. Vous pouvez modifier la position x,y, tandis que ne l'ampleur en même temps dans une animation:

public function FadeInWithGrowth(_obj:*, _timeSec:Number=DEFAULT_TIMESEC_FADE_IN, _ease:Ease=null):void{
        var _endAlpha:int = _obj.alpha;
        var _startScaleX:int = _obj.scaleX/2;
        var _startScaleY:int = _obj.scaleY/2;
        var _endScaleX:int = _obj.scaleX;
        var _endScaleY:int = _obj.scaleY;
        var _startX:int = _obj.width/2 -(_startScaleX*_obj.width/2);
        var _startY:int = _obj.height/2 -(_startScaleY*_obj.height/2);
        var _endX:int = _obj.x;
        var _endY:int = _obj.y;
        _ease = _ease ? _ease : Back.easeOut;
        //Para que o scale ocorra centralizado e não a partir do topo
        TweenMax.fromTo(_obj, DEFAULT_TIMESEC_FADE_IN,
            {alpha:0, scaleX:_startScaleX, scaleY:_startScaleY, x:_startX, y:_startY},
            {alpha:_endAlpha, scaleX:_endScaleX, scaleY:_endScaleY, x:_endX, y:_endY, ease:_ease}
        );
    }

InformationsquelleAutor Daniel Melo

Vous devez vous connecter pour publier un commentaire.