Tabris.js Properties: pan
A “pan” event fires continuously when the user presses their finger on a widget and moves it more than 5px (though the precise distance can vary depending on the platform). This high-level gesture event should be used over low-level touch events like touchStart touchMove and touchEnd. See Gesture and Touch Events.
The event handler callback receives six parameters –
state
A string – either ‘start,’ ‘end,’ ‘change,’ or ‘cancel.’ State is ‘start’ when the event first fires, ‘end’ when the user lifts their finger, ‘change’ when the finger is being dragged and ‘cancel’ if the gesture is interrupted, for example by a dialog.
touches
An array of x / y coordinates. The distance in pixels from the event to the top left corner of the widget.
translationX , translationY
The x / y coordinate of the current touch relative to the first touch.
velocityX , velocityY
The velocity in pixels per second of the movement.
In the following example, the widget moves along the x-axis as the user drags their finger, but snaps back to its original position when the finger is lifted.
|
1 2 3 4 5 6 7 8 9 10 11 |
import {Composite, contentView} from 'tabris'; const composite = new Composite({centerX: 0, centerY: 0, width: 100, height: 100, background: 'red'}) .appendTo(contentView) .onPan(({state,translationX}) => { if(state !== "end") { composite.transfrom = {translationX}; } else { composite.transform = {translationX: 0}; } }); |
There are 6 other pan events that fire in a subset of instances the pan event does, based on the direction of the gesture. These receive the same parameters. They are:
panLeft, panRight, panUp, panDown, panVertical (fires when the finger is moved up or down), and panHorizontal (when the finger is moved left or right).
These are handy, so we do not have to calculate the trajectory of the movement ourselves based on multiple pan events.
You can read more about the pan event in the widget API documentation.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
