Events » Multi-touch events

Multi-touch events

These events let you listen for the two-finger pinch and rotation actions on a pinchable layer. But the layer doesn’t actually have to be pinchable, the events will work on any layer.

Pinch, Scale and Rotate

Pinch events
`onPinchStart`	Two fingers started panning or moving on the layer (or one finger was already on the layer and a second finger was added to the screen)
`onPinch` 🔃	The fingers moved (can be outside of the layer at this point)
`onPinchEnd`	At least one of the fingers stopped touching the screen

Scale events
`onScaleStart`	See `onPinchStart`
`onScale` 🔃	See `onPinch`
`onScaleEnd`	See `onPinchEnd`

Rotate events
`onRotateStart`	See `onPinchStart`
`onRotate` 🔃	See `onPinch`
`onRotateEnd`	See `onPinchEnd`

The three types of events, pinch, scale and rotate, are interchangeable. When making a two-finger gesture, all three will be triggered simultaneously. The separate events were created just for your convenience.

Two fingers only

Only gestures with two fingers will trigger these events. Gestures that starts with three or more fingers are ignored (the third digit doesn’t even need to be on the layer in question).
But fingers can be added once the gesture has already started, this will not break the stream of onPinch (nor onScale and onRotate) events.
When there’s only one finger remaining on the screen, onPinchEnd (and onScaleEnd and onRotateEnd) will be called.

Multi-touch example

These events are used in the example:

onPinchStart shows the scale and rotation labels
onScale updates the current scale factor in the label
onRotate updates the degrees of rotation in the label
onPinchEnd snaps the layer back to its original position and size, resets the scale and rotation labels, and fades them out

layerA.onPinchStart ->
    labelScale.opacity = 1
    labelRotate.opacity = 1

layerA.onScale ->
    labelScale.html = "Scale: #"

layerA.onRotate ->
    labelRotate.html = "Rotation: # º"

# Snap back to original state
layerA.onPinchEnd ->
    layerA.animate
        rotation: 0
        scale: .5
    Utils.delay .5, ->
        labelScale.html = "Scale: -.-"
        labelRotate.html = "Rotation: -.- º"
        Utils.delay 1, ->
            labelScale.opacity = 0
            labelRotate.opacity = 0

Multi-touch example

`onPinchStart` shows the labels, `onPinchEnd` hides them (with a delay).
`onScale` and `onRotate` change the label values

Note: Because onScale and onRotate are interchangeable, we might as well have used only one of them to update both labels.

Multi-touch events

Pinch, Scale and Rotate

Two fingers only

Multi-touch example

Multi-touch example

Overview of the multi-touch events