Affine Transforms in Java2D

title page &
other versions



2. Ordering

The order in which the transforms are combined is important. For example, consider the following two scenarios. In both cases, the image at top is show at bottom rendered in a Graphics2D that has been translated and rotated. It is clear that the order of transformations is important:

Translate first Rotate first
g.translate(25.0, 0.0);
g.rotate(60.0 * Math.PI / 180.0);
g.rotate(60.0 * Math.PI / 180.0);
g.translate(25.0, 0.0);

In the case on the left, you can think of the drawing coordinate system first being slid over to the right (the translate), and then rotated. In the case on the right, the rotation happens first, and then the translation happens in the rotated coordinate system.  This is crucial to understanding how transforms combine. Each transform takes place in the coordinate system created by the last.  Clicking on each image will demonstrate this.


Consider the following sequence of transforms, illustrated at left:

g.rotate(30.0 * Math.PI / 180.0);
g.scale(2.0, 2.0);
g.translate(0.0, 20.0);

The final translation takes place in a coordinate system that is both rotated and scaled. Notice that the M is shifted down the rotated y-axis, and by 40 pixels in distance. Even though the transform is given as 20.0, it is occurring in a scaled coordinate system where one pixel maps to two.

(The image represents a sequence of transformations that were applied to a drawing surface like the examples above.  In order to show the relationship between the transform steps, the drawing surface was tilted back and shows in a sort of 3D view.   Technically, the view is form of isometric projection, and was accomplished by use of additional scale and shear transforms.)

Affine Transform Lesson
1. Introduction
2. Ordering
3. Ordering, Part II
4. Try It
5. Graphics2D
6. AffineTransform
7. Wiggly Text
8. Code Examples
9. Links & Credits
Back ] Next ]


Back ] Next ]
pixel-008000.gif (807 bytes)
Copyright 1999
Glyphic Technology