This chapter is from the book
This chapter is from the book
This chapter is from the book
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 (x2, y2) can be derived from an original point (x1, y1) as follows:
Note that you can only supply six of the nine values in the transformation array (the mxx values). The coefficients m02 and m12 provide x and y translation of the coordinate system. The other four transformation coefficients (m00, m01, m10, m11) 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.
){kind=link}
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 x-axis. In addition, both the 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.
){kind=link}
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.