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