Universidad Nacional de Colombia Facultad de Ingeniería Departamento de Sistemas

1. C ertificación en J AVA Universidad Nacional de Colombia Facultad de Ingeniería Departamento de Sistemas

2. The paint() method and the Graphics Context • The Visual Components • The Container Components • The Menu Components 12. PAINTING

3. Objectives • Many types of AWT components (buttons and scroll • bars, for example) have their appearance dictated • by the underlying window system. Other component • types, notably applets, frames, panels, and canvases, • have no intrinsic appearance. If you use any of these • classes and want your component to look at all useful, • you will have to provide the code that implements the • component's appearance • Java's painting mechanism provides the way for you • to render your components. The mechanism is robust, • and if you use it correctly you can create good, • scaleable, reusable code. The best approach is to • understand how Java's painting really works.

4. Objectives • The fundamental concepts of painting are • The paint() method and the graphics context • The GUI thread and the repaint() method • Spontaneous painting • Painting to images • This chapter will take you through the steps • necessary to understand and apply these concepts. • And while the topics covered here are not explicitly • mentioned many exam objectives, you may well • find this information useful or essential

5. import java.applet.Applet; • import java.awt.*; • public class SimplePaint extends Applet { • public void paint( Graphics g ) { • g.setColor( Color.black ); • g.fillRect( 0, 0, 300, 300 ); • g.setColor( Color.white ); • g.fillOval( 30, 30, 50, 50 ); • } • } The paint() method and the Graphics Context example of the paint() method:

6. Applet Viewer: SimplePaint.class Applet started. A very simple painting applet

7.  One interesting point about this applet is that no calls are made to the paint() method. The method is simply provided The environment seems to do a good job of calling paint() at the right moment Exactly when the environment chooses to call paint() is the subject of "Spontaneous Painting," later in this chapter

8. Painting on a component is accomplished by making calls to a graphics context, which is an instance of the Graphics class A graphics context knows how to render onto a single target The three media a graphics context can render onto are: • Components • Images • Printers

9. Any kind of component can be associated with a graphics context The association is permanent; a context cannot be reassigned to a new component Although you can use graphics contexts to paint onto any kind of component, it is unusual to do so with components that already have an appearance

10. Buttons, choices, check boxes, labels, scroll bars, text fields, and text areas do not often require programmer-level rendering Most often, these components just use the version of paint() that they inherit from the Component superclass. This version does nothing; the components are rendered by the underlying window system

11. However, there are four classes of "blank" components that have no default appearance and will show up as empty rectangles, unless they are subclassed and given paint() methods These four component classes are: • Applet • Canvas • Frame • Panel

12. The four major operations provided by the Graphics class are: • Selectinga color • Selectinga font • Drawing and filling • Clipping

13. Selecting a Color Colors are selected by calling the setColor() method The argument is an instance of the Color class There are 13 predefined colors, accessible as static final variables of the Color class The variables are themselves instances of the Color class, which makes some people uneasy, but java has no trouble with such things

14. Predefined colors • Color.yellow • Color.blue • Color.green • Color.orange • Color.magenta • Color.cyan • Color.pink • Color.lightGray • Color.darkGray • Color.gray • Color.white • Color.black • Color.red 

15. If you want a color that is not on this list, you can construct your own There are several versions of the Color constructor; the simplest is Color( int redLevel, int greenLevel, int blueLevel )

16. public void paint( Graphics g ) { • Color c = new Color( 170, 255, 170 ); • g.setColor( c ); • . . .

17. Selecting a Font Setting the font of a graphics context is like setting the color: subsequent string-drawing operations will use the new font, while previously drawn strings are not affected

18. Before you can set a font, you have to create one Font( String fontname, int style, int size ) The first parameter is the name of the font Font availability is platform dependent

19. String fontnames[] = Toolkit.getDefaultToolkit().getFontList() You can get a list of available font names, returned as an array of strings, by calling the getFontList() method on your toolkit

20. There are three font names that you can always count on, no matter what platform you are running on: • "Serif" • "SansSerif" • "Monospaced" On releases of the JDK before 1.1, these were called, respectively, "TimesRoman", "Helvetica", and "Courier“

21. Font f = new Font( "SansSerif", Font.BOLD, 24 ); • gc.setFont( f ) The style parameter of the Font constructor should be one of the following three ints: • Font.PLAIN • Font.BOLD • Font.ITALIC You can specify a bold italic font by passing Font.BOLD+Font.ITALIC as the style parameter to the Font constructor

22. Drawing and Filling All the rendering methods of the Graphics class specify pixel coordinate positions for the shapes they render Every component has its own coordinate space, with the origin in the component's upper-left corner, x increasing to the right, and y increasing downward

23. (0,0) X Y Every component has its own coordinate space, with the origin in the component's upper-left corner, x increasing to the right, and y increasing downward

24. Graphics contexts do not have an extensive repertoire of painting methods Sophisticated rendering is handled by extended APIs such as 2D, 3D, and Animation • drawLine() • drawRect() and fillRect() • drawOvalQ and fillOval() • drawArc() and fillArc() • drawPolygon() and fillPolygon() • drawPolyline() • drawString()

25. drawLine() The drawLine() method draws a line from point (x0, y0) to point (x1, y1) public void drawLine( int x0, int y0, int x1, int y1 );

26. g.drawLine( 20, 120, 100, 50 ); Applet Viewer: ... Applet started.

27. drawRect() and fillRect() The drawRect() and fillRect() methods respectively draw and fill rectangles public void drawRect( int x, int y, int width, int height ); public void fillRect( int x, int y, int width, int height ); The x and y parameters are the coordinates of the upper-left corner of the rectangle Width and height must be positive numbers, or nothing will be drawn

28. g.drawRect( 20, 20, 100, 80 ); Applet Viewer: ... Applet started.

29. g.fillRect( 20, 20, 100, 80 ); Applet Viewer: ... Applet started.

30. drawOval() and fillOval() The drawOval() and fillOval() methods respectively draw and fill ovals An oval is specified by a rectangular bounding box To draw a circle, use a square bounding box

31. 90 180 0 270 The oval lies inside the bounding box and is tangent to each of the box's sides at the midpoint

32. The two oval-drawing methods require you to specify a bounding box in exactly the same way that you specified a rectangle in the drawRect() and fillRect() methods: public void drawOval( int x, int y, int width, int height ); public void fillOval( int x, int y, int width, int height );

33. g.drawOval( 10, 10, 150, 100 ); Applet Viewer: ... Applet started.

34. g.fillOval( 10, 10, 150, 100 ); Applet Viewer: ... Applet started.

35. drawArc() and fillArc() An arc is a segment of an oval To specify an arc, you first specify the oval's bounding box, just as you do with drawOval() and fillOval() You also need to specify the starting and ending points of the arc, which you do by specifying a starting angle and the angle swept out by the arc

36. Angles are measured in degrees. For the starting angle, 0 degrees is to the right, 90 degrees is upward, and so on, increasing counterclockwise A filled arc is the region bounded by the arc itself and the two radii from the center of the oval to the endpoints of the arc • public void drawArc( int x, int y, int width, int height, • int startDegrees, int arcDegrees ); • public void fillArc( int x, int y, int width, int height, • int startDegrees, int arcDegrees );

37. g.drawArc( 10, 10, 150, 100, 45, 180); Applet Viewer: ... Applet started.

38. g.fillArc( 10, 10, 150, 100, 45, 180); Applet Viewer: ... Applet started.

39. drawPolygon() and fillPolygon() A polygon is a closed figure with an arbitrary number of vertices The vertices are passed to the drawPolygon() and fillPolygon() methods as two int arrays

40. The first array contains the x coordinates of the vertices • the second array contains the y coordinates • A third parameter specifies the number ofvertices public void drawPolygon( int[] xs, int[] ys, int numPoints ); public void fill Polygon( int[] xs, int[] ys, int numPoints );

41. int[] polyXs = { 20, 150, 150 }; • int[] polyYs = { 20, 20, 120 }; • g.drawPolygon( polyXs, polyYs, 3 ); Applet Viewer: ... Applet started.

42. int[] polyXs = { 20, 150, 150 }; • int[] polyYs = { 20, 20, 120 }; • g.fillPolygon( polyXs, polyYs, 3 ); Applet Viewer: ... Applet started.

43. drawPolyline() A polyline is similar to a polygon, but it is open rather than closed: there is no line segment connecting the last vertex to the first There is nofillPolyline() method, since fillPolygon() achieves the same result

44. The parameters to drawPolyline() are the same as those to drawPolygon(): • a pair of int arrays representing vertices and • an int that tells how many vertices there are public void drawPolyline( int[] xs, int[] ys, int numPoints );

45. int[] polyXs = { 20, 150, 150 }; • int[] polyYs = { 20, 20, 120 }; • g.drawPolyline( polyXs, polyYs, 3 ); Applet Viewer: ... Applet started.

46. drawString() The drawString() method paints a string of text public void drawString( String s, int x, int y ); The x and y parameters specify the left edge of the baseline of the string Characters with descenders (g, j, p, q, and y in most fonts) extend below the baseline

47. By default, a graphics context uses the font of the associated component However, you can set a different font by calling the graphics context's setFont() method 

48. Font font = new Font( "Serif", Font.PLAIN, 24 ); • g.setFont( font ); • g.drawString( "juggle quickly", 20, 50 ); • g.setColor( Color.gray ); • g.drawLine( 20, 50, 150, 50 ); Applet Viewer: ... juggle quickly

49. drawImage() An Image is an off-screen representation of a rectangular collection of pixel values Java's image support is complicated The section "Images" discusses what you need to know about creating and manipulating images For now, assume that you have somehow obtained an image (that is, an instance of class java.awt.Image) that you want to render to the screen using a certain graphics context

50. call the graphics context's drawlmage() method void drawlmage( Image im, int x, int y, ImageObserver observer ); • im is the image to be rendered, and • x and y are the coordinates within the destination component of the upper-left corner of the image • There are other versions of the method, but this is the most common form