C Sc 335 ObjectOriented Programming and Design Rick Mercer

1
C Sc 335 Object-Oriented Programming and Design
Rick Mercer
Drawing
2
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

3
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)

4
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 lt0, 0gt
• // 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

5
The Coordinate System
6
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

7
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
• _at_Override
• public void paintComponent(Graphics 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)

8
Then add the JPanel to a JFrame

• import javax.swing.JFrame
• public class DrawOnAPanel extends JFrame
• public static void main(String args)
• new DrawOnAPanel().setVisible(true)
• public DrawOnAPanel()
• setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
  
• setTitle("A Frame with a panel")
• setSize(200, 120)
• getContentPane().add(new DrawingPanel())

9
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 have another method to draw, pass the
  Graphics object
• The actual object passed to every JPanel is a
  JPanel Graphics2D, so you can cast to Graphics2D
• You can not send paintcomponent messages, use
  repaint

10
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 the older awt components (Button,
  Frame)

11
First cast Graphics to Graphics2D

• public class DrawingPanel extends JPanel
• // Override the paintComponent method
• public void paintComponent(Graphics g)
• // Cast g to a Graphics2D object
• Graphics2D g2 (Graphics2D)g
• Now you can send messages to g2 such as
  drawString, draw(Shape), setColor, setBackground

12
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)

13
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

14
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)

15
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

16
A Few Predefined Colors

• You can create your own or use the constants in
  the Color class
• Color.RED
• Color.WHITE
• Color.BLUE
• Color.YELLOW
• Color.PINK
• Color.MAGENTA
• Set future painting color like this
• g2.setPaint(Color.BLUE)

17
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.B
  LUE)
• g2.draw(body) g2.fill(body)

18
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 the code shown on the next slide
  is in paintComponent

19
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)