1 Object Oriented programming GRAPHICS Instructors Dr Rasha

1 Object Oriented programming GRAPHICS Instructors: Dr. Rasha Orban Dr. Neven Abdelaziz

2 13. 1 Introduction You can draw custom shapes on a GUI component.

3 13. 2 The Graphics Class Each GUI component has a graphics context, which is an object of the Graphics class. The Graphics class contains the methods for drawing various shapes. The Graphics class provides the methods for drawing strings, lines, rectangles, ovals, arcs, polygons, and polylines, as shown in Figure 13. 2.

4

5 13. 2 Graphical Coordinate Systems Think of a GUI component as a piece of paper and the Graphics object as a pencil or paintbrush. You can apply the methods in the Graphics class to draw graphics on a GUI component. To paint, you need to specify where to paint. Each component has its own coordinate system with the origin (0, 0) at the upper-left corner. The x-coordinate increases to the right, and the y-coordinate increases downward. Note that the Java coordinate system differs from the conventional coordinate system, as in Fig. 13. 3.

6

7 The Graphics class: an abstract class - provides a device-independent graphics interface for displaying figures and images on the screen on different platforms. Whenever a component (e. g. , a button, a label, or a panel) is displayed, the JVM automatically creates a Graphics object for the component on the native platform and passes this object to invoke the paint. Component method to display the drawings.

8 • An abstract class cannot be used to create objects using the new operator but an abstract class can be used as a data type. • An abstract class can contain abstract methods, which are implemented in concrete subclasses. • An abstract method is defined without implementation. Its implementation is provided by the subclasses. • A class that contains abstract methods must be defined abstract. • The constructor in the abstract class is defined protected, because it is used only by subclasses. • When you create an instance of a concrete subclass, its superclass’s constructor is invoked to

9 The signature of the paint. Component method is as follows: protected void paint. Component(Graphics g) This method, defined in the JComponent class, is invoked whenever a component is first displayed or redisplayed.

10 To draw on a component, you need to define a class that extends JPanel and overrides its paint. Component method to specify what to draw. Listing 13. 1 gives an example that draws a line and a string on a panel, as shown in Figure 13. 4.

11 LISTING 13. 1 Test. Paint. Component. java 1 import javax. swing. *; 2 import java. awt. Graphics; //Abstract Windowing Toolkit 3 4 public class Test. Paint. Component extends JFrame { 5 public Test. Paint. Component() { 6 add(new New. Panel() ); 7} 8 9 public static void main(String[] args) { 10 Test. Paint. Component frame = new Test. Paint. Component(); 11 frame. set. Title("Test. Paint. Component"); 12 frame. set. Size(200, 100); 13 frame. set. Location. Relative. To(null); // Center the frame 14 frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); 15 frame. set. Visible(true); 16 } 17 }

12 18 19 class New. Panel extends JPanel { 20 @Override 21 protected void paint. Component(Graphics g) { 22 super. paint. Component(g); 23 g. draw. Line(0, 0, 50); 24 g. draw. String("Banner", 0, 40); 25 } 26 }

13 The paint. Component method is automatically invoked to paint graphics when the component is first displayed or whenever the component needs to be redisplayed. Invoking super. paint. Component(g) (line 22) invokes the paint. Component method defined in the superclass. This is necessary to ensure that the viewing area is cleared before a new drawing is displayed. Line 23 invokes the draw. Line method to draw a line from (0, 0) to (50, 50). Line 24 invokes the draw. String method to draw the string Banner at location (0, 40).

14 Notes: 1. All the drawing methods have parameters that specify the locations of the subjects to be drawn. In Java, all measurements are made in pixels. 2. The JVM invokes paint. Component to draw things on a component. The user should never invoke paint. Component directly. For this reason, the protected visibility is sufficient for paint. Component

Brainstorming 15 Panels are invisible and are used as small containers that group components to achieve a desired layout. Another important use of JPanel is for drawing. You can draw things on any Swing GUI component, but normally you should use a JPanel as a canvas upon which to draw things. What happens if you replace JPanel with JLabel in line 19 as follows? class New. Panel extends JLabel { The program will work, but it is not preferred, because JLabel is designed for creating a label, not for drawing.

Notes: 16 1. The JVM invokes paint. Component to draw things on a component. This is necessary to ensure that the viewing area is cleared before a new drawing is displayed. 2. The repaint method is defined in the Component class. Invoking repaint causes the paint. Component method to be called. The repaint method is invoked to refresh the viewing area. Typically, you call it if you have new things to display.

17 13. 3 Drawing Strings, Lines, Rectangles, and Ovals The draw. String(String s, int x, int y) method draws a string starting at the point (x, y). The draw. Line(int x 1, int y 1, int x 2, int y 2) method draws a straight line from point (x 1, y 1) to point (x 2, y 2), Java provides six methods for drawing rectangles in outline or filled with color. You can draw or fill plain rectangles, round-cornered rectangles, or three-dimensional rectangles.

18 1 - The draw. Rect(int x, int y, int w, int h) method draws a plain rectangle 2 - The fill. Rect(int x, int y, int w, int h) method draws a filled rectangle 3 - The draw. Round. Rect(int x, int y, int w, int h, int aw, int ah) method draws a round-cornered rectangle, and 4 - The fill. Round. Rect(int x, int y, int w, int h, int aw, int ah) method draws a filled round-cornered rectangle 5 - The draw 3 DRect(int x, int y, int w, int h, boolean raised) method draws a 3 D rectangle and 6 - The fill 3 DRect(int x, int y, int w, int h, boolean raised) method draws a filled 3 D rectangle.

19 draw. Oval(int x, int y, int w, int h) method or the fill. Oval(int x, int y, int w, int h) method.

20 15. 5 Drawing Arcs An arc is conceived as part of an oval bounded by a rectangle. The methods to draw or fill an arc are as follows: draw. Arc(int x, int y, int w, int h, int start. Angle, int arc. Angle); fill. Arc(int x, int y, int w, int h, int start. Angle, int arc. Angle);

21

22 13. 6 Drawing Polygons and Polylines int x 1[]={10, 50, 70, 120}; int y 1[]={50, 120, 90, 200}; g. draw. Polyline(x 1, y 1, 4); g. fill. Polygon(x 1, y 1, 4);

23 13. 7 Centering a String Using the Font. Metrics Class You can display a string at any location in a panel. Can you display it centered? To do so, you need to use the Font. Metrics class to measure the exact width and height of the string for a particular font. Font. Metrics can measure the following attributes for a given font (see Figure 15. 17):

24 ■ Leading, pronounced ledding, is the amount of space between lines of text. ■ Ascent is the distance from the baseline to the ascent line. The top of most characters in the font will be under the ascent line, but some may extend above the ascent line. ■ Descent is the distance from the baseline to the descent line. The bottom of most descending characters (e. g. , j, y, and g) in the font will be above the descent line, but some may extend below the descent line. ■ Height is the sum of leading, ascent, and descent.

25

26

27 13. 8 Case Study: The Message. Panel Class This case study develops a useful class that displays a message in a panel. The class enables the user to set the location of the message, center the message, and move the message with the specified interval.

28 This case study develops a useful class that displays a message in a panel. The class enables the user to set the location of the message, center the message, and move the message a specified interval.

29

30

31 13. 9 Case Study: The Still. Clock Class Lab Assignment This case study develops a class that displays a clock on a panel.

32 13. 11 Displaying Images You can draw images in a graphics context. You learned how to create image icons and display them in labels and buttons in § 12. 10, “Image Icons. ” For example, the following statements create an image icon and display it in a label: Image. Icon icon = new Image. Icon("image/us. gif"); JLabel jlbl. Image = new JLabel(image. Icon); A more flexible way to display images is to use the draw. Image method of the Graphics class on a panel.

33 the following statements create an image icon and display it in a label: Image. Icon image. Icon = new Image. Icon("image/us. gif"); JLabel jlbl. Image = new JLabel(image. Icon); An image icon displays a fixed-size image. To display an image in a flexible size, you need to use the java. awt. Image class. An image can be created from an image icon using the get. Image() method as follows: Image image = image. Icon. get. Image();

34 Using a label as an area for displaying images is simple and convenient, but you don’t have much control over how the image is displayed. A more flexible way to display images is to use the draw. Image method of the Graphics class on a panel.

35 LISTING 13. 11 Display. Image. java 1 import java. awt. *; 2 import javax. swing. *; 3 4 public class Display. Image extends JFrame { 5 public Display. Image() { 6 add(new Image. Panel()); 7} 8 9 public static void main(String[] args) { 10 JFrame frame = new Display. Image(); 11 frame. set. Title("Display. Image"); 12 frame. set. Size(300, 300); 13 frame. set. Location. Relative. To(null); // Center the frame 14 frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); 15 frame. set. Visible(true); 16 } 17 }

36 18 19 class Image. Panel extends JPanel { 20 private Image. Icon image. Icon = new Image. Icon("image/us. gif"); 21 private Image image = image. Icon. get. Image(); 22 23 @Override /** Draw image on the panel */ 24 protected void paint. Component(Graphics g) { 25 super. paint. Component(g); 26 27 if (image != null) 28 g. draw. Image(image, 0, 0, get. Width(), get. Height(), this); 29 } 30 }

37 Assignment No (1) 1 - (Creating four Fans) Write a program that places four fans in a frame of Grid. Layout with two rows and two columns, as shown in Fig (1)

38 2 -(Displaying a Cylinder) Write a program that draws a cylinder, as shown in Fig (2)a in Fig (2)b

39 Thanks for Attention