Home » AS3 »Básico »Flex » Currently Reading:

Panel de zoom de imágenes en Flex

abril 13, 2009 AS3, Básico, Flex 4 Comments
Panel de zoom de imágenes en Flex

Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen.

Este es el ejemplo montado en Flex:

Y este es el código utilizado para la película principal:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.                 xmlns:ui="*"
  4.                 layout="absolute"
  5.                 creationComplete="ini()"
  6.                 width="505"
  7.                 height="260">
  8.  
  9.     <mx:Script>
  10.         <!&#91;CDATA[
  11.             import ZoomFx;
  12.             private var _zoom:ZoomFx;
  13.  
  14.             private function ini():void
  15.             {
  16.                 _zoom=new ZoomFx(this, fotoZoom, panelZoom);
  17.             }
  18.         &#93;]>
  19.     </mx:Script>
  20.  
  21.     <mx:HBox horizontalCenter="0"
  22.              verticalCenter="0">
  23.         <ui:FotoZoom id="fotoZoom"/>
  24.         <ui:PanelZoom id="panelZoom"/>
  25.     </mx:HBox>
  26.  
  27. </mx:Application>

Este sería el componente que contiene la foto en grande:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="350"
  4.            height="250"
  5.            borderStyle="solid"
  6.            borderThickness="1"
  7.            borderColor="#000000"
  8.            horizontalScrollPolicy="off"
  9.            verticalScrollPolicy="off">
  10.     <mx:Image id="foto"
  11.               scaleContent="false">
  12.         <mx:source>img/Waterfall.jpg</mx:source>
  13.     </mx:Image>
  14.  
  15. </mx:Canvas>

Y este el componente que contiene el panel de preview:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="140"
  4.            height="100"
  5.            borderStyle="solid"
  6.            borderThickness="1"
  7.            borderColor="#000000"
  8.            horizontalScrollPolicy="off"
  9.            verticalScrollPolicy="off">
  10.     <mx:Image id="foto"
  11.               scaleContent="true"
  12.               width="140"
  13.               height="100"
  14.               horizontalCenter="0"
  15.               verticalCenter="0">
  16.         <mx:source>img/Waterfall.jpg</mx:source>
  17.     </mx:Image>
  18.     <mx:Canvas x="0"
  19.                y="0"
  20.                width="70"
  21.                height="50"
  22.                backgroundColor="#FF0000"
  23.                backgroundAlpha="0.5"
  24.                borderStyle="solid"
  25.                borderThickness="1"
  26.                borderColor="#FF0000"
  27.                id="zoomDrag">
  28.     </mx:Canvas>
  29. </mx:Canvas>

Solo quedaría la clase de que controla el efecto:
package
{
import flash.events.Event;
import flash.events.MouseEvent;

import mx.containers.Canvas;
import mx.controls.Image;
import mx.controls.Alert;
import mx.core.UIComponent;

public class ZoomFx
{
private var _stage:UIComponent;
private var _fotoZoom:UIComponent;
private var _panelZoom:UIComponent;
private var _distX:Number;
private var _distY:Number;
private var _porcentajeX:Number;
private var _porcentajeY:Number;

//—————————————————-
public function ZoomFx(stage:UIComponent, fotoZoom:UIComponent, panelZoom:UIComponent)
{
_stage=stage;
_fotoZoom=fotoZoom;
_panelZoom=panelZoom;

iniZoomDrag();
}

private function iniZoomDrag():void
{
var drag:Canvas=_panelZoom.getChildByName(“zoomDrag”) as Canvas;
drag.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
drag.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
drag.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
}

private function onStartDrag(e:Event):void
{
var canvas:Canvas=e.target as Canvas;
canvas.startDrag();
_stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
}

private function onStopDrag(e:Event):void
{
var canvas:Canvas=e.target as Canvas;
canvas.stopDrag();
_stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
}

private function onMouseDragMove(e:Event):void
{
calculaDist();
mueveVisorZona();
controlaPosiciones();
}

//————————————————————-
private function calculaDist():void
{
var drag:Canvas=_panelZoom.getChildByName(“zoomDrag”) as Canvas;
var foto:Image=_fotoZoom.getChildByName(“foto”) as Image;

_porcentajeX=100 / (foto.width / _panelZoom.width);
_porcentajeY=100 / (foto.height / _panelZoom.height);

drag.width=_fotoZoom.width * _porcentajeX / 100;
drag.height=_fotoZoom.height * _porcentajeY / 100;

_distX=drag.x * 100 / _porcentajeX;
_distY=drag.y * 100 / _porcentajeY;

_distX=(_distX < 0) ? 0 : _distX; _distY=(_distY < 0) ? 0 : _distY; } private function mueveVisorZona():void { var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas; var foto:Image=_fotoZoom.getChildByName("foto") as Image; foto.x=-_distX; foto.y=-_distY; } private function controlaPosiciones():void { var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas; var foto:Image=_fotoZoom.getChildByName("foto") as Image; if (drag.x < 0) { drag.x=0; } else if (drag.x > _panelZoom.width – drag.width)
{
drag.x=_panelZoom.width – drag.width;
}
if (drag.y < _panelZoom.y) { drag.y=_panelZoom.y; } else if (drag.y > _panelZoom.y + _panelZoom.height – drag.height)
{
drag.y=_panelZoom.y + _panelZoom.height – drag.height;
}

if (foto.x > 0)
{
foto.x=0;
}
else if (foto.x < _fotoZoom.width - foto.width) { foto.x=_fotoZoom.width - foto.width; } if (foto.y > 0)
{
foto.y=0;
}
else if (foto.y < _fotoZoom.height – foto.height) { foto.y=_fotoZoom.height – foto.height; } } } }[/as]

Compártelo:

Panel de zoom de imágenes en Flex
Visto 11.329 veces

Currently there are "4 comments" on this Article:

  1. Fredybgonzález dice:

    ¡Genial! Muy bueno el resultado final. :)

  2. Very very perfect!!!

    I’m your big fan man!!! Thanks for this example and your ready help!!!

    Thanks,

    Silva Developer
    silva.developer@gmail.com

  3. isantos dice:

    muy bueno!!!!
    gracias por el aporte!!!
    Te invito a que visites y comentes mi blog
    http://www.ddsmedia.net/blog

  4. Thiago Rasmussen dice:

    Ficou ótimo o exemplo.

Comment on this Article:








AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Ejemplo de Zoom con lupa en Flex

10 abr 2009

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: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"       …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com