Flex制作多点触控屏幕中的缩放和旋转效果

2012年12月27日
C6Flash/AS3.0
6617已阅
0 评论

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

下面是类的内容，可以应用在大部分的程序中。
RotatableScalable:

package com.mlegrand
{
import flash.display.DisplayObject;
import flash.events.TransformGestureEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
public class RotatableScalable
{
protected var disO:DisplayObject
public function RotatableScalable(displayObject:DisplayObject)
{
disO = displayObject;
if(Multitouch.supportsGestureEvents)
{
Multitouch.inputMode = MultitouchInputMode.GESTURE;
addGestureEventListeners()
}
}
protected function addGestureEventListeners():void
{
disO.addEventListener(TransformGestureEvent.GESTURE_ROTATE, gestureRotateHandler);
disO.addEventListener(TransformGestureEvent.GESTURE_ZOOM, gestureZoomHandler);
}
protected function gestureRotateHandler(event:TransformGestureEvent) : void
{
event.stopImmediatePropagation();
var m:Matrix = disO.transform.matrix;
var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
m.translate(-p.x, -p.y);
m.rotate(event.rotation*(Math.PI/180));
m.translate(p.x, p.y);
disO.transform.matrix = m;
}
protected function gestureZoomHandler(event:TransformGestureEvent):void
{
event.stopImmediatePropagation();
var m:Matrix = disO.transform.matrix;
var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
m.translate(-p.x, -p.y);
m.scale(event.scaleX, event.scaleY);
m.translate(p.x, p.y);
disO.transform.matrix = m;
}
}
}