Ejemplo de Zoom con lupa en Flex

Hace un tiempo escribí un ejemplo de zoom sobre una imagen con Flash. Justo hoy me acaban de preguntar como adaptar ese ejemplo a una aplicación Flex.

Adaptar ese ejemplo es fácil, ya que el código actionscript se puede reutilizar prácticamente igual. Lo único que hay que tener en cuenta es que no vamos a trabajar con un MovieClip con una máscara sino con componentes mxml de Flex.

Así es como quedará el ejemplo montado en Flex:

Esta seria nuestra aplicación Flex:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="absolute"
            xmlns:ui="*"
            creationComplete="ini()">

   <mx:Script>
      <![CDATA[
         import LupaFx;
         private var _lupa:LupaFx;

         private function ini():void
         {
            _lupa=new LupaFx(this, foto, lupa);
         }
      ]]>
   </mx:Script>
   <mx:Image id="foto"
           scaleContent="true"
           horizontalCenter="0"
           verticalCenter="0"
           width="350"
           height="250">
      <mx:source>img/Waterfall.jpg</mx:source>
   </mx:Image>

   <ui:Lupa id="lupa"
          x="0"
          y="0"/>

</mx:Application>

El componente que utilizaremos como lupa:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
         width="100"
         height="100"
         borderStyle="solid"
         borderThickness="4"
         borderColor="#FF0000"
         horizontalScrollPolicy="off"
         verticalScrollPolicy="off">
   <mx:Image id="foto"
           scaleContent="false"
           y="0"
           x="0">
      <mx:source>img/Waterfall.jpg</mx:source>
   </mx:Image>
</mx:Canvas>

Y la clase de actionscript que controlará el efecto:

Código :

package
{
   import flash.events.MouseEvent;

   import mx.core.UIComponent;

   public class LupaFx
   {
      private var _stage:UIComponent;
      private var _foto:UIComponent;
      private var _lupa:UIComponent;
      private var _distX:Number;
      private var _distY:Number;
      private var _porcentajeX:Number;
      private var _porcentajeY:Number;
      //----------------------------------------------------
      public function LupaFx(stage:UIComponent, foto:UIComponent, lupa:UIComponent)
      {
         _stage=stage;
         _foto=foto;
         _lupa=lupa;
         stage.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
         lupaMouseMove();
      }
      //----------------------------------------------------
      private function lupaMouseMove(event:MouseEvent=null):void
      {
         calculaDist();
         mueveLupa();

         _lupa.x=_foto.mouseX + _foto.x - _lupa.width / 2;
         _lupa.y=_foto.mouseY + _foto.y - _lupa.height / 2;

         if (_lupa.x < _foto.x)
         {
            _lupa.x=_foto.x;
         }
         else if (_lupa.x > _foto.x + _foto.width - _lupa.width)
         {
            _lupa.x=_foto.x + _foto.width - _lupa.width;
         }
         if (_lupa.y < _foto.y)
         {
            _lupa.y=_foto.y;
         }
         else if (_lupa.y > _foto.y + _foto.height - _lupa.height)
         {
            _lupa.y=_foto.y + _foto.height - _lupa.height;
         }
      }
      //----------------------------------------------------
      private function calculaDist():void
      {
         _porcentajeX=100 / (_lupa.getChildByName("foto").width / (_foto.width - _lupa.width / 2));
         _porcentajeY=100 / (_lupa.getChildByName("foto").height / (_foto.height - _lupa.height / 2));

         _distX=(_lupa.x - _foto.x) / _porcentajeX * 100;
         _distY=(_lupa.y - _foto.y) / _porcentajeY * 100;
      }
      //----------------------------------------------------
      private function mueveLupa():void
      {
         _lupa.getChildByName("foto").x=-_distX;
         _lupa.getChildByName("foto").y=-_distY;
      }
   }
}

También te interesa

• Subir imágenes a un servidor con AIR
• Acceder a funciones de un componente desde un itemRenderer
• Asignar una clase ActionScript 3 a un itemRenderer en Flex

flex mxml

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario