drawing - computer science · drawing 9 the graphics object paintcomponent's graphics g...
TRANSCRIPT
![Page 1: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/1.jpg)
1 Drawing
Drawing
C Sc 335 Object-Oriented Programming and Design
Rick Mercer
![Page 2: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/2.jpg)
2 Drawing
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
Toolkit to convert jpg and gif files into Images
![Page 3: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/3.jpg)
3 Drawing
Drawing with a Graphics Object
The use of graphics is common among modern
software systems
Java has strong support for graphics
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)
![Page 4: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/4.jpg)
4 Drawing
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
![Page 5: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/5.jpg)
5 Drawing
The Coordinate System
<0, 0>
<x, y>
<width-1, height-1>
x
y
Y
X
![Page 6: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/6.jpg)
6 Drawing
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
a Graphics2D object we'll reference with g2
![Page 7: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/7.jpg)
7 Drawing
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);
}
}
![Page 8: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/8.jpg)
8 Drawing
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());
}
}
![Page 9: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/9.jpg)
9 Drawing
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
send repaint() messages instead
![Page 10: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/10.jpg)
10 Drawing
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
Better drawing capabilities
It is analogous to using swing (JButton, JFrame)
rather than older awt components (Button, Frame)
![Page 11: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/11.jpg)
11 Drawing
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);
You can send messages to g2 such as drawString,
draw(Shape), setColor, setBackground
![Page 12: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/12.jpg)
12 Drawing
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);
![Page 13: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/13.jpg)
13 Drawing
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
Recommended: use Graphics2D
![Page 14: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/14.jpg)
14 Drawing
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 g2.setPaint(aColor)
![Page 15: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/15.jpg)
15 Drawing
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
![Page 16: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/16.jpg)
16 Drawing
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);
![Page 17: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/17.jpg)
17 Drawing
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.setPaint(Color.BLUE);
g2.draw(body); g2.fill(body);
![Page 18: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/18.jpg)
18 Drawing
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
![Page 19: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/19.jpg)
19 Drawing
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?
![Page 20: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/20.jpg)
20 Drawing
Drawing Images in Java
![Page 21: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/21.jpg)
21 Drawing
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
![Page 22: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/22.jpg)
22 Drawing
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…
![Page 23: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/23.jpg)
23 Drawing
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);
![Page 24: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/24.jpg)
24 Drawing
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
![Page 25: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/25.jpg)
25 Drawing
Summary
To draw a jpg or gif image 1. Extend JPanel
2. Declare Image instance variables in that class
3. Let the constructor initialize
4. Overide paintComponent
5. get a Graphics2D object named g2 perhaps
6. send drawImage messages to g2
![Page 26: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/26.jpg)
26 Drawing
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();
}
}
![Page 27: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/27.jpg)
27 Drawing
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);
}
![Page 28: Drawing - Computer Science · Drawing 9 The Graphics Object paintComponent's Graphics g argument represents a "graphical context" object. You can tell it to draw things on the panel](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5f01c0a17e708231d400ddef/html5/thumbnails/28.jpg)
28 Drawing
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);
}
}