Drawing
C Sc 335 Object-Oriented Programming and Design
Rick Mercer
Drawing
1
Outline
 Drawing with a Graphics object

Graphics and Graphics2D

paintComponent and repaint

draw and fill messages

Strings, Lines, Rectangle, Ellipse, Polygons
Colors
Text and Fonts


 Drawing Images

Drawing
Toolkit to convert jpg and gif files into Images
2
Drawing with a Graphics Object
 The use of graphics is common among modern
software systems
 Java has strong support for graphics






Drawing
coordinate system for Java graphics
drawing shapes such as lines, ovals, rectangles, ...
basic animation techniques
the use of color
the use of fonts
drawing images (.gif files for example)
3
The Coordinate System
 A simple two-dimensional coordinate system exists for
each graphics context or drawing surface
 Each point on the coordinate system represents a single
pixel
 top left corner of the area is coordinate <0, 0>
// This string will be drawn 20 pixels right,
// 40 pixels down as the lower left corner;
// other shapes are upper right
g2.drawString("is in Panel1", 20, 40);
 A drawing surface has a width and height
 Anything drawn outside of that area is not visible
Drawing
4
The Coordinate System
<0, 0>
x
X
y
<x, y>
<width-1, height-1>
Y
Drawing
5
Draw on a JPanel
 Need to extend a class that extends JComponent

JPanel is good
 To draw things:



extend JPanel
have the class override the paintComponent method
panel surface is transparent, so send drawing messages
inside paintComponent to the graphic context

Drawing
a Graphics2D object we'll reference with g2
6
Put something in a JPanel
 Implement a JPanel class and draw a few strings
import java.awt.*;
public class DrawingPanel extends javax.swing.JPanel {
// Override the paintComponent method in JPanel
@Override
public void paintComponent(Graphics g) {
g.drawString("Put this in g, which", 20, 20);
g.drawString("is in Panel", 20, 40);
g.drawString("which is in MyFrame", 20, 60);
}
}
Drawing
7
Then add the JPanel to a JFrame to see
the drawing
import javax.swing.JFrame;
public class DrawOnAPanel extends JFrame {
public static void main(String[] args) {
new DrawOnAPanel().setVisible(true);
}
public DrawOnAPanel() {
setTitle("A Frame with a panel");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(200, 120);
getContentPane().add(new DrawingPanel());
}
}
Drawing
8
The Graphics Object
 paintComponent's Graphics g argument
represents a "graphical context" object.


You can tell it to draw things on the panel
If you want another method to draw, pass the Graphics
object to it—it like a canvas that understands draws
 The actual object passed to every JPanel is a
Graphics2D, so you can cast to Graphics2D
 Never send paintcomponent messages

Drawing
send repaint() messages instead
9
The Graphics Context
 An object of the Graphics class represents a
particular drawing surface

It defines a graphics context in which shapes will be
rendered
 Graphics is still around, but Java added an
improved 2D Library in Java 1.3, use Graphics2D


Drawing
Better drawing capabilities
It is analogous to using swing (JButton, JFrame)
rather than older awt components (Button, Frame)
10
First cast Graphics to
Graphics2D
// Override the paintComponent method in JPanel
@Override
public void paintComponent(Graphics g) {
// Graphics2D is a newer drawing context added after
// Graphics was around for a while. Graphics2D has
// more and better messages
Graphics2D g2 = (Graphics2D) g;
g2.drawString("Put this in g, which", 20, 20);

Drawing
You can send messages to g2 such as drawString,
draw(Shape), setColor, setBackground
11
Classes from java.awt.geom
 The Rectangle2D.Double class (an inner class)

First 2 Arguments are the UPPER left corner
// Use the static Double inner class of Rectangle2D
// Floating point numbers are double by default
Rectangle2D body = // xcoord, ycoord, width, height
new Rectangle2D.Double(30.0, 70.0, 200.0, 50.0);
g2.draw(body);
Drawing
12
draw Messages to Graphics2D
 Can also draw any object that implements the Shape interface
 public void draw(Shape s)
Draws outline of the shape using this Graphics2D's current pen color
Shape leftWheel = // xcoord, ycoord, width, height
new Ellipse2D.Double(50.0, 100.0, 50.0, 50.0);
g2.draw(leftWheel); // 30.0, 70.0 is the upper left corner
 You could also draw on a Graphics
context with different messages

Drawing
Recommended: use Graphics2D
13
Color
 The Color class is used to define and manage the
color in which shapes are drawn
 Colors are defined by their RGB value, which
defines the relative contribution of the primary
colors red, green, and blue
 The setPaint method of the Graphics2D
defines the color used in future draw messages

Drawing
g2.setPaint(aColor)
14
Color
 The Color class contains several predefined colors,
defined as public final static ints (class constants)
 Many other colors can be defined using the
constructor of the Color class
 Over 16 million colors can be defined, but we
cannot distinguish between that many
Color(int r, int g, int b)
Creates a color with the specified red, green, and blue values in range (0 - 255)
 Furthermore, the hardware of most systems has
limitations to the color options available
Drawing
15
A Few Predefined Colors
 You can create your own or use the constants in the
Color class
Color.WHITE
Color.RED
Color.BLUE
Color.YELLOW
Color.PINK
Color.MAGENTA
Set future painting color like this
g2.setPaint(Color.BLUE);
Drawing
16
fill
 draw(shape) draws an outline of the shape
 fill(shape) draws an outline of the shape and then
fills it with whatever color is set
g2.setPaint(Color.GREEN);
g2.draw(body);
Drawing
g2.setPaint(Color.BLUE);
g2.fill(body);
17
Fonts
 A Font object is constructed with 3 arguments to
indicate the



logical font names such as "SansSerif"
style such as Font.PLAIN and Font.BOLD
font size (10 is small, 30 is big)
 Then send a setFont message to the Graphics2D
object
assume code shown on next slide is paintComponent
Drawing
18
Drawing strings with
Graphics2D
Font aFont = new Font("SansSerif", Font.BOLD, 16);
g2.setFont(aFont);
g2.setPaint(Color.MAGENTA);
g2.drawString("A car with no top", 45, 180);
How would you draw a solid black wheel that can be seen?
Drawing
19
Drawing Images in Java
Drawing
20
So far…
 We know how to subclass a JPanel and use a
Graphics2D object as a drawing canvas inside the
paintComponent method.
 Sometimes we need to use an existing image rather
than draw something ourselves
Drawing
21
Drawing an Image
 Java’s Image class in java.awt abstracts a bitmap
image for use in drawing.
 Images can be drawn to a panel through a Graphics
object
 An important Graphics2D method:

drawImage
 But first…
Drawing
22
How do we load an image?
 java.awt now contains a method
Image img = ImageIO.read(new File("fileName"));
 It is used to load an image file from disk
 Once we have an image and a graphics object,
we can draw it
// some other drawing code
// 'g2' is a Graphics context object and img
// is an initialized Image. 12 is x, 24 is y pixels
g.drawImage(img, 12, 24, null);
Drawing
23
Drawing Our Image
 This code will draw img at the coordinates
(12, 24) on the panel
 The final ‘null’ is for an ImageObserver
object, which we'll not need
Drawing
24
Summary
 To draw a jpg or gif image
1.
2.
3.
4.
5.
6.
Drawing
Extend JPanel
Declare Image instance variables in that class
Let the constructor initialize
Overide paintComponent
get a Graphics2D object named g2 perhaps
send drawImage messages to g2
25
Example code that needs
6 jpg files in images
public class CardsOnTheWater extends JPanel {
private Image ocean, card1, card2, card3, card4, card5;
public CardsOnTheWater() {
try {
ocean = ImageIO.read(new File("images/ocean.jpg"));
card1 = ImageIO.read(new File("images/14h.jpg"));
card2 = ImageIO.read(new File("images/13h.jpg"));
card3 = ImageIO.read(new File("images/12h.jpg"));
card4 = ImageIO.read(new File("images/11h.jpg"));
card5 = ImageIO.read(new File("images/10h.jpg"));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
Drawing
26
This method is called when the
panel needs to be redrawn
@Override
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.drawImage(ocean, 0, 0, this);
g2.drawImage(card1, 10, 10, this);
g2.drawImage(card2, 30, 15, this);
g2.drawImage(card3, 50, 20, this);
g2.drawImage(card4, 70, 25, this);
g2.drawImage(card5, 90, 30, this);
}
Drawing
27
Still need to Add JPanel to a JFrame
import javax.swing.JFrame;
import javax.swing.JPanel;
public class DrawCardsOnWaterMain extends JFrame {
public static void main(String[] args) {
new DrawCardsOnWaterMain().setVisible(true);
}
public DrawCardsOnWaterMain() {
setSize(250, 250);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new CardsOnTheWater();
add(panel);
}
}
Drawing
28