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,8);
g.fillOval(40,28,8,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:
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.
For drawing shapes, the top-left corner is used for positioning. For drawing text, the bottom-left corner is used for positioning.
The application's constructor instantiates a MyCanvas object and adds it to the application container. Rendering of the object is automatic.
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!
Review questions
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);
the text will be outside the rectangle
the text will be inside the rectangle
the text will be hidden by the rectangle
the rectangle will be filled with color
the rectangle and text will have the same color
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.
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)
g.setColor(Color.red);
g.fillArc(50,50,100,100,180,-90);
g.setColor(Color.red);
g.drawArc(50,50,100,100,90,90);g.setColor(Color.red);
g.fillArc(50,50,100,100,180,90);g.setColor(Color.red);
g.fillArc(50,50,100,100,90,90);g.setColor(Color.red);
g.fillArc(50,50,100,100,90,-90);
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,98);
}
The statements will not compile
a white circle within a solid green square
a white ellipse that is wider than it is tall inside a solid green square
a solid white circle within a solid green square
a solid white ellipse that is wider than it is tall inside a solid green square