Show:
Extends View

A UI element that visualizes multi-touch interactions and mouse drags. On a touchstart or mousedown event, a Surface will animate in over the touch point This surface will follow the user's dragging behavior, and animate out on a touchend or mouseup event. Useful for taking screen captures to showcase what the user is doing while using a touch-responsive application.

This file comes with an associated CSS file fingers.css

Constructor

UI.Fingers

(
  • [options]
)

Parameters:

  • [options] Object optional

    Options

    • [diameter=40] Number optional

      Diameter of finger surfaces

    • [opacityIn] Object | Boolean optional

      Transition definition for opacity enter animation

    • [opacityOut] Object | Boolean optional

      Transition definition for opacity exit animation

    • [scaleIn] Object | Boolean optional

      Transition definition for scale enter animation

    • [scaleOut] Object | Boolean optional

      Transition definition for scale exit animation

Example:

var fingers = new Fingers({
            diameter : 40,
            scaleIn : {duration : 400},
            scaleOut : {duration : 300}
        });
        
        fingers.subscribe(context); // fingers listens to mouse/touch events from context
        context.add(fingers); // finger surfaces render into the context

Item Index