Canvas 2D Web Apps/Transformable Objects

This chapter introduces “transformable objects.” Here, “transformable objects” denote images that can be moved (“translated”), rotated, and scaled (uniformly in both directions) by two-finger gestures. Transformable objects are used very much like draggable objects; however, their process functions requires another image for the case that they are touched by two fingers and it takes another boolean value to determine whether the object can be dragged with one finger or the mouse (instead of only with two fingers).

As with draggable objects, any number of objects can be transformed simultaneously (as long as the touch device supports the required number of touch events). Moreover, application programmers don't have to worry about the handling of multiple simultaneous touch events: the  function receives only events with a single pair of coordinates and processes only one object at a time.

The Example
The example of this chapter (which is available online; also as downloadable version) shows two objects: both can be dragged with one finger (or a mouse) and transformed with two fingers but one cannot be scaled and the other cannot be rotated. The following sections discuss how to use transformable objects and how them. See the chapter on draggable objects for other parts.

Using Transformable Objects
Similarly to draggable object, a global variable should be defined for each transformable object. In the example, this looks like this:

The transformable objects are then processed in the page's process functions:

The last argument of the process function (here it's ) specifies the available forms of interaction. To support multiple forms of interaction, the constants have to be combined with a bitwise-or as in the example. Other useful constants are,   and. Deactivating rotation and scaling with these flags is not as flexible as the method in the example; however, it avoids some translational movement that comes with rotation and scaling gestures.

The function  returns   whenever the object processed the event. In these cases, additional actions should be taken. Here, the scaling of the first object is deactivated by always setting it to 1.0. Analogously, the rotation of the second object is deactivated by always setting the rotation angle to 0 degrees.

Of course, there are many more possibilities of reacting to the transformation of objects; e.g., restricting  and.

Implementation of Transformable Objects
Due to the different transformations and the use of two touch points for the gesture, transformable objects require considerably more properties than draggable objects: