Java Graphics Chris North cs3724: HCI
Feb 25, 2016
Java Graphics
Chris Northcs3724: 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
• Ywindow = height - Ycartesian
(0,0) (width,0)
(0,height) (width, height)
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)
(wp, hp)
(0,0)
(wb, hb)
JPanel
JButtonJButton
Painting Components
• Can paint any component• JPanel is good for custom graphics area
JButtonJPanel
Painting in Java
import java.awt.Graphicsimport 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 PrimitivesDraw 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 attributes2. 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( )
Codepublic 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