Lecture 7

1. Lecture 7 • Graphics under AWT • Graphics Attributes • Shapes • Clips • Affine Transformations • Strokes, Paints, Colors, Translucency • RenderingHints, Anti-aliasing • Importing and Exporting Graphics • Double Buffering

2. Graphics under AWT • The screen “real-estate” is all owned by somebody. You cannot draw on screen area owned by another. • Each component controls the way it, and to some extent its children, are drawn on screen. Parents draw first, then children draw, giving a layered effect of children “on top of” parents.

3. Making the component appear • Component.paint(Graphics g); contains the actual instructions for drawing the component. Override for custom look. • Component.update(Graphics g); first blanks the component by painting its background color, then calls paint. May override to reduce flicker. • Component.repaint(); calls update ASAP. update only called from a special thread.

4. The Graphics Object • All drawing is done through a Graphics object. This provides many drawing methods, which can be used to draw to many different locations (e.g. a screen region, a printer, an off-screen buffer). • An enhanced Graphics2D object was introduced along with Swing. It has some really excellent features.

5. Graphics2D Methods • Shape drawing/filling/erasing. • Text drawing • Image drawing • Hit detection (do 2 shapes overlap?)

6. Graphics2D Attributes • Color (foreground, background) • Line style (Stroke) • Fill style (Paint) • Composite (translucency effects) • AffineTransform (rotation, translation, scaling) • Font (for drawing text) • Clip Region (Shape): Graphics directives outside this region will be ignored. • RenderingHints: Antialiasing, speed, etc. For drawing lines, shapes and text Also for images

7. Pixels and Coordinates • The screen, which is an array of pixels, is thought of as part of an infinite plane. • Remember geometry? Every point in the plane can be described using 2 coordinates. By default, (0,0) indicates top-left corner, and (width,height) indicates bottom-right corner. • In Java, every pixel is a 1x1 square with 4 points as corners (pixels have area, they are not points).

8. Another pixel, with top-left corner (7,-2) -2 -1 ... -2 -1 0 1 2 3 4 5 6 7 8 9 0 1 The point (8.7, 3.4) Actual points have no height or width. 2 3 4 5 6 This pixel has corners (2,6), (3,6), (2,7) and (3,7). Pixels are the same as 1x1 rectangles. 7 8 9 10 11 12 The infinite plane

9. Shapes in the plane • A Shape is a class representing a subset of the plane. Every point in the plane is either inside or outside a particular Shape. • Shapes in Java are represented by a PathIterator, which describes the outline of the shape by breaking it up into simple curves.

10. Arc2D Ellipse2D GeneralPath RoundRectangle2D Shape Hierarchy QuadCurve2D Shape RectangularShape Line2D Polygon CubicCurve2D Rectangle2D, Rectangle

11. Gettin’ Shape • Use subclass from previous slide. GeneralPath is the most flexible. • Shape GlyphVector.getOutline(); Shape GlyphVector.getLogicalBounds(); Font.createGlyphVector(…); • Graphics.getClip(); • Stroke.createStrokedShape(Shape);

12. Usin’ Shape • boolean Shape.contains(Point); boolean Shape.contains(Rectangle); Rectangle Shape.getBounds2D(); boolean Shape.intersects(Rectangle); • Shape AffineTransform.createTransformedShape(Shape); • new Area(Shape); Area.add(Area); Area.intersect(Area); Area.subtract(Area); Area.isEmpty();

13. Showing off your Shape • Graphics2D.draw(Shape); This uses the Clip, Transform, Paint, Stroke, and Composite attributes to draw the outline of the shape. • Graphics2D.fill(Shape); This uses the Clip, Transform, Paint, and Composite to fill the interior of the shape. • Both methods make some assumptions about pixellation and anti-aliasing which may be controlled by Graphics2D.setRenderHints();

14. Screen: window onto a plane Screen rectangle The infinite graphics plane Only those pixels inside the “screen rectangle” are visible. Similarly, each Component has its own rectangle.

15. The clip rectangle Clip Rectangle The plane Each Component has its own Graphics object, which has its own “clip” rectangle, initially set to the size of the Component. You can draw anywhere on the plane, but only the clip rectangle will affect the screen.

16. Clip Rectangles • Actually, there are 3 clip rectangles: • The user clip, which you use to cut out the piece of the image you want to display. • The device clip, which is used to restrict your drawing to the allowed screen region. • The composite clip, which finally determines what is displayed. • Actually, these clips can be any Shape.

17. Example, System Clip • You load frogPic, a 200x200 image of a frog, and call g.drawImage(frogPic, 50,100); This is how it looks in the graphics plane. • Your component has size 150x250, This is how the component looks at its current size. It does not matter where your component is located on the screen. The system clip only allows part of the image.

18. Example, User Clip • Your BinocularsComponent already displays something like this. • Use g.setClip() to turn the user clip into the shape at left. Now whatever drawing instructions you give, graphics will only appear inside the white circles at top. If you draw this … this will display

19. Coordinates • Points in the plane are described by two coordinates. Locations are relative to the axes. But what describes where the axes are?

20. User space and device space • When you issue graphics commands, such as drawLine(x,y,width,height), or setClip(…), your inputs are treated as coordinates in user space (a coordinate space). • Before rendering to the screen, the instructions are converted to device space. • User space and device space have their own axes, and their own scales for each axis. These axes and scales can have any relation.

21. Affine Transformations • (Mathematics) Regardless of how two different coordinate systems are set up, there is an affine transformation which converts one to the other. • Affine transformations can be dilations, translations, rotations, shears, or any combination of these. • (demo)

22. Affine Transformation Uses • Makes your code simpler. • Translate origin to natural location. • Work in percentages—scale user coordinates. • Handle resized components with one line. • Some easy special effects • Rotated text and images • Shear (map rectangle to trapezoid)

23. Applying Affine Transforms Graphics2D.translate(); Graphics2D.rotate(); Graphics2D.scale(); Graphics2D.shear(); Graphics2D.transform(); Graphics2D.getTransform(); Graphics2D.setTransform(); compose existing transform with new one.

24. Affine Transform Matrices • Any affine transform can be represented by a 3x3 matrix. See chalkboard… (see also the AffineTransform API) • Composing a sequence of transforms corresponds to matrix multiplication.

25. Different Strokes • In the old AWT, lines were always 1-pixel wide, and you could only choose a single solid color (foreground and fill color). • Now, the Stroke class gives a vast number of potential outline styles, and the Paint class lets you draw and fill with patterns, gradients, images, etc.

26. BasicStrokes • Class BasicStroke implements Stroke • Lets you control curve width, dash pattern, and corner appearance. • Well documented on-line. JFC in a Nutshell provides nice pictures too.

27. Paint • Predefined implementations: Color, GradientPaint, TexturePaint. • Color: A solid color. • GradientPaint: Linearly interpolates colors between 2 given colors at 2 given points. Cycles or is solid beyond points. • TexturePaint: Tiles a BufferedImage in a specified rectangular pattern.

28. Specifying Colors • constants Color.pink, Color.black, etc. • Color(float r, float g, float b [, float a]) specifies red/green/blue/alpha each in range [0,1]. • Color JColorChooser.showDialog( Component component, String title, Color initialColor); (gets user’s color selection)

29. Alpha-Compositing • Compositing refers to superimposing one image on another. • In alpha-compositing, this is done by calculating the color of each pixel as a linear combination of the original color and the new color: C’ = (1-a)C1 + a C2 • The parameter a (should be alpha) varies from 0 to 1. Opaqueness factor.

30. Alpha-Compositing • Graphics 2D g2 = (Graphics2D)g;g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,0.5)); • Many images have an “alpha channel” which defines an alpha-value for each pixel. The Image and ColorModel classes provide built-in support for translucent images. (“RGBA”) • Example: Translucent GradientPaints.

31. RenderingHints • One of the most important new features. Request graphics methods with Graphics2D.setRenderingHint. • g.setRenderingHint( RenderingHint.KEY_ANTIALIASING, RenderingHint.VALUE_ANTIALIAS_ON); • g.setRenderingHint( RenderingHint.KEY_RENDERING, RenderingHint.VALUE_RENDER_SPEED);

32. Anti-aliasing • Reduces “jagginess” caused by sudden color changes at pixel borders, by making lots of minor changes to pixels. • Can greatly improve readability of rotated text, appearance of sharp borders. • May result in weird effects, especially if the background color changes. Demo

33. Antialiased text close-up

34. Antialiased line close-up

35. Image Classes • Image • BufferedImage extends Image • ImageIcon (a small fixed-size image) • RenderableImage, RenderedImage • ImageProducer, ImageObserver, ImageConsumer • ImageFilter

36. Images • Unlike ImageIcon, an Image is not a fixed-size picture. Image can be scaled to any size. The data for an Image may be present in memory, somewhere else on the internet, or generated on demand by an ImageProducer. • Prefer to work with BufferedImages. Stored locally; no latency issues.

37. BufferedImage • BufferedImages are represented by a ColorMap and a Raster of pixels, in memory. • Since they are in memory, there are many more methods to manipulate them, and fewer things to go wrong.

38. Loading a BufferedImage • First, load the picture as an Image. Methods for doing this on next slide. • Create a new BufferedImage of the same dimensions: Image.getHeight(); Image.getWidth(); new BufferedImage(w,h,TYPE_3BYTE_BGR); • Copy the image data. Graphics2D g = bufImage.getGraphics(); g.drawImage(Image);

39. Operations on any Image • Display. • Graphics.drawImage(Image,int x,int y); • Modify off-screen. • Image.getGraphics(); The returned Graphics object can be used to change the image. • Get dimensions. • Image.getWidth(); Image.getHeight();

40. Uses for BufferedImages • Use tiled image as a Paint. new TexturePaint(BufferedImage im, Rectangle r); • Convert to JPEG format. import com.sun.image.codec.jpeg.*; JPEGImageEncoder.encode(BufferedImage);

41. Support for other formarts • Go to www.google.com, search: “gif encoder java”. Lots of hits. • http://www.acme.com/java/software/ encoder/decoder for .gif, .ppm • http://www.geocities.com/morris_hirsch/java/how_to_print.html many useful classes for printing & image formats.

42. Double Buffering • Graphics computations can be very slow. In a long sequence of graphics ops, intermediate displays may be ugly. • Double buffering solves this by doing all the graphics ops on an undisplayed image, then “blitting” or copying the image to screen. • Trades memory & time for appearance.

43. Double Buffering in Swing • On by default. Can be turned off: JComponent.setDoubleBuffered(false); Turning this off may speed things up, but is probably not worth doing.