C Sc 335 ObjectOriented Programming and Design Rick Mercer

1
C Sc 335 Object-Oriented Programming and Design
Rick Mercer
Presentation 8 Drawing
2
Outline

• Java's Coordinate System
• Drawing on a JPanel
• The Graphics2D Object
• paintComponent and repaint
• Drawing on a Graphics2D object
• draw and fill messages
• Strings, Lines, Rectangle, Ellipse, Polygons
• Colors
• Text and Fonts

3
Graphics

• 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 40 pixels from
  top
• 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

• Now you need to extend a class that extends
  JComponent
• JPanel is good
• To draw things
• extend JPanel
• have the class override the paintComponent method
• call super. paintComponent(g)
• This allows the JPanel to be repainted after
  being covered up by another window
• panel surface is transparent, so send drawing
  messages inside paintComponent to the graphic
  context

7
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

8
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
• public void paintComponent(Graphics g)
• Graphics2D g2 (Graphics2D)g
• g2.drawString("Put this in g, which", 20,
  20)
• g2.drawString("is in Panel1", 20, 40)
• g2.drawString("which is in MyFrame", 20,
  60)
• // Load up in Eclipse

9
Then add the JPanel to a JFrame

• import javax.swing.JFrame
• public class DrawOnAPanel
• public static void main(String args)
• JFrame f new JFrame("A Frame with a
  panel")
• f.setSize(200, 120)
• f.setDefaultCloseOperation(JFrame.EXIT_ON_CL
  OSE)
• f.getContentPane().add(new DrawingPanel())
  
• f.show()
• // Load up in Eclipse

10
But this is still not right!

• Drag another window over the previous JPanel
  inside a JFrame, it redraws strangely.
• To get this to work, call the superclass's
  paintComponent as follows
• public void paintComponent(Graphics g)
• // Call the superclasses paintComponent
• Graphics2D g2 (Graphics2D)g
• super.paintComponent(g) // Important
• g2.drawString("Put this in g, which", 20,
  20)
• g2.drawString("is in Panel1", 20, 40)
• // ...

11
Behind the scene details

• JPanel's paintComponent does important things
  that we don't want to lose, so call
  super.paintComponent
• or it wont refresh when another window moves
  over
• 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

12
The Graphics Context

• An object of the Graphics class represents a
  particular drawing surface
• It defines a graphics context in which drawn
  shapes will be rendered
• Graphics is still around, but jdk1.3 added the
  Java 2D Library
• Better drawing capabilities
• Like using Swing (JButton, JFrame) rather than
  the older awt components (Button, Frame)

13
drawString messages to Graphics2D

• Just saw a few drawString messages
• public void drawString(String s, int x, int
  y)This will draw s's first letter's bottom-left
  corner at the given location
• Note that it is BOTTOM left for strings
• g2.drawString(""Math.sqrt(2.0), 10, 30)

14
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(10.0, 40.0, 200.0,
  50.0)
• g2.draw(body)

15
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(30.0, 70.0, 50.0,
  50.0)
• g2.draw(s) // 30.0, 70.0 is the upper left
  corner
• You could also draw on a Graphics
  context with different messages
• Recommended use Graphics2D

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

17
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

18
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 drawing like this
• g2.setPaint(Color.blue)

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

20
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 this is in paintComponent
• Font aFont new Font("SansSerif", Font.BOLD,
  16)
• g2.setFont(aFont)
• g2.drawString("A car with no top", 10, 110)

21
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, 140)

22
Drawing Lines

• Line2D.Double(double x1, double y1, double x2,
  double y2)
• A line between two points (x1, y1) and (x2, y2)
• Line2D.Double line1 new Line2D.Double(10, 40,
  20, 10)
• Line2D.Double line2 new Line2D.Double(20, 10,
  80, 10)
• Line2D.Double line3 new Line2D.Double(80, 10,
  200,50)
• g2.draw(line1)
• g2.draw(line2)
• g2.draw(line3)

23
Ellipses

• 30 pixels over, 70 pixels down, this ellipse is a
  circle
• Ellipse2D leftWheel
• new Ellipse2D.Double(30, 70, 50, 50)
• g2.setPaint(Color.black)
• g2.fill(leftWheel)

24
Put it all together

• Answer in
• DrawWith2D.java

25
Drawing Polygons

• Need a polygon to draw the triangular shape of a
  spare.
• A Polygon needs 2 arrays of ints and size
• // Set up three points
• int xpoints new int3
• int ypoints new int3
• xpoints0 10
• ypoints0 10
• xpoints1 80
• ypoints1 30
• xpoints2 25
• ypoints2 60

26
java.awt.Polygon

• // Needs an array of x coordinate
• // an array of y coordinates, and
• // the number of points
• Polygon triangle new Polygon(xpoints,
  ypoints, 3)
• g2.setColor(Color.BLUE)
• g2.fill(triangle)