Transcript Java Graphics

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)
(0,height)
• Ywindow = height - Ycartesian
(width,0)
(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)
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
• 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
Fill
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