Java Graphics

1. Java Graphics Chris North cs3724: HCI

2. Review • 3 kinds of elements in components API? • Layout managers • Events • Extend vs. Implement

3. 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( ));

4. 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

5. How to Paint?

6. Pixels

7. Coordinate System • Upside-down Cartesian • Ywindow = height - Ycartesian (0,0) (width,0) (0,height) (width, height)

8. 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 JButton (0,0) JButton (wb, hb) (wp, hp)

9. Painting Components • Can paint any component • JPanel is good for custom graphics area JPanel JButton

10. 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);

11. Graphics Primitives DrawFill • 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

12. 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

13. Color • Combinations of Red, Green, Blue • Each [0, 255] • Java: new Color(255, 150, 0) Hokie Orange

14. in Java • Drawing primitives: • g2.drawLine( ), .drawRect( ), … • g2.fillRect( ), … • Object oriented: • Create shape: • import java.awt.geom.* • shape = new Point2D.Float(x, y); • Line2D, Rect2D, CubicCurve2D, … • Draw the shape: • g2.draw(shape); • g2.fill(shape);

15. 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(…); • Set graphics attributes • Draw graphics

16. When to Paint?

17. 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

18. MyApp

19. Open WinExp, Notepad

20. Close WinExplorer Repaint event sent to: MyApp, Desktop

21. Desktop gets repaint event

22. MyApp gets repaint event MyApp JPanel gets repaint event

23. MyApp gets repaint event MyApp JPanel forwards repaint event to JButton

24. Repainting Static Graphics • Repaint event: • Erase subwindow (fill with background color) • Draw subwindow contents

25. 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( )

26. 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

27. 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

28. In JBuilder • Subclassing JPanel • Overriding paintComponent( ) • Using subclassed JPanel in a JFrame

29. 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( )

30. Problem: Flashing • Ugly flashing when repaint: • Paint background • Redraw shapes

31. Solution: Double buffering

32. 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

33. 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