The Java Lesson 30: Drawing geometric shapes

JavaFAQ Home » Java Lessons by Jon Huhtala

All Java Lessons contents page | Java Lesson 1 | Java Lesson 2 | Java Lesson 3 | Java Lesson 4 | Java Lesson 5 | Java Lesson 6 | Java Lesson 7 | Java Lesson 8 | Java Lesson 9 | Java Lesson 10 | Java Lesson 11 | Java Lesson 12 | Java Lesson 13 | Java Lesson 14 | Java Lesson 15 | Java Lesson 16 | Java Lesson 17 | Java Lesson 18 | Java Lesson 19 | Java Lesson 20 | Java Lesson 21 | Java Lesson 22 | Java Lesson 23 | Java Lesson 24 | Java Lesson 25 | Java Lesson 26 | Java Lesson 27 | Java Lesson 28 | Java Lesson 29 | Java Lesson 30 | Java Lesson 31 | Java Lesson 32 | Java Lesson 33 | Java Lesson 34 | Java Lesson 35 | Java Lesson 36 | Java Lesson 37 | Java Lesson 38 | Java Lesson 39 | Java Lesson 40 | Java Lesson 41 | Java Lesson 42 | Java Lesson 43 | Java Lesson 44 | Java Lesson 45 | Java Lesson 46

Java Lesson 30 by Jon Huhtala: Drawing geometric shapes

Drawing overview

• Drawing can be performed on any subclass of the Component class. By so doing, a programmer can create customized buttons, labels, scrollbars, etc. For general drawing, the Canvas class is useful. It extends Component to represent a blank rectangular area of the screen onto which the application can draw or from which the application can trap input events from the user.

• The paint() method of the component must be overridden to perform custom drawing. It receives a Graphics object as a parameter (to be discussed shortly). For example, the technique for defining a customized Button is to code something like this

public class CustomButton extends Button {
public void paint(Graphics g) {

custom drawing code goes here...

}
}

To instantiate a customized CustomButton object would only require a single statement such as

CustomButton myButton = new CustomButton();

Through inheritance, myButton would have all the features of a Button object. It would also be automatically rendered when necessary by the JVM through internal calls to its customized paint() method.

Note: An application should never call a component's paint() method directly. It should request painting by calling repaint() instead.

• To keep device dependencies out of application code, a Java application never works directly with the display screen. Instead, it acts upon a graphics context (a pseudo display). The Java Virtual Machine maps changes to the graphics context to the actual display screen.

Application

<->

context

<->

JVM

<->

display

The paint() method automatically receives an object of the Graphics class as a parameter. This object represents the graphics context of the component and encapsulates methods for drawing within that context.

Every pixel in the component's context has a unique set of x-axis and y-axis coordinates with the origin located in the top-left corner. For example, the context of a component that is 300 pixels wide and 400 pixels high may be visualized as follows:

(0, 0)	x-axis	(299, 0)
y-axis
(0, 399)		(299, 399)

The Graphics class

• Is part of the java.awt package

• Is an extension of the Object class

Object
	Graphics

• Permits drawing onto components that are realized on various devices, as well as onto off-screen images. It encapsulates state information needed for the basic rendering operations that Java supports.

• Has numerous methods that are relatively easy to use and have descriptive names. Commonly used methods are:

Method	Usage
clearRect()	Clears a specified rectangle by filling it with the background color of the component
drawArc()	Draws the outline of a circular or elliptical arc within a specified rectangle
drawLine()	Draws a line between two points
drawOval()	Draws the outline of an oval within a specified rectangle
drawRect()	Draws the outline of a specified rectangle
drawString()	Draws the text of a specified string using the graphics context's current font and color
fillArc()	Draws a filled circular or elliptical arc within a specified rectangle
fillOval()	Draws a filled oval within a specified rectangle
fillRect()	Draws a filled rectangle
getColor()	Gets the graphics context's current color
getFont()	Gets the graphics context's current font
setColor()	Sets the graphics context's current color
setFont()	Sets the graphics context's current font

Many methods require you to specify the x-axis and y-axis coordinates of where an action is to occur. These may be coded as integer literals, variables, or expressions. Consult the help facility of your Java development environment or the Java API for details.

Example:

import java.awt.*;
import java.awt.event.*;

public class App extends Frame implements WindowListener {

public class MyCanvas extends Canvas {
public void paint(Graphics g) {
g.setColor(Color.yellow);
g.fillOval(10,10,50,50);
g.setColor(Color.black);
g.drawOval(10,10,50,50);
g.fillOval(20,28,8,;
g.fillOval(40,28,8,;
g.drawArc(25,35,20,15,190,160);
g.setFont(new Font("SanSerif", Font.BOLD + Font.ITALIC, 16));
g.setColor(Color.blue);
g.drawString("Have a happy day!", 10, 80);
g.setColor(Color.red);
g.drawLine(10,84,150,84);
}
}

MyCanvas picture;

public static void main(String[] args) {
App myWindow = new App("Smiley");
myWindow.setSize(180,130);
myWindow.setVisible(true);
}

public App(String title) {
super(title);
addWindowListener(this);
picture = new MyCanvas();
add(picture);
}

public void windowClosing(WindowEvent e) {
dispose();
System.exit(0);
}

public void windowOpened(WindowEvent e) {}
public void windowActivated(WindowEvent e) {}
public void windowIconified(WindowEvent e) {}
public void windowDeiconified(WindowEvent e) {}
public void windowDeactivated(WindowEvent e) {}
public void windowClosed(WindowEvent e) {}
}

Notes:

1. This sample defines an inner class named MyCanvas that extends Canvas and overrides the inherited paint() method. The statements within this method use the graphics context to draw the head, eyes, and mouth of a smiley face, draw a text message, and draw a line under the message.

2. For drawing shapes, the top-left corner is used for positioning. For drawing text, the bottom-left corner is used for positioning.

3. The application's constructor instantiates a MyCanvas object and adds it to the application container. Rendering of the object is automatic.

4. Any valid component could have been extended by the MyCanvas class. For instance, if Button had been extended, the object created by the application constructor would be a button. Try it!

Lab exercise for Ferris students

E-mail your answers to this assignment no later than the due date listed in the class schedule.

Review questions

1. Assume that all unseen code is correct and that g references the graphics context of a component that is 200 pixels wide and 200 pixels high. Which of the following statements are true of executing this code? (choose three)

g.drawString("Hello World!",50,50); g.fillRect(50,50,100,100);

1. the text will be outside the rectangle

2. the text will be inside the rectangle

3. the text will be hidden by the rectangle

4. the rectangle will be filled with color

5. the rectangle and text will have the same color

2. If g references the graphics context of a component that is 100 pixels wide and 50 pixels high, code a single statement to draw a diagonal line in the current color from the bottom-left corner to the top-right corner of the component.

3. If g references the graphics context of a component that is 100 pixels wide and 100 pixels high, which of the following will draw a solid red arc in the top-left quadrant of a ellipse? (choose two)

1. g.setColor(Color.red);
   g.fillArc(50,50,100,100,180,-90);

2. g.setColor(Color.red);
   g.drawArc(50,50,100,100,90,90);

3. g.setColor(Color.red);
   g.fillArc(50,50,100,100,180,90);

4. g.setColor(Color.red);
   g.fillArc(50,50,100,100,90,90);

5. g.setColor(Color.red);
   g.fillArc(50,50,100,100,90,-90);

4. Assuming that all unseen code is correct, what does the following paint() method draw?

public void paint(Graphics g) {
g.setColor(Color.green);
g.fillRect(0,0,100,100);
g.setColor(Color.white);
g.drawOval(1,1,98,9;
}

1. The statements will not compile

2. a white circle within a solid green square

3. a white ellipse that is wider than it is tall inside a solid green square

4. a solid white circle within a solid green square

5. a solid white ellipse that is wider than it is tall inside a solid green square

Custom Search