Lesson 26: Drawing
Drawing a Line
In java, you place all of your drawing code in a JPanel’s paintComponent method. Then the
painting code automatically executes whenever the system indicates that the JPanel needs
to be painted (such as when it is first made visible).
A JPanel used for drawing acts somewhat like a piece of canvas, which overlays an easel
(the JFrame).1 For example, here’s a JPanel that draws a short diagonal line on itself
whenever its paintComponent method is called:
import javax.swing.*;
import java.awt.*;
1
public class DrawLine extends JPanel {
public void paintComponent (Graphics g) {
g.drawLine(0, 0, 50, 100);
3
}
}
2
1. Recall: the keyword extends followed by the class name JPanel means that this class,
DrawLine, is a subclass of JPanel. In other words, it has all of the methods and
instance variables that a JPanel has, in addition to any extra variables and methods
written as part of the DrawLine class.
2. The method signature, public void paintComponent (Graphics g), is where java
checks for drawing code. The Graphics object, g, is passed to the paintComponent
method by the java virtual machine. We never directly call the paintComponent
method from our code, so we do not need to worry about creating a graphics object. This
is somewhat like the Event objects that are associated with various EventListeners.
3. All drawing on the JPanel is done by the Graphics object methods. A Graphics object is
sort of like a paintbrush. It has lots of methods for drawing, such as drawLine, which
requires the endpoints of the line. In other words, drawLine(0, 0, 50, 100) draws a line
from (0, 0) to (50, 100). That is: top, left corner (origin) to 50 over and 100 down.
In order to actually see our line, we need a new class that instantiates a DrawLine and
adds it to a JFrame’s ContentPane:
import javax.swing.*;
import java.awt.*;
public class DrawLineOnMe extends JFrame {
public DrawLineOnMe () {
Container c = getContentPane();
1
Why not draw directly onto the JFrame? If you draw directly onto a JFrame, you have to take into account insets
for the framing. There is no “ScaleWidth” equivalent in a JFrame. Also, graphics embedded in a JPanel are more
easily ported to other projects.
1|©Joshua Britton
DrawLine d = new DrawLine();
c.add(d);
setSize(300, 300);
setVisible(true);
}
public static void main (String [] args) {
new DrawLineOnMe();
}
}
Here is the result:
Again, but with Only ONE Class
Notice that the drawing example above used two classes: an extension of JPanel named
DrawLine and an extension of JFrame named DrawLineOnMe. The same effect could be
achieved with one class that extends JPanel and creates a JFrame in the main method:
import javax.swing.*;
import java.awt.*;
public class DrawLineCombo extends JPanel {
public void paintComponent (Graphics g) {
g.drawLine(0, 0, 50, 100);
}
public static void main (String [] args) {
JFrame jf = new JFrame();
Container c = jf.getContentPane();
DrawLineCombo dlc = new DrawLineCombo();
c.add(dlc);
jf.setSize(300, 300);
2|©Joshua Britton
jf.setVisible(true);
}
}
Other Drawing Methods
Here are some more methods in the Graphics object:
drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)
Draws the outline of a circular or elliptical arc covering the specified rectangle. (x, y)
is the top left corner of a rectangle of dimensions width by height into which the arc is
drawn.
drawLine(int x1, int y1, int x2, int y2)
Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in
this graphics context's coordinate system.
drawImage(Image img, int x, int y, ImageObserver observer)
Draws as much of the specified image as is currently available.
drawOval(int x, int y, int width, int height)
Draws the outline of an oval. (x, y) is the top left corner of a rectangle of dimensions
width by height into which the oval is drawn.
drawPolygon(Polygon p)
Draws the outline of a polygon defined by the specified Polygon object.
drawRect(int x, int y, int width, int height)
Draws the outline of the specified rectangle.
drawString(String str, int x, int y)
Draws the text given by the specified string, using this graphics context's current font
and color. (x, y) is the bottom left corner of where the string is displayed.
setColor(Color c)
Sets this graphics context's current color to the specified color.
setFont(Font font)
Sets this graphics context's font to the specified font.
translate(int x, int y)
Translates the origin of the graphics context to the point (x, y) in the current
coordinate system.
There are many more methods that have the word “fill” instead of “draw”. They are used to
draw solid shapes instead of just outlines.
In order to draw a point, use drawLine and set the starting and ending point to the same
values.
3|©Joshua Britton
Here is an example of a JPanel that draws a few shapes and a string, all in different colors.
In order to see this JPanel, you would need to use one of the two techniques seen in the
earlier examples in this packet for creating a JFrame to contain the JPanel.
import javax.swing.*;
import java.awt.*;
public class DrawStuff extends JPanel {
public void paintComponent (Graphics g) {
g.setColor(Color.green);
1
g.drawRect(0, 0, 45, 45);
g.setColor(Color.red);
g.fillRect(50, 0, 45, 45);
g.setColor(Color.white);
g.fillArc(0, 50, 45, 45, 0, 90);
g.setColor(Color.magenta);
g.fillOval(50, 50, 95, 45);
g.setColor(Color.blue);
g.drawString("Look at this stuff", 0, 200);
}
}
1. The default Graphics drawing color is black. Use g’s setColor method to change the
current color.
Some of the Graphics methods require object parameters. We already know how to
reference a Color object, but the Polygon and Font objects are new. I will not cover Fonts in
this course: I leave that to you to explore on your own. Polygons, however, will play a
significant role in our drawings. We cannot cover them, however, until we learn how to
create arrays in java.
ASSIGNMENT
Diamond
description:
1. Write a class named DiamondPanel that draw four segments that form a diamond.
Use four colors. The diamond can be anywhere on the JFrame.
2. Write a class named DiamondFrame that creates and shows a DiamondPanel
instance.
Example:
4|©Joshua Britton
DiamondCombo
description: This will look the same as Diamond1, but only use one class. Name the class
DiamondCombo. See the second example in this packet for a guide.
DrawShapes
description: Draw lots of shapes. I advise ignoring the JButton/ActionListener (discussed
below) until you have the drawing working.
1. Write a class named DrawShapesPanel that extends JPanel. It should draw each of
the following filled shapes on itself:
a. oval (non-circular)
b. square
c. rectangle
d. circle
e. semi-circle (with filled part “up”)
f.
semi-circle (with filled part “down”)
g. a string
2. Write a class named DrawShapesFrame.
a. It should extend JFrame and implement ActionListener.
5|©Joshua Britton
b. It should have two components on it: a DrawShapesPanel instance and a
JButton.
c. The JButton toggles the visibility of the panel. You will need to use the JPanel’s
setVisible(boolean b) method.
Example
6|©Joshua Britton