Java Graphics Chris North cs 3724 HCI Review

Java Graphics Chris North cs 3724: HCI

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

Useful Java Data. Structures • Vector (dynamic array) • V = new Vector( ); • V. add(item); • V. element. At(5); • Hash. Table (maps keys to items) • H = new Hash. Table( ); • H. add(key, item); • H. get(key); • Iterators (automatic FOR loops) • I = V. iterator( ); • While (I. has. Next( )) • 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) JButton JPanel (0, 0) 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 2 D // Java 2 1. Get the “graphics context” of component Graphics g = my. JPanel. get. Graphics( ); Graphics 2 D g 2 = (Graphics 2 D) g; 2. Paint in it g 2. draw. Line(x 1, y 1, x 2, y 2);

Graphics Primitives Draw • Point (x, y) • Line (pt 1, pt 2) • Poly. Line (pt list) • Arc • Oval (pt, w, h) • Rectangle (pt, w, h) • Round. Rectangle • 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: • • • g 2. draw. Line( ), . draw. Rect( ), … g 2. fill. Rect( ), … Object oriented: 1. Create shape: • • • import java. awt. geom. * shape = new Point 2 D. Float(x, y); Line 2 D, Rect 2 D, Cubic. Curve 2 D, … 2. Draw the shape: • • g 2. draw(shape); g 2. fill(shape);

in Java • Color and font: • • • g 2. set. Color( new Color(r, g, b) ); g 2. set. Font( new Font(…) ); Advanced: • • g 2. set. Stroke(…); g 2. set. Paint(…); g 2. set. Composite(…); g 2. set. Transform(…); 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

My. App

Open Win. Exp, Notepad

Close Win. Explorer Repaint event sent to: My. App, Desktop

Desktop gets repaint event

My. App gets repaint event My. App JPanel gets repaint event

My. App gets repaint event My. App 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 paint. Component( ) method • Default paint. Component( ) method paints component – E. g. panel background color • Sub-class the component (typically JPanel) • Over-ride paint. Component( ) method • Custom graphics here • Can call repaint( ) to invoke paint. Component( )

Code public class My. Panel extends JPanel { public void paint. Component(Graphics g){ super. paint. Component(g); // erases background Graphics 2 D g 2 = (Graphics 2 D)g; //cast for java 2 // my graphics: g 2. set. Color(new Color(255, 0, 0)); g 2. fill. Rect(10, 200, 50); g 2. set. Color(new Color(0, 0, 0)); g 2. draw. String("Hello World", 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 paint. Component( ) • 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 g 2. draw. Image( ) in paint. Component( ) »

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