Transcript 15-DrawingIntroAndMenusSpring13

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
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) {
super.paintComponent(g); // Always call this
Graphics2D g2 = (Graphics2D) g;
g2.drawString("Put this in g, which", 20, 20);
g2.drawString("is in Panel", 20, 40);
g2.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);
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
 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
 Send messages to g2
such as drawString draw
fill setColor and setFont
Rectangle2D body = // xcoord, ycoord, width, height
new Rectangle2D.Double(30.0, 70.0, 200.0, 50.0);
g2.draw(body);
Shape leftWheel = // xcoord, ycoord, width, height
new Ellipse2D.Double(50.0, 110.0, 50.0, 50.0);
g2.setColor(Color.BLACK);
g2.fill(leftWheel); // 30.0, 70.0: upper left corner
Font aFont = new Font("SansSerif", Font.BOLD, 16);
g2.setFont(aFont);
g2.setPaint(Color.MAGENTA);
g2.drawString("A car with no top", 45, 180);
Drawing
11
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
12
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
13
How do we load an image?
 java.awt contains a method that returns an image
from a file on your disk
Image img = ImageIO.read(new File("fileName"));
 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
14
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
15
Summary
 To draw a jpg or gif image
1.
2.
3.
4.
5.
6.
7.
Drawing
Extend JPanel
Declare Image instance variables in that class
Let the constructor initialize
Overide paintComponent
Call super.paintComponent()
get a Graphics2D object named g2 perhaps
send drawImage messages to g2
16
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
card1 = ImageIO.read(new
card2 = ImageIO.read(new
card3 = ImageIO.read(new
card4 = ImageIO.read(new
card5 = ImageIO.read(new
} catch (IOException e) {
e.printStackTrace();
}
File("images/ocean.jpg"));
File("images/14h.jpg"));
File("images/13h.jpg"));
File("images/12h.jpg"));
File("images/11h.jpg"));
File("images/10h.jpg"));
}
Drawing
17
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, null);
g2.drawImage(card1, 10, 10, null);
g2.drawImage(card2, 30, 15, null);
g2.drawImage(card3, 50, 20, null);
g2.drawImage(card4, 70, 25, null);
g2.drawImage(card5, 90, 30, null);
}
Drawing
18