Comunidad de diseño web y desarrollo en internet online

Corregir centrado de mapa al hacer zoom en AS3

Un montón de veces me he encontrado con preguntas acerca de como corregir un mapa cuando se le hace zoom, ya que usualmente el punto de anclaje no se encuentra en el centro de donde se está viendo, sino en el centro del mapa o en la esquina superior izquierda. Me daba bastante pereza pasar el código pero el otro día tuve que hacerlo por enésima vez y aprovecho para anotarlo aquí.
El código es AS3 y sirve para un elemento con punto de anclaje en la esquina superior izquierda.

Código :

private function zoom(evt:ScaleEvent):void{
   main.scaleX = evt.scaleX;
   main.scaleY = evt.scaleY;
   var diffX:Number = int((mainW*evt.scaleX)-mainW)/2;
   var diffY:Number = int((mainH*evt.scaleY)-mainH)/2;
   main.x = (scaleX>0)?-diffX: diffX;
   main.y = (scaleY>0)?-diffY: diffY;            
}


Los elementos usados son:



  • main: DisplayObject principal, por ejemplo el mapa.
  • ScaleEvent: un evento propio que trae las dos propiedades modificadas.
  • mainW: ancho original del elemento main. Aunque le hagan scaleX siempre reporta el original, lo guardo solo para evitarme los lookups, ya que lo tengo atado a un slider.
  • mainH: idem para el alto.


Noten que calculo el offset según el punto de registro y lo aplica, esto hace que no se "mueva" al escalarlo. Si el punto de anclaje estuviera en el centro el algoritmo es parecido.

Sólo por completud dejo mi evento personalizado usado en la rutina, que no es en absoluto necesario (pueden pasar los dos parámetros directamente).

Código :

package event
{
   import flash.events.Event;
   
   public class ScaleEvent extends Event
   {
      public static const CHANGE:String = "change";
      public static const MIRROR:String = "mirror";
      public var scaleX:Number;
      public var scaleY:Number;
      public var axis:String; //vertical u horizontal
      
      public function ScaleEvent(type:String, w:Number, h:Number)
      {
         super(type);
         scaleX = w;
         scaleY = h
      }
      override public function clone():Event{
         return new ScaleEvent(type, scaleX, scaleY);
      }
   }
}


Jorge

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate