Java Graphics

Chris North
cs3724: HCI
 Review
• 3 kinds of elements in components API?
• Layout managers
• Events
• Extend vs. Implement
 Useful Java DataStructures
• Vector (dynamic array)
• V = new Vector( );
• V.add(item);
• V.elementAt(5);
• HashTable (maps keys to items)
• H = new HashTable( );
• H.add(key, item);
• H.get(key);
• Iterators (automatic FOR loops)
• I = V.iterator( );
• While (I.hasNext( ))
• dosomething(I.next( ));
 Graphics
• Window is like a painter’s canvas
• App must paint its window contents
• Java components paint themselves
• Anything else: Programmer

• When to paint?
• How to paint?
JButton
How to Paint?
Pixels
 Coordinate System
• Upside-down Cartesian
(0,0) (width,0)

(0,height) (width, height)

• Ywindow = height - Ycartesian

 Component Hierarchy
• Each component has its own subwindow
• Subwindow = rectangular area within parent component
• Has own coordinate system
• Clipping:
• Can’t paint outside its subwindow
• Can’t paint over child components?
(0,0) JPanel

(0,0) JButton
JButton
(wb, hb)

(wp, hp)
 Painting Components
• Can paint any component
• JPanel is good for custom graphics area

JButton
JPanel
 Painting in Java
import java.awt.Graphics
import java.awt.Graphics2D // Java2

1. Get the “graphics context” of component

Graphics g = myJPanel.getGraphics( );
Graphics2D g2 = (Graphics2D) g;

2. Paint in it

g2.drawLine(x1,y1, x2,y2);
 Graphics Primitives
Draw Fill
• Point (x,y)
• Line (pt1,pt2)
• PolyLine (pt list)
• Arc
• Oval (pt, w,h)
• Rectangle (pt, w,h)
• RoundRectangle

• Polygon (pt list)

• Image (file, x,y)
• Text (string, x,y) label
 Graphics Attributes
• Color
• Font
• Stroke attributes:
– Line width, dash, end caps, joins, miter
• Paint attributes:
– Color, gradient, texture
• Composite:
– Blending
• Transforms:
– Translate, rotate, flip, shear, scale
 Color
• Combinations of Red, Green, Blue
• Each [0, 255]

• Java: new Color(255, 150, 0)

Hokie Orange
 in Java
• Drawing primitives:
• g2.drawLine( ), .drawRect( ), …
• g2.fillRect( ), …

• Object oriented:
1. Create shape:
• import java.awt.geom.*
• shape = new Point2D.Float(x, y);
• Line2D, Rect2D, CubicCurve2D, …
2. Draw the shape:
• g2.draw(shape);
• g2.fill(shape);
 in Java
• Color and font:
• g2.setColor( new Color(r,g,b) );
• g2.setFont( new Font(…) );
• Advanced:
• g2.setStroke(…);
• g2.setPaint(…);
• g2.setComposite(…);
• g2.setTransform(…);

1. Set graphics attributes

2. Draw graphics
When to Paint?
 Re-Paint
• Screen is like a painter’s canvas
• All windows paint on the same surface!
• Windows don’t “remember” whats under them
• Need to re-paint when portions are newly
exposed

• Receive Repaint events

• Open, resize, bring to front
• When other windows in front move, resize, close
MyApp
Open WinExp, Notepad
 Close WinExplorer

Repaint event sent to: MyApp, Desktop

Desktop gets repaint event
 MyApp gets repaint event

MyApp JPanel gets repaint event

 MyApp gets repaint event

MyApp JPanel forwards repaint event to JButton

 Repainting Static Graphics

• Repaint event:
• Erase subwindow (fill with background color)
• Draw subwindow contents
 In Java
• Repaint event:
• Java Swing components catch repaint event,
and call their paintComponent( ) method
• Default paintComponent( ) method paints component
– E.g. panel background color

• Sub-class the component (typically JPanel)

• Over-ride paintComponent( ) method
• Custom graphics here

• Can call repaint( ) to invoke paintComponent( )

 Code
public class MyPanel extends JPanel {

public void paintComponent(Graphics g){

super.paintComponent(g); // erases background
Graphics2D g2 = (Graphics2D)g; //cast for java2

// my graphics:
g2.setColor(new Color(255,0,0));
g2.fillRect(10,10,200,50);
g2.setColor(new Color(0,0,0));
g2.drawString("Hello World", 10, 10);
}
}
Hello World
 Typical program structure for
Dynamic Graphics
• Store data structure of window contents
• E.g. user drawn picture in paint program

• Repaint event:
• Erase window (draw background color)
• Draw window contents using data structure

• Other event that alters window contents:

• modify the data structure
• send repaint event
 In JBuilder
• Subclassing JPanel
• Overriding paintComponent( )
• Using subclassed JPanel in a JFrame
 Storing window contents
• 2 approaches:
• Store logical contents in a data structure
» E.g. drawing program: lines, shapes, colors, …
»
• Store visual contents as an off-screen image (bitmap)
» E.g. pixels
» Then use g2.drawImage( ) in paintComponent( )
»
 Problem: Flashing

• Ugly flashing when repaint:

• Paint background
• Redraw shapes
Solution: Double buffering
 Solution: Double buffering
• Double buffered repaint:
• Draw all graphics in temporary off-screen image
» Paint background color
» Paint shapes
• Then paint image to JPanel

• Bonus: Swing does this for you!

• Draw graphics on JPanel
• JPanel maintains off-screen image
 What Subwindows Do
• Directs mouse input to correct component
• Determines repaint events
• Own coordinate system
• Don’t need repaint when moving
• Clipping: hides drawing behind a subwindow

• Some subwindows remember what’s under them:

• Popup menus