移动设备的触控和手势

本文详细介绍了在移动应用开发中如何利用触摸事件和手势识别技术实现丰富的交互体验,包括轻敲事件、点击与拖拽、长按、两指轻敲、捏缩放、摇移事件、旋转事件、上/下/左/右快速划等功能。通过实例代码展示了如何在不同场景下运用这些技术,以提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鼠标点击 = 轻敲事件

A tap event acts the same way as a mouse click on the desktop:
轻敲事件和桌面系统中的鼠标点击作用一样:

1
2
3
4
5
6
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
square.addEventListener(TouchEvent.TOUCH_TAP, tapHandler);
function tapHandler(event:TouchEvent):void
{
// Start your custom code
}

点击/拖拽 = Touch Begin/End

When you’re doing a click and drag on mobile consider using TOUCH_BEGIN and TOUCH_END:
当你在移动设备上做点击并且拖动可以使用 TOUCH_BEGIN和TOUCH_END:

1
2
3
4
5
6
7
8
9
10
11
12
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
square.addEventListener(TouchEvent.TOUCH_BEGIN, touchBeginHandler);
var fl_DragBounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
function fl_TouchBeginHandler(event:TouchEvent):void
{
    event.target.startTouchDrag(event.touchPointID, false, fl_DragBounds);
}
square.addEventListener(TouchEvent.TOUCH_END, touchEndHandler);
function fl_TouchEndHandler(event:TouchEvent):void
{
    event.target.stopTouchDrag(event.touchPointID);
}

长按

A long tap can be used to show a submenu on the image selected.  For instance, a long tap on an image might activate a submenu allowing the user to save the photo. The functionality uses a timer that counts down one second before showing the menu.
长按(Long Tap)通常用于显示所选图片上的子菜单。例如,在一张图片上长按可能会激活一个子菜单允许用户保存图片。实现这个功能可以利用一个计时器倒数1秒后显示菜单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var pressTimer:Timer = new Timer(1000);
pressTimer.addEventListener(TimerEvent.TIMER, pressTimerHandler);
function fl_PressTimerHandler(event:TimerEvent):void
{
    // Start your custom code
}
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
square.addEventListener(TouchEvent.TOUCH_BEGIN, pressBeginHandler);
function pressBeginHandler(event:TouchEvent):void
{
    pressTimer.start();
}
square.addEventListener(TouchEvent.TOUCH_END, pressEndHandler);
square.addEventListener(TouchEvent.TOUCH_ROLL_OUT, pressEndHandler);
function pressEndHandler(event:TouchEvent):void
{
    pressTimer.stop();
    // End your custom code
}

两指轻敲

A two-finger tap is another way to add additional functionality to an image. Two fingers can reveal a submenu.
两指轻敲是为图片添加功能的另一种方式。两个手指可以呼出子菜单。

1
2
3
4
5
6
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, twoFingerTapHandler);
function twoFingerTapHandler(event:GestureEvent):void
{
// Start your custom code
}

捏缩放

Pinch to zoom in and out on such things as maps and photos.
在地图或照片上面捏缩放(Pinch to Zoom)。

1
2
3
4
5
6
7
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomHandler);
function zoomHandler(event:TransformGestureEvent):void
{
    instance_name_here.scaleX *= event.scaleX;
    instance_name_here.scaleY *= event.scaleY;
}

摇移事件

If an image or list is larger than the screen size then use the pan event to reveal the additional content.
如果图片或者列表的大小大于屏幕大小,那么可使用摇移事件(Pan Event)去显示更多内容。

1
2
3
4
5
6
7
Multitouch.inputMode = MultitouchInputMode.GESTURE;
instance_name_here.addEventListener(TransformGestureEvent.GESTURE_PAN, panHandler);
function panHandler(event:TransformGestureEvent):void
{
    event.currentTarget.x += event.offsetX;
    event.currentTarget.y += event.offsetY;
}

旋转事件

Allows the user to use two fingers to rotate an item.  Great for a game or even for any photos.
允许用户用两个手指去旋转物品。对于游戏和照片都很有用。

1
2
3
4
5
6
Multitouch.inputMode = MultitouchInputMode.GESTURE;
instance_name_here.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotateHandler);
function rotateHandler(event:TransformGestureEvent):void
{
    event.target.rotation += event.rotation;
}

上/下/左/右 快速划

Allows users to move through multiple screens or through long text fields.
允许用户多屏内容之间转换或者长文本框滚动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, swipeHandler);
function swipeHandler(event:TransformGestureEvent):void
{
    switch(event.offsetX)
    {
        case 1:
        {
            // swiped right
            break;
        }
        case -1:
        {
            // swiped left
            break;
        }
    }
    switch(event.offsetY)
    {
        case 1:
        {
            // swiped down
            break;
        }
        case -1:
        {
            // swiped up
            break;
        }
    }
}
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值