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;
      }
   }
}

 

Tweet