martes, 8 de noviembre de 2016

Gesture Zoom, acercar un objeto para visualización


Este evento táctil se usa con frecuencia en los dispositivos móviles que soportan eventos multitáctil. En este ejemplo se dibujara un cuadrado en el escenario dentro de un objeto de tipo Shape; usando el API de gráficos que se mostrara en el escenario y a continuación mediante los captadores de eventos oyentes llamados LISTENERS dentro del entorno de programación de AS3, se captara los eventos de zoom:

package 
{
 import flash.display.Shape;
 import flash.display.Sprite;
 import flash.events.TransformGestureEvent;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 
 /**
  * ...
  * @author Alejandro
  */
 public class GesturesZoomDisplayObjetc extends Sprite 
 {
  private var box:Shape;
  
  public function GesturesZoomDisplayObjetc() 
  {
   init();
  }
  
  private function init():void 
  {
   setupBox();
   
   setupTouchEvents();
  }
  
  private function setupTouchEvents():void 
  {
   Multitouch.inputMode = MultitouchInputMode.GESTURE;
   stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
  }
  
  private function onZoom(e:TransformGestureEvent):void 
  {
   box.scaleX *= e.scaleX;
   box.scaleY *= e.scaleY;
  }
  
  private function setupBox():void 
  {
   box = new Shape();
   box.graphics.beginFill(0x00ff00);
   //box.x = stage.stageWidth / 2;
   //box.y = stage.stageHeight / 2;
   box.graphics.drawRect(stage.stageWidth / 2 -100, stage.stageHeight / 2-100, 200, 200 );
   box.graphics.endFill();
   addChild(box);
  }
  
 }

}

El evento Multitouch.inputMode a través de GESTURES es capaz de escuchar y reaccionar ante este gesto predefinido en este ejemplo lo que se hace es escuchar el evento GESTURE_ZOOM para configurar la escala de nuestro objeto shape. Multiplicando la escala que se reporta a través de nuestro evento y así ajustar las escala del objeto.

Se ha dibujado el objeto cuadrado de tal forma que el registro este situado en el centro del escenario, esto es importante ya que DisplayObject se expande hacia arriba y hacia abajo, según el punto de transformación.


TransformGestureEvent.GESTURE_ZOOM  es solo una de las cuatro transformaciones primarias disponibles cuando se trabaja con dispositivos móviles.