Using gestures to pan a display object_Flash Development for Android Cookbook-QQ阅读男生武侠网

书名：Flash Development for Android Cookbook
作者名：Joseph Labrecque
本章字数：528字
更新时间：2025-03-31 04:57:13

Using gestures to pan a display object

Panning a DisplayObject is accomplished by touching the screen with two fingers simultaneously, and then moving both fingers across the screen in the direction we want to pan the object. This is normally used upon an object that occupies more real estate than the screen affords, or an object that has been zoomed in so far that only a portion of it is visible on the screen at any given time.

How to do it...

This example draws a square within a Shape object using the Graphics API, adds it to the Stage, and then sets up listeners for pan gesture events in order to scale the Shape appropriately.

First, import the following classes into your project:

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Stage;
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.TransformGestureEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

Declare a Shape object which we will perform the gestures upon:
```
private var box:Shape;
```

Next, construct a method to handle the creation of our Shape and add it to the DisplayList. We have made extra effort to be sure our Shape is much larger than the screen so that it can be panned effectively:

protected function setupBox():void {
box = new Shape();
box.graphics.beginFill(0xFFFFFF, 1);
box.x = stage.stageWidth/2;
box.y = stage.stageHeight/2;
box.graphics.drawRect(-150,-150,300,300);
box.graphics.endFill();
box.graphics.lineStyle(10, 0x440000, 1);
box.graphics.moveTo(0, -800);
box.graphics.lineTo(0, 800);
box.graphics.moveTo(-800, 0);
box.graphics.lineTo(800, 0);
addChild(box);
}

Set the specific input mode for the multitouch APIs to support touch input by setting Multitouch.inputMode to the MultitouchInputMode.TOUCH_POINT constant and register an event listener for the GESTURE_PAN event. In this case, the onPan method will fire whenever the application detects a zoom gesture:
```
protected function setupTouchEvents():void {
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent. GESTURE_PAN, onPan);
}
```
We can now respond to the data being returned by our pan event. In this case, we are simply shifting the x and y positions of our Shape based upon the pan offset data:
```
protected function onPan(e:TransformGestureEvent):void {
box.x += e.offsetX;
box.y += e.offsetY;
}
```
The resulting gesture will affect our visual object in the following way:

Note

Illustrations provided by Gestureworks (www.gestureworks.com).

How it works...

As we are setting our Multitouch.inputMode to gestures through MultitouchInputMode.GESTURE, we are able to listen for and react to a host of predefined gestures. In this example we are listening for the TransformGestureEvent.GESTURE_PAN event in order to shift the x and y position of our Shape object. By adjusting the coordinates of our Shape through the reported offset data, we can adjust the position of our object in a way that the user expects.

There's more...

Note that this is often a difficult gesture to perform on certain devices (As you must touch the screen with two fingers, simultaneously), and that other devices may not even support it. For a fallback, we can always use the startDrag() and stopDrag() methods to simulate a pan.