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( );
• [Link](item);
• [Link](5);
• HashTable (maps keys to items)
• H = new HashTable( );
• [Link](key, item);
• [Link](key);
• Iterators (automatic FOR loops)
• I = [Link]( );
• While ([Link]( ))
• dosomething([Link]( ));
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 [Link]
import [Link].Graphics2D // Java2
1. Get the “graphics context” of component
Graphics g = [Link]( );
Graphics2D g2 = (Graphics2D) g;
2. Paint in it
[Link](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:
• [Link]( ), .drawRect( ), …
• [Link]( ), …
• Object oriented:
1. Create shape:
• import [Link].*
• shape = new [Link](x, y);
• Line2D, Rect2D, CubicCurve2D, …
2. Draw the shape:
• [Link](shape);
• [Link](shape);
in Java
• Color and font:
• [Link]( new Color(r,g,b) );
• [Link]( new Font(…) );
• Advanced:
• [Link](…);
• [Link](…);
• [Link](…);
• [Link](…);
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){
[Link](g); // erases background
Graphics2D g2 = (Graphics2D)g; //cast for java2
// my graphics:
[Link](new Color(255,0,0));
[Link](10,10,200,50);
[Link](new Color(0,0,0));
[Link]("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 [Link]( ) 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
