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
(noronScale
andonRotate
) events. - When there’s only one finger remaining on the screen,
onPinchEnd
(andonScaleEnd
andonRotateEnd
) will be called.
Multi-touch example
These events are used in the example:
onPinchStart
shows the scale and rotation labelsonScale
updates the current scale factor in the labelonRotate
updates the degrees of rotation in the labelonPinchEnd
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 valuesNote: Because onScale
and onRotate
are interchangeable, we might as well have used only one of them to update both labels.
Overview of the multi-touch events
