## 10.7 Coordinate Transformations

Java 2D allows you to easily translate, rotate, scale, or shear the
coordinate system. This capability is very convenient: moving the coordinate
system is often much easier than calculating new coordinates for each of your
points. Besides, for some data structures like ellipses and strings, the only
way to create a rotated or stretched version is through a transformation. The
meanings of translate, rotate, and scale are clear: to move, to spin, or to
stretch/shrink evenly in the *x* and/or *y* direction. Shear means to
stretch unevenly: an *x* shear moves points to the right, based on how far
they are from the *y-*axis; a *y* shear moves points down, based on
how far they are from the *x*-axis.

The easiest way to picture what is happening in a transformation is to imagine that the person doing the drawing has a picture frame that he lays down on top of a sheet of paper. The drawer always sits at the bottom of the frame. To apply a translation, you move the frame (also moving the drawer) and do the drawing in the new location. You then move the frame back to its original location, and what you now see is the final result. Similarly, for a rotation, you spin the frame (and the drawer), draw, then spin back to see the result. Similarly for scaling and shears: modify the frame without touching the underlying sheet of paper, draw, then reverse the process to see the final result.

An outside observer watching this process would see the frame move in the direction specified by the transformation but see the sheet of paper stay fixed. On the other hand, to the person doing the drawing, it would appear that the sheet of paper moved in the opposite way from that specified in the transformation but that he didn't move at all.

You can also perform complex transformations by directly manipulating the
underlying arrays that control the transformations. This type of manipulation is
a bit more complicated to envision than the basic translation, rotation,
scaling, and shear transformations. The idea is that a new point
(*x*_{2}, *y*_{2}) can be derived from an original
point (*x*_{1}, *y*_{1}) as follows:

Note that you can only supply six of the nine values in the transformation
array (the *m _{xx}* values). The coefficients

*m*

_{02}and

*m*

_{12}provide x and y

*translation*of the coordinate system. The other four transformation coefficients (

*m*

_{00},

*m*

_{01},

*m*

_{10},

*m*

_{11}) provide

*rotation*of the system. For the transformation to preserve orthogonality ("straightness" and "parallelness" of lines), the Jacobian (determinant) of the transformation matrix must equal 1. The bottom row is fixed at [ 0 0 1 ] to guarantee that the transformations does not rotate the shape out of the

*x*-

*y*plane (produce components along the

*z*-axis). There are several ways to supply this array to the

`AffineTransform`constructor; see the

`AffineTransform`API for details.

You use transformations in two basic ways—by creating an
`AffineTransform` object or by calling basic transformation methods. In
the first approach, you can create an `AffineTransform` object, set the
parameters for the object, assign the `AffineTransform` to the
`Graphics2D` object through `setTransform`, and then draw a
`Shape`. In addition, you can use the `AffineTransform` object on
a `Shape` to create a newly transformed `Shape` object. Simply
call the `AffineTransform` method, `createTransformedShape`, to
create a new transformed `Shape`. For complex transformations, creating
an `AffineTransform` object is an excellent approach because you can
explicitly define the transformation matrix.

**Core Note**

*You can apply a transformation to a Shape before drawing it. The
AffineTransform method createTransformedShape creates a new
Shape that has undergone the transformation defined by the
AffineTransform object. *

In the second approach, you can call `translate`, `rotate`,
`scale`, and `shear` directly on the `Graphics2D` object to
perform basic transformations. The transformations applied to
`Graphics2D` object are cumulative; each transform method is applied to
the already transformed `Graphics2D` context. For example, calling
`rotate(Math.PI/2)` followed by another call to
`rotate(Math.PI/2)` is equivalent to `rotate(Math.PI)`. If you
need to return to a previously existing transformation state, save the
`Graphics2D` context by calling `getTransform` beforehand, perform
your transformation operations, and then return to the original
`Graphics2D` context by calling `setTransform`. For example,

// Save current graphics context. AffineTransform transform = g2d.getTransform(); // Perform incremental transformations. translate(...); rotate(...); ... // Return the graphics context to the original state. g2d.setTransform(transform);

Listing 10.13 illustrates a beautiful example of continuously rotating the coordinate system while periodically writing the word "Java." The result is shown in Figure 10–9.

#### Listing 10.13 ` RotationExample.java`

import java.awt.*; /** An example of translating and rotating the coordinate * system before each drawing. */ public class RotationExample extends StrokeThicknessExample { private Color[] colors = { Color.white, Color.black }; public void paintComponent(Graphics g) { clear(g); Graphics2D g2d = (Graphics2D)g; drawGradientCircle(g2d); drawThickCircleOutline(g2d); // Move the origin to the center of the circle.g2d.translate(185.0, 185.0);for (int i=0; i<16; i++) { // Rotate the coordinate system around current // origin, which is at the center of the circle.g2d.rotate(Math.PI/8.0);g2d.setPaint(colors[i%2]); g2d.drawString("Java", 0, 0); } } public static void main(String[] args) { WindowUtilities.openInJFrame(new RotationExample(), 380, 400); } }

**Figure 10–9 A example of translating and rotating the coordinate system before drawing text.**

### Shear Transformations

In a shear transformation, the coordinate system is stretched parallel to one
axis. If you specify a nonzero *x* shear, then *x* values will be more
and more shifted to the right the farther they are from the
** y**-axis. For example, an

*x*shear of 0.1 means that the

*x*value will be shifted 10% of the distance the point is moved from the

*y*-axis. A

*y*shear is similar: points are shifted down in proportion to the distance they are from the

**-axis. In addition, both the**

*x**x-*and

*y*-axis can be sheared at the same time.

Probably the best way to visualize shear is in an example. The results for
Listing 10.14 are shown in Figure 10–10. Here, the *x* shear is
increased from a value of 0.0 for the first square to a value of +0.8 for the
fifth square. The *y* values remain unaltered.

#### Listing 10.14 ` ShearExample.java`

import javax.swing.*; import java.awt.*; import java.awt.geom.*; /** An example of shear transformations on a rectangle. */ public class ShearExample extends JPanel { private static int gap=10, width=100; private Rectangle rect = new Rectangle(gap, gap, 100, 100); public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D)g; for (int i=0; i<5; i++) { g2d.setPaint(Color.red); g2d.fill(rect); // Each new square gets 0.2 more x shear.g2d.shear(0.2, 0.0);g2d.translate(2*gap + width, 0); } } public static void main(String[] args) { String title = "Shear: x shear ranges from 0.0 for the leftmost" + "'square' to 0.8 for the rightmost one."; WindowUtilities.openInJFrame(new ShearExample(), 20*gap + 5*width, 5*gap + width, title); } }

**Figure 10–10 A positive x shear increases the shift in the x
coordinate axis as y increases. Remember, the positive y-axis goes from the
upper-left corner to the lower-left corner.**