Graphics and Java2D

1
Graphics and Java2D

• Joe Komar

2
Overview

• Graphics contexts and graphics objects
• Color control
• Font control
• Drawing lines, rectangles, ovals, arcs, polygons,
  and polylines
• Java2D API
• Java2D Shapes

3
Graphics Coordinate System

• 0,0 is the upper left corner
• Each coordinate point represents one pixel
• All coordinate values are positive

x
0,0
X
y
x,y
Y
4
Coordinates Applet
import java.awt. import java.applet. public
class Coordinates extends Applet public
void paint (Graphics page) setSize
(300,200) page.drawRect (0, 0, 299,
199) page.drawLine (50, 50, 250, 100)
page.drawString ("lt50, 50gt", 25, 45)
page.drawString ("lt250, 100gt", 225, 115)
// method paint // class Coordinates
5
Output of Coordinates Applet
6
Graphics

• Graphics context enables drawing on the screen
• Graphics object manages a graphics context
• Graphics is an abstract class implemented on each
  platform
• Component class is primary superclass for Applet
  and JApplet

7
paint method of Component

• Accepts a Graphics object
• Must be overridden
• When Applet runs, calls init, start, then paint
  methods
• repaint method called by programmer, which calls
  the Components update then paint method

8
Colors

• Color class is part of java.awt
• Colors are defined by a mixture of Red, Blue, and
  Green
• RGB
• defined by three numbers ranging from (0,0,0) for
  black to (255,255,255) for white
• over 16 million colors available
• many systems cannot distinguish among so many
  colors
• Predefined colors (final static Color objects)
• e.g., Color.blue, Color.green, Color.cyan

9
Defining Colors

• Color (int red, int green, int blue)
• Integer values between 0 and 255
• Color (float red, float green, float blue)
• Decimal values between 0.0 and 1.0
• Color (int rgb)
• bits 0-7 represent blue, 8-15 represent green,
  16-23 represent red

10
Defining Colors

• Color brown new Color (107, 69, 38)
• brown.getBlue() returns 38 (getRed and getGreen)
• brown.brighter()
• returns a bit brighter Color
• brown.darker()
• returns a bit darker Color

11
Nature Applet

• import java.awt.
• import java.applet.
• public class Nature extends Applet
• public void paint (Graphics page)
• setBackground (Color.darkGray)
• page.setColor (Color.red)
• page.drawRect (10, 15, 125, 85)
• page.setColor (Color.green)
• page.drawString ("Nature's first green",
  25,45)
• page.setColor (Color.yellow)
• page.drawString ("is gold", 50, 75)
• // method paint
• // class Nature

12
Nature Applet Results
13
ShowColors Example
// Fig. 11.5 ShowColors.java // Demonstrating
Colors import java.awt. import
javax.swing. import java.awt.event. public
class ShowColors extends JFrame public
ShowColors() super( "Using colors"
) setSize( 400, 130 ) show()
14
ShowColors Example
public void paint( Graphics g ) //
set new drawing color using integers
g.setColor( new Color( 255, 0, 0 ) )
g.fillRect( 25, 25, 100, 20 )
g.drawString( "Current RGB " g.getColor(),
130, 40 ) // set new drawing color using
floats g.setColor( new Color( 0.0f, 1.0f,
0.0f ) ) g.fillRect( 25, 50, 100, 20 )
g.drawString( "Current RGB " g.getColor(),
130, 65 ) // set new drawing color using
static Color objects g.setColor( Color.blue
) g.fillRect( 25, 75, 100, 20 )
g.drawString( "Current RGB " g.getColor(),
130, 90 )
15
ShowColors Example
// display individual RGB values Color c
Color.magenta g.setColor( c )
g.fillRect( 25, 100, 100, 20 )
g.drawString( "RGB values " c.getRed() ", "
c.getGreen() ", " c.getBlue(),
130, 115 )
16
ShowColors Example
public static void main( String args )
ShowColors app new ShowColors()
app.addWindowListener( new
WindowAdapter() public void
windowClosing( WindowEvent e )
System.exit( 0 )
)
17
ShowColors Example
18
JColorChooser Dialog Box

• static method showDialog of class JColorChooser
  presents dialog
• Can choose by color swatch hue, saturation and
  brightness (HSB) or by red, green, blue (RGB)
• Returns the Color object chosen
• See example run...

19
Fonts

• Uses currently supported fonts on the system
• Constructor takes String font-name, int style,
  int size
• Styles - Font.PLAIN, Font.BOLD, Font.ITALIC
• Size is number of points (1/72nd of an inch)

20
Fonts Example
// Fig. 11.9 Fonts.java // Using fonts import
java.awt. import javax.swing. import
java.awt.event. public class Fonts extends
JFrame public Fonts() super(
"Using fonts" ) setSize( 420, 125 )
show()
21
Fonts Example
public void paint( Graphics g ) //
set current font to Serif (Times), bold, 12pt
// and draw a string g.setFont( new Font(
"Serif", Font.BOLD, 12 ) ) g.drawString(
"Serif 12 point bold.", 20, 50 ) // set
current font to Monospaced (Courier), //
italic, 24pt and draw a string g.setFont(
new Font( "Monospaced", Font.ITALIC, 24 ) )
g.drawString( "Monospaced 24 point italic.", 20,
70 ) // set current font to SansSerif
(Helvetica), // plain, 14pt and draw a
string g.setFont( new Font( "SansSerif",
Font.PLAIN, 14 ) ) g.drawString(
"SansSerif 14 point plain.", 20, 90 )
22
Fonts Example
// set current font to Serif (times),
bold/italic, // 18pt and draw a string
g.setColor( Color.red ) g.setFont(
new Font( "Serif", Font.BOLD Font.ITALIC, 18
) ) g.drawString( g.getFont().getName()
" " g.getFont().getSize()
" point bold italic.", 20,
110 )
23
Fonts Example
public static void main( String args )
Fonts app new Fonts()
app.addWindowListener( new
WindowAdapter() public void
windowClosing( WindowEvent e )
System.exit( 0 )
)
24
Fonts Example
25
Font Metrics

• Height -- total size
• Ascent -- basic character size
• Leading -- above character
• Descent -- below character
• Methods to get these as well as getFontMetrics to
  return a FontMetrics object

26
Drawing Shapes

• Lines, ovals, rectangles, arcs, polygons, and
  polylines
• circle is a specific kind of oval
• square is a specific kind of rectangle
• polygons include any many-sided shapes
• polylines are lines connected end-to-end
• Most shapes can be drawn filled or unfilled
• e.g. drawOval versus fillOval

27
Ovals

• drawOval (int x, int y, int width, int height)
• fillOval (int x, int y, int width, int height)

width
height
28
Ovals as Spinning Disk
import java.awt. import java.applet. public
class Rotating_Disk extends Applet public
void paint (Graphics page) int width
0, height 40 int x 100, y 100,
warp 1 page.setXORMode
(getBackground()) for (int change 1
change lt 1000 change) width
warp 2 x - warp if
(width 0 width 40) warp
-1 page.fillOval (x, y, width,
height) for (int pause 1 pause lt
500000 pause) page.fillOval (x,
y, width, height) // for loop //
method paint // class Rotating_Disk
29
Spinning Disk In Action

• Rotating Disk Applet

30
Rectangles

• drawRect (int x, int y, int width, int height)
• fillRect (int x, int y, int width, int height)
• clearRect (int x, int y, int width, int height)
• drawRoundRect (int x, int y, int width, int
  height, int arc_width, int arc_height)
• fillRoundRect (int x, int y, int width, int
  height, int arc_width, int arc_height)
• draw3DRect (int x, int y, int width, int height,
  boolean raised)
• draw3DRect (int x, int y, int width, int height,
  boolean raised)

31
Rounded and 3D Rectangles
import java.awt. import java.applet. public
class Rectangles extends Applet public void
paint (Graphics page)
page.drawRoundRect (10,10,50,50,25,25)
page.setColor (Color.red)
page.fillRoundRect (90,10,40,40,10,30)
page.setColor (Color.blue)
page.fillRoundRect (150,30,50,20,15,15)
page.setColor (Color.orange)
page.fill3DRect (10,70,50,50,true)
page.draw3DRect (70,70,50,50,false) //
method paint // class Rectangles
32
Rectangle Results
33
Arcs

• drawArc (int x, int y, int width, int height, int
  start_angle, int arc_angle)
• fillArc (int x, int y, int width, int height, int
  start_angle, int arc_angle)

34
Arcs Applet
import java.awt. import java.applet. public
class Arcs extends Applet public void paint
(Graphics page) page.drawArc
(10,10,50,50,45,225) page.drawArc
(70,10,30,70,-180,180) page.setColor
(Color.red) page.fillArc
(130,10,60,60,-180,-90) page.setColor
(Color.blue) page.fillArc
(190,10,50,50,45,270) page.setColor
(Color.green) page.fillArc
(250,10,80,40,-225,180) // method paint //
Class Arcs
35
Arcs Applet Results
36
Polygons

• Polygon class can be used to define a polygon
• addPoint method adds points to the polygon
• Graphics class contains methods to draw a polygon
• drawPolygon(int xpoints, int ypoints, int
  numpoints)
• drawPolygon(Polygon poly)
• fillPolygon(int xpoints, int ypoints, int
  numpoints)
• fillPolygon(Polygon poly)
• Polygons are always closed shapes -- if the last
  point specified does not close the shape, it is
  automatically closed

37
Polygons Applet
import java.awt. import java.applet. public
class Polygons extends Applet private
int xset1 110,110,115,120,150,135
private int yset1 10,40,30,50,15,7
private int xset2 195,170,170,195,220,220
private int yset2 10,20,40,50,40,20
private int xset3 110,150,110,150,110
private int yset3
70,70,110,110,70 private Polygon poly
new Polygon()
38
Polygons Applet
public void paint (Graphics page)
page.drawPolygon (xset1, yset1, 6)
page.drawPolygon (xset2, yset2, 6)
page.setColor (Color.red)
page.fillPolygon (xset3, yset3, 5)
poly.addPoint (170, 70)
poly.addPoint (170, 90)
poly.addPoint (190, 110)
poly.addPoint (220, 90)
page.setColor (Color.blue)
page.fillPolygon (poly) // method
paint // class Polygons
39
Polygons Applet Results
40
Polylines

• drawPolyline (int xpoints, int ypoints, int
  numpoints)
• Similar to polygon except a polyline is not a
  closed shape

41
Java2D API

• Additional drawing capabilities beyond first
  java.awt release
• Use Graphics2D objects
• Graphics2D is a subclass of Graphics
• Downcast Graphics object to Graphics2D object
• Graphics2D g2 (Graphics2D) g
• Use setPaint, draw, fill methods of Graphics2D

42
Graphics2D Example
// Fig. 11.22 Shapes.java // Demonstrating some
Java2D shapes import javax.swing. import
java.awt.event. import java.awt. import
java.awt.geom. import java.awt.image. public
class Shapes extends JFrame public Shapes()
super( "Drawing 2D shapes" )
setSize( 425, 160 ) show()
43
Graphics2D Example
public void paint( Graphics g ) //
create 2D by casting g to Graphics2D
Graphics2D g2d ( Graphics2D ) g // draw
2D ellipse filled with a blue-yellow gradient
g2d.setPaint( new GradientPaint( 5,
30, // x1, y1
Color.blue, // initial Color
35, 100, // x2, y2
Color.yellow, // end Color
true ) ) // cyclic
g2d.fill( new Ellipse2D.Double( 5, 30, 65, 100 )
)
44
Graphics2D Example
// draw 2D rectangle in red
g2d.setPaint( Color.red ) g2d.setStroke(
new BasicStroke( 10.0f ) ) g2d.draw(
new Rectangle2D.Double( 80, 30, 65, 100 ) )
45
Graphics2D Example
// draw 2D rounded rectangle with a
buffered background BufferedImage buffImage
new BufferedImage( 10, 10,
BufferedImage.TYPE_INT_RGB ) Graphics2D
gg buffImage.createGraphics()
gg.setColor( Color.yellow ) // draw in yellow
gg.fillRect( 0, 0, 10, 10 ) // draw a filled
rectangle gg.setColor( Color.black ) //
draw in black gg.drawRect( 1, 1, 6, 6 )
// draw a rectangle gg.setColor( Color.blue
) // draw in blue gg.fillRect( 1, 1, 3,
3 ) // draw a filled rectangle
gg.setColor( Color.red ) // draw in red
gg.fillRect( 4, 4, 3, 3 ) // draw a filled
rectangle
46
Graphics2D Example
// paint buffImage onto the JFrame
g2d.setPaint( new TexturePaint(
buffImage, new Rectangle( 10, 10 ) ) )
g2d.fill( new RoundRectangle2D.Double(
155, 30, 75, 100, 50, 50 ) )
47
Graphics2D Example
// draw 2D pie-shaped arc in white
g2d.setPaint( Color.white ) g2d.setStroke(
new BasicStroke( 6.0f ) ) g2d.draw(
new Arc2D.Double( 240, 30, 75, 100,
0, 270, Arc2D.PIE ) )
48
Graphics2D Example
// draw 2D lines in green and yellow
g2d.setPaint( Color.green ) g2d.draw( new
Line2D.Double( 395, 30, 320, 150 ) )
float dashes 10 g2d.setPaint(
Color.yellow ) g2d.setStroke( new
BasicStroke( 4,
BasicStroke.CAP_ROUND,
BasicStroke.JOIN_ROUND,
10, dashes, 0 ) ) g2d.draw( new
Line2D.Double( 320, 30, 395, 150 ) )
49
Graphics2D Example
public static void main( String args )
Shapes app new Shapes()
app.addWindowListener( new
WindowAdapter() public void
windowClosing( WindowEvent e )
System.exit( 0 )
)
50
Graphics2D Example
51
Other Java2D Stuff

• GeneralPath class
• shape constructed from lines and complex curves
• part of java.awt.geom
• translate method of the Graphics2D class to move
  the drawing origin to a different location, other
  than 0, 0
• rotate method to move (rotate) the drawing origin

52
Shapes2
// Fig. 11.23 Shapes2.java // Demonstrating a
general path import javax.swing. import
java.awt.event. import java.awt. import
java.awt.geom. public class Shapes2 extends
JFrame public Shapes2() super(
"Drawing 2D Shapes" ) setBackground(
Color.yellow ) setSize( 400, 400 )
show()
53
Shapes2
public void paint( Graphics g ) int
xPoints 55, 67, 109, 73, 83, 55,
27, 37, 1, 43 int yPoints
0, 36, 36, 54, 96, 72, 96, 54, 36, 36
Graphics2D g2d ( Graphics2D ) g //
create a star from a series of points
GeneralPath star new GeneralPath() //
set the initial coordinate of the General Path
star.moveTo( xPoints 0 , yPoints 0 )
54
Shapes2
// create the star--this does not draw the
star for ( int k 1 k lt xPoints.length
k ) star.lineTo( xPoints k ,
yPoints k ) // close the shape
star.closePath()
55
Shapes2
// translate the origin to (200, 200)
g2d.translate( 200, 200 ) // rotate
around origin and draw stars in random colors
for ( int j 1 j lt 20 j )
g2d.rotate( Math.PI / 10.0 )
g2d.setColor( new Color( ( int ) (
Math.random() 256 ), (
int ) ( Math.random() 256 ),
( int ) ( Math.random() 256 ) ) )
g2d.fill( star ) // draw a filled star

56
Shapes2
public static void main( String args )
Shapes2 app new Shapes2()
app.addWindowListener( new
WindowAdapter() public void
windowClosing( WindowEvent e )
System.exit( 0 )
)
57
Shapes2
58
Summary

• Graphics contexts and graphics objects
• Color control
• Font control
• Drawing lines, rectangles, ovals, arcs, polygons,
  and polylines
• Java2D API
• Java2D Shapes