Graphics in Java Part II. Lecture Objectives Learn how to use Graphics in Java.
Java Graphics
description
Transcript of Java Graphics
![Page 1: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/1.jpg)
Java Graphics
Chris Northcs3724: HCI
![Page 2: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/2.jpg)
Review
• 3 kinds of elements in components API?• Layout managers• Events• Extend vs. Implement
![Page 3: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/3.jpg)
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( ));
![Page 4: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/4.jpg)
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
![Page 5: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/5.jpg)
How to Paint?
![Page 6: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/6.jpg)
Pixels
![Page 7: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/7.jpg)
Coordinate System
• Upside-down Cartesian
• Ywindow = height - Ycartesian
(0,0) (width,0)
(0,height) (width, height)
![Page 8: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/8.jpg)
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
![Page 9: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/9.jpg)
Painting Components
• Can paint any component• JPanel is good for custom graphics area
JButtonJPanel
![Page 10: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/10.jpg)
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);
![Page 11: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/11.jpg)
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
![Page 12: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/12.jpg)
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
![Page 13: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/13.jpg)
Color
• Combinations of Red, Green, Blue• Each [0, 255]
• Java: new Color(255, 150, 0)
Hokie Orange
![Page 14: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/14.jpg)
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);
![Page 15: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/15.jpg)
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
![Page 16: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/16.jpg)
When to Paint?
![Page 17: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/17.jpg)
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
![Page 18: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/18.jpg)
MyApp
![Page 19: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/19.jpg)
Open WinExp, Notepad
![Page 20: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/20.jpg)
Close WinExplorer
Repaint event sent to: MyApp, Desktop
![Page 21: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/21.jpg)
Desktop gets repaint event
![Page 22: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/22.jpg)
MyApp gets repaint event
MyApp JPanel gets repaint event
![Page 23: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/23.jpg)
MyApp gets repaint event
MyApp JPanel forwards repaint event to JButton
![Page 24: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/24.jpg)
Repainting Static Graphics
• Repaint event:• Erase subwindow (fill with background color)• Draw subwindow contents
![Page 25: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/25.jpg)
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( )
![Page 26: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/26.jpg)
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
![Page 27: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/27.jpg)
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
![Page 28: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/28.jpg)
In JBuilder
• Subclassing JPanel• Overriding paintComponent( )• Using subclassed JPanel in a JFrame
![Page 29: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/29.jpg)
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( )»
![Page 30: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/30.jpg)
Problem: Flashing
• Ugly flashing when repaint:• Paint background• Redraw shapes
![Page 31: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/31.jpg)
Solution: Double buffering
![Page 32: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/32.jpg)
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
![Page 33: Java Graphics](https://reader035.fdocuments.in/reader035/viewer/2022062323/568167ec550346895ddd5b64/html5/thumbnails/33.jpg)
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