Section2.3Drawing Shapes with a Graphics Object (Optional)
All of the instance methods of the String class that we examined return values. The length() method return an int value, and the concat() method returned a String. It is also very common for classes to define instance methods that perform actions but do not return a value. The Graphics object, g, that appears in Chapter 1’s HelloWorldCanvas is one example. The program is reproduced in Listing 2.3.1
/** File: HelloWorldCanvas program */
import javax.swing.JFrame; // Import class names
import java.awt.Graphics;
import java.awt.Canvas;
public class HelloWorldCanvas extends Canvas // Class header
{
public void paint(Graphics g) {
g.drawString("Hello, World!", 10, 10);
} // End of paint
public static void main(String[] args){
HelloWorldCanvas c = new HelloWorldCanvas();
JFrame f = new JFrame();
f.add(c);
f.setSize(300,300);
f.setVisible(true);
} // main
} // End of HelloWorldCanvas
Listing2.3.1.HelloWorldCanvas source code.
At this point we will not worry about the language features that enable the paint() method to draw on the Java Swing window. We will focus instead on the information needed to make good use of the g.drawString() method.
The first thing you should know is that, when the paint() method is executed, its parameter, g, refers to an instance of the Graphics class. Unlike our other examples involving variables that refer to objects, in this case there is no need to use a constructor to create an object of type Graphics. We can assume g already refers to such an object.
We already know that the statement g.drawString("Hello, World!",10,20); displays the String “Hello, World!” in the program window. In fact, it draws the string at the coordinate (10,20) in the window, which is 10 pixels from the left edge and 20 pixels from the top edge of the window. (A pixel is a dot on the console window that can be set to a certain color.)
In a graphics window, the point with coordinates (0,0) is at the top-left corner. The horizontal axis grows positively from left to right. The vertical axis grows positively from top to bottom (Figure 2.3.2).
Figure2.3.2.The point (0,0) is at the top left of the window,
With this information about g.drawString(), we can calculate where to display any message in the program window. For example, if we wish to display the message “Welcome to Java” 15 pixels below where “Hello, World!” is displayed we could use the statements
g.drawString("Hello, World!",10,20);
g.drawString("Welcome to Java",10,35);
in the body of HelloWorldCanvas’s paint() method. The result of these statements would appear as shown in Figure 2.3.3.
Figure2.3.3.“Hello, World!” is drawn at coordinate (10, 20) and “Welcome to Java” at (10, 35) on the JFrame.
Subsection2.3.1Graphics Drawing Methods
The Graphics class discussed in the previous section also has methods that can be used to draw geometric shapes in different colors. These methods can be used to create graphical user interfaces that are more interesting or to give a visual representation of data, such as a pie chart or a bar graph.
Figure2.3.4.The Graphics class.
There are two Graphics methods for drawing rectangles, fillRect() and drawRect() (Figure 2.3.4). The first draws a rectangle and fills it with the current drawing color and the second just draws the outline of the rectangle. Using the Graphics object, g, each of these is called in the same way as the drawString() method from the previous example. Each of these methods takes four int arguments, which specify the rectangle’s location and size. Thus, a call to fillRect() would take the form
g.fillRect(x,y,width,height);
where x and y arguments specify the location of the upper left corner of the rectangle as being x pixels from the left edge of the window and y pixels down from the top edge of the window. The width and height arguments specify the width and height of the rectangle in pixels. The drawRect() method also takes the same four arguments.
A Graphics object stores a single color for use in drawing shapes or displaying strings with drawString(). If we wish to draw an interesting scene in the JFrame, we need to understand how to use colors.
For a given Graphics object, such as g, the setColor() method will set its color for all subsequent drawing commands. The setColor() method takes, as an argument, an object of type Color. All we need to know about the Color class is that it is contained in the java.awt package and that it contains 13 constant Color objects corresponding to 13 common colors. Table 2.3.5 lists the 13 Color constants. Each name corresponds to the color it will represent in the program.
Table2.3.5.Predefined color constants in the Color class
Color.black
Color.green
Color.red
Color.blue
Color.lightGreen
Color.white
Color.cyan
Color.magenta
Color.yellow
Color.darkGray
Color.orange
Color.gray
Color.pink
To demonstrate how the new Graphics methods can be used for creating more interesting graphical programs, let’s develop a plan for displaying the two messages, “Hello, World!” and “Welcome to Java.”, on an JFrame, but this time we will draw the first inside a colored rectangle and the second inside a colored oval. For the rectangle, let’s use the drawRect() method to create its border. We can choose some arbitrary colors, say, cyan for filling the rectangle, blue for its border, and black for the string itself. In order to have the message visible we should fill a rectangle with the color cyan first, then draw the border of the rectangle in blue and, finally, display the message in black.
Drawing and filling a Graphics oval is very similar to drawing and filling a rectangle. Notice in Figure 2.8 that the fillOval() and drawOval() methods take the same four arguments as the corresponding rectangle methods. An oval is inscribed within an enclosing rectangle. The x and y arguments give the coordinates of the enclosing rectangle’s top left point. And the width and height arguments give the enclosing rectangles dimensions.
All that remains is to choose the location and dimensions of the rectangles. We could specify one rectangle as having its upper left corner 25 pixels to the right of the left edge of the JFrame and 25 pixels down from the top edge. A medium sized rectangle could have a width of 140 pixels and a height of 40 pixels. The statement
g.fillRect(25, 25, 140, 40);
will fill this rectangle with whatever color happens to be g’s current color. A location 25 pixels to the right of the left edge of the rectangle and 25 pixels down from the top edge of the rectangle would have coordinates x = 50 and y = 50 . Thus, the statement
g.drawString("Hello, World!", 50, 50);
will display “Hello, World!” inside the rectangle. We can use similar planning to locate the oval and its enclosed message.
Activity2.3.1.
The completed program is displayed in Listing 2.3.6.
import java.awt.*;
import javax.swing.JFrame;
public class HelloWorldCanvas extends Canvas
{
public void paint(Graphics g) {
g.setColor(Color.cyan); // Set color
g.fillRect(25, 25, 140, 40); // Fill rectangle
g.setColor(Color.blue); // Set color
g.drawRect(25, 25, 140, 40); // Outline rectangle
g.setColor(Color.black); // Set color
g.drawString("Hello, World!", 50, 50); // Display string
g.setColor(Color.yellow);
g.fillOval(25, 75, 140, 40); // Fill oval
g.setColor(Color.red);
g.drawOval(25, 75, 140, 40); // Outline oval
g.setColor(Color.black);
g.drawString("Welcome to Java", 50, 100);
}//paint()
public static void main(String[] args){
HelloWorldCanvas c = new HelloWorldCanvas();
JFrame f = new JFrame();
f.add(c);
f.setSize(300, 300);
f.setVisible(true);
} //main
} //HelloWorldCanvas
Listing2.3.6.The HelloWorldCanvas class is a Java Swing program that shows how to use color and drawing methods.
You can run this Java Swing application below. Note how we repeatedly use the g.setColor() method to change g’s current color before drawing each element of our picture. Can you change the colors and the width of the shapes?
You can fork (copy) and experiment with HelloWorldCanvas on replit.com, or download its source code and compile and run it on your computer. Figure 2.3.7 shows what this program looks like. Additional drawing capabilities will be explored throughout the text in sections that can either be covered or skipped.
Figure2.3.7.Output from the HelloWorldCanvas program.
