Ejemplo de Zoom con lupa en Flex
Hace un tiempo escribí un ejemplo de zoom sobre una imagen con Flash. Justo ahora 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:
Desplaza el mouse sobre la imagen para mover la lupa
Esta seria nuestra aplicación Flex:
<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:
<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:
{
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;
}
}
}
