让Flex中的可视化对象在多点触控屏幕中缩放和旋转

我的一个朋友曾说起让图像在多触点屏幕中缩放和旋转效果应该像程序中“hello world”一样基础,我认为这个说法非常有道理。在视频中第一部分(总共两部分),我将讲解如何使得Flex组件旋转和缩放。下面的类可以使图片实现缩放和旋转的效果,就像“hello world”一样经典,而且它同样适用于视频、容器等,这将会大大增强用户的体验性。

    下面是类的内容,可以应用在大部分的程序中。
  RotatableScalable:
  1. package com.mlegrand
  2. {
  3.         import flash.display.DisplayObject;
  4.         import flash.events.TransformGestureEvent;
  5.         import flash.geom.Matrix;
  6.         import flash.geom.Point;
  7.         import flash.ui.Multitouch;
  8.         import flash.ui.MultitouchInputMode;

  9.         public class RotatableScalable
  10.         {

  11.                 protected var disO:DisplayObject

  12.                 public function RotatableScalable(displayObject:DisplayObject)
  13.                 {
  14.                         disO = displayObject;
  15.                         if(Multitouch.supportsGestureEvents)
  16.                         {
  17.                                 Multitouch.inputMode = MultitouchInputMode.GESTURE;
  18.                                 addGestureEventListeners()
  19.                         }

  20.                 }

  21.                 protected function addGestureEventListeners():void
  22.                 {
  23.                         disO.addEventListener(TransformGestureEvent.GESTURE_ROTATE, gestureRotateHandler);
  24.                         disO.addEventListener(TransformGestureEvent.GESTURE_ZOOM, gestureZoomHandler);
  25.                 }

  26.                 protected function gestureRotateHandler(event:TransformGestureEvent) : void
  27.                 {
  28.                         event.stopImmediatePropagation();
  29.                         var m:Matrix = disO.transform.matrix;
  30.                         var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
  31.                         m.translate(-p.x, -p.y);
  32.                         m.rotate(event.rotation*(Math.PI/180));
  33.                         m.translate(p.x, p.y);
  34.                         disO.transform.matrix = m;
  35.                 }

  36.                 protected function gestureZoomHandler(event:TransformGestureEvent):void
  37.                 {
  38.                         event.stopImmediatePropagation();
  39.                         var m:Matrix = disO.transform.matrix;
  40.                         var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
  41.                         m.translate(-p.x, -p.y);
  42.                         m.scale(event.scaleX, event.scaleY);
  43.                         m.translate(p.x, p.y);
  44.                         disO.transform.matrix = m;
  45.                 }

  46.         }
  47. }
复制代码
注:我在Justin Imhoff’s blog看的过一些关于矩阵变化的内容,我强烈建议你通过feed订阅他的博客,我也注意到Natural User Interface Group,这个论坛非常好,建议对多点触控感兴趣的兄弟姐妹们去看看

转载:http://bbs.9ria.com/thread-44732-1-1.html

你可能感兴趣的:(让Flex中的可视化对象在多点触控屏幕中缩放和旋转)