Introducing Graphics

1
Introducing Graphics

• There are two types of graphics facilities in
  Java
• Drawing
• Graphical user interfaces (GUIs)
• Well concentrate on drawing today
• Graphics objects are only available within
  certain contexts JFrames and JApplets
• JFrame a window displayed by a standalone
  application
• JApplet a window that can be displayed from
  another application (e.g. from a web browser)
• We will usually use JFrames for our graphical
  programs

2
Introducing Graphics

• We will normally add one more JPanels to our
  JFrame.
• There are two important things that we can do in
  a JPanel
• - Draw figures or pictures (which we will do
  today)
• - Add other GUI components, such as buttons and
  scroll bars (which we will do later in the camp)

3
Summary

• JFrame a window that our program creates
• JPanel a drawing surface that we put inside of
  the window

4
Graphics Skeleton
import java.awt. import javax.swing. public
class GraphicsSkeleton private static final
int X_SIZE 100, Y_SIZE 100 public static
void main(String args) JFrame frame new
JFrame() frame.setDefaultCloseOperation(JFrame.
EXIT_ON_CLOSE) frame.setSize(X_SIZE,
Y_SIZE) GraphicsPanel panel new
GraphicsPanel() frame.getContentPane().add(pane
l) frame.setVisible(true) private
static class GraphicsPanel extends
JPanel public void paintComponent(Graphics
g) super.paintComponent(g) // Add
drawing code here.
5
Graphics Methods

• drawLine(x1, y1, x2, y2)
• ltx1, y1gt is the source point, ltx2, y2gt is the
  destination point
• drawRect(x, y, width, height) and fillRect(x, y,
  width, height)
• Draw/fill rectangle starting at ltx, ygt with width
  and height as specified
• draw3DRect/fill3DRect(x, y, width, height, bool)
• Bool is true or false denoting whether the
  rectangle is raised (true) or indented (false)
• drawRoundRect/fillRoundRect(x, y, width, height,
  awd, aht)
• The corners of the rectangle are rounded using
  awd and aht as the height and width of the arc
  for the corners
• drawOval/fillOval(x, y, width, height)
• draws or fills an oval that fills a bounded box
  starting at point ltx, ygt with height and width as
  specified
• drawString(str, x, y)
• prints the String str at point ltx, ygt
• NOTE x1, y1, x2, y2, x, y, width, height, awd
  and aht are all int values

6
Additional Graphics Methods

• setColor(col)
• changes the current drawing color, col must be of
  type Color and is usually denoted as Color.name
  such as Color.blue or Color.red
• or create a color using RGB values as in new
  Color(128, 255, 0)
• setFont(ft)
• changes the font for drawString commands to a
  different font, ft must be of type Font (see
  pages 398 399 for examples)
• drawPolygon/fillPolygon(x , y , num)
• draws/fills a polygon of ltx, ygt points where each
  point is stored as one element in each of arrays
  x and y, and where there are num points
• drawArc/fillArc(x, y, width, height, sAngle,
  aAngle)
• like draw/fillOval but only draws a portion based
  on the two angles provided
• drawImage(src, x, y, width, height, col, obsv)
• used to display an image src (gif, jpg) col is
  the background color for any transparent pixels,
  and obsv is an ImageObserver, use this
• Note col is a Color, ft is a Font, x and y
  are arrays of ints, num, x, y, width, height,
  sAngle, aAngle, are all ints, and obsv should be
  this

7
A Graphics Example
protected void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.B
LUE) g.drawLine(20, 30, 140, 90) g.drawString(
"Line", 70, 110) g.setColor(Color.BLACK) g.
drawRect(160, 30, 120, 60) g.drawString("Rectang
le", 190, 110) g.setColor(Color.GREEN) g.dr
awOval(20, 140, 120, 60) g.drawString("Oval",
70, 230) g.setColor(new Color(155, 0,
255)) // purple g.fillOval(180, 130, 80, 80)
// a circle g.drawString("Disc", 210,
230) g.setColor(Color.RED) g.setFont(new
Font("Chicago", Font.ITALIC Font.BOLD,
40)) g.drawString("Whoo Hoo!", 40, 290)
8
More Examples
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.b
lue) g.drawRoundRect(10, 10, 200, 200, 25,
25) g.setColor(Color.green) g.drawRoundRect(40
, 40, 140, 140, 15, 15) g.setColor(Color.red)
g.drawRoundRect(70, 70, 80, 80, 10,
10) g.setColor(Color.yellow) g.fillRoundRect(1
00, 100, 20, 20, 5, 5)
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(new
Color(128, 64, 128)) g.draw3DRect(10, 10, 100,
100, false) g.draw3DRect(20, 20, 80, 80,
true) g.setColor(new Color(255, 0,
64)) g.fill3DRect(30, 30, 60, 60,
true) g.setColor(Color.white) g.fill3DRect(40,
40, 40, 40, false)
9
More Examples
public void paintComponent(Graphics
g) super.paintComponent(g) g.setFont(new
Font("Ariel", Font.BOLD, 20)) g.drawString("Hell
o", 10, 20) g.setFont(new Font("Chicago",
Font.ITALIC, 28)) g.drawString("Goodbye", 10,
40)
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.r
ed) int x 15, 30, 60, 25, 35, 45, 10, 30,
45, 20, 10, 25 int y 10, 25, 40, 55, 30,
15, 30, 45, 60, 45, 30, 10 g.fillPolygon(x, y,
12)
10
Stop Sign
protected void paintComponent(Graphics
g) super.paintComponent(g) // -- Fill a
red hexagon. -- g.setColor(Color.RED) // It
will be centered at coordinates 100,100. // Each
edge has length 90. // Each of the six
equilateral triangles in the hexagon has //
height 78 (ie. 90 sqrt(3) / 2 rounded to the
nearest integer). int x 10, 55, 145, 190,
145, 55 int y 100, 22, 22, 100, 178,
178 g.fillPolygon(x, y, 6) // continued
on next slide
11
Stop Sign (contd)
// -- Draw the word "STOP" -- g.setColor(Color.
WHITE) g.setFont(new Font("Arial", Font.BOLD,
54)) // The following statement tells us
how wide the word "STOP" // will be using the
current font. int stringWidth
g.getFontMetrics().stringWidth("STOP") //
The following statement tells us how tall a //
capital letter will be using the current
font. int stringHeight g.getFontMetrics().getAs
cent() g.drawString("STOP", 100 -
stringWidth / 2, 100 stringHeight / 2)
12
More Examples
public void paintComponent(Graphics
g) super.paintComponent(g) ImageIcon icon
new ImageIcon("flag.gif") Image image
icon.getImage( ) g.drawImage(image, 10, 10,
300, 200, Color.white, this)
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.b
lue) g.fillArc(10, 10, 100, 100, 0,
45) g.setColor(Color.red) g.fillArc(10, 10,
100, 100, 45, 45) g.setColor(Color.green) g.fi
llArc(10, 10, 100, 100, 90, 45) g.setColor(Color
.yellow) g.fillArc(10, 10, 100, 100, 135, 45)
13
Displaying a user requested playing card
Download and run the program DisplaySelectedCard.j
ava(along with cards.gif) from the web site.
14
Some Comments

• The paintComponent method is automatically called
  whenever
• the JPanel first appears on the screen
• so you dont need to call repaint( ) the first
  time you want the paintComponent method invoked
• the JPanel is resized or altered on the screen
• your code calls repaint( )
• Sizes, dimensions, end points, etc are all in
  terms of pixels, starting at lt0,0gt in the upper
  left hand corner of the JPanel

15
More on Fonts and Colors

• As stated earlier, you can specify a color by
  name (there are 13 of them see page 385)
• You can also generate a color by specifying the
  amount of red, green and blue as int values
  between 0 and 255
• new Color(x, y, z)
• You could use this in a setColor instruction such
  as
• g.setColor(new Color(255, 64, 128))
• Before drawing a String, you can specify a font
  by using new Font(type, style, size)
• type must be one of those available in your
  version of Java, you can find out what types are
  available using the code on page 385, but for
  now, stick to those listed in the book (e.g.,
  Ariel, Chicago, Times New Roman, SanSerif, Serif,
  etc)
• style will be one of Font.PLAIN, Font.BOLD or
  Font.ITALIC, you can also combine the latter two
  as Font.BOLD Font.ITALIC
• g.setFont(new Font(Times New Roman, Font.PLAIN,
  28)