slide4.2_2009 - Module 4.2 Module Graphics Graphics...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Module 4.2 Module Graphics Graphics EE3206/EE5805 Java Programming & Applications 1 Intended Learning Outcomes To understand Java coordinate systems. To To draw things using the methods in the Graphics class. Graphics To obtain a graphics context using the getGraphics() method. getGraphics To override the paintComponent method to draw things on a graphical context. paintComponent To use a panel as a canvas to draw things. To To draw strings, lines, rectangles, ovals, arcs, and polygons. To To obtain font properties using FontMetrics and know how to center a message. FontMetrics To display image in a GUI component To To develop reusable GUI components FigurePanel, MessagePanel, and FigurePanel MessagePanel and ImageViewer. ImageViewer EE3206/EE5805 Java Programming & Applications 2 Java Coordinate System x (0, 0) X Axis Y Axis y (x, y) Java Coordinate System Y Axis Conventional Coordinate System (0, 0) X Axis Common to most image processing systems EE3206/EE5805 Java Programming & Applications 3 Each GUI Component Has its Each Own Coordinate System Own (c3.getX(), c3.getY()) c3.getX() (x, y) (0, 0) (x, y) Component c3 c3’s coordinate system (c2.getX(), c2.getY()) (0, 0) (x, y) (0, 0) Component c2 Component c1 c2’s coordinate system (c1.getX(), c1.getY()) c1’s coordinate system EE3206/EE5805 Java Programming & Applications 4 Obtaining Graphics Object The Graphics class is an abstract class that provides a device-iindependent ndependent Graphics graphics interface for displaying figures and images on the screen on different graphics en platforms. Whenever a component (e.g., a button, a label, a panel) is displayed, a Graphics Whenever ayed, Graphics object is created for the component on the native platform. This object can be object obtained using the getGraphics() method (inherited from JComponent). For getGraphics method JComponent). example, the graphics context for a label object jlblBanner can be obtained using jlblBanner Graphics graphics = jlblBanner.getGraphics(); graphics jlblBanner.getGraphics You can then apply the methods in the Graphics class to draw things on the Graphics class label’s graphics context. label EE3206/EE5805 Java Programming & Applications 5 The Graphics Class The Graphics java.awt.Graphics +setColor(color: Color): void +setFont(font: Font): void +drawString(s: String, x: int, y: int): void Sets a new color for subsequent drawings. Sets a new font for subsequent drwings. Draws a string starting at point (x, y). You can draw: strings, lines, rectangles, ovals, arcs, polygons, and polylines, polylines using the methods in the Graphics Graphics class. class. +drawLine(x1: int, y1: int, x2: int, y2: int): void Draws a line from (x1, y1) to (x2, y2). +drawRect(x: int, y: int, w: int, h: int): void Draws a rectangle with specified upper-left corner point at (x, y) and width w and height h. +fillRect(x: int, y: int, w: int, h: int): void Draws a filled rectangle with specified upper-left corner point at (x, y) and width w and height h. +drawRoundRect(x: int, y: int, w: int, h: int, aw: Draws a round-cornered rectangle with specified arc width aw int, ah: int): void and arc height ah. +fillRoundRect(x: int, y: int, w: int, h: int, aw: Draws a filled round-cornered rectangle with specified arc int, ah: int): void width aw and arc height ah. +draw3DRect(x: int, y: int, w: int, h: int, raised: Draws a 3-D rectangle raised above the surface or sunk into the boolean): void surface. +fill3DRect(x: int, y: int, w: int, h: int, raised: Draws a filled 3-D rectangle raised above the surface or sunk boolean): void into the surface. +drawOval(x: int, y: int, w: int, h: int): void Draws an oval bounded by the rectangle specified by the parameters x, y, w, and h. +fillOval(x: int, y: int, w: int, h: int): void Draws a filled oval bounded by the rectangle specified by the parameters x, y, w, and h. +drawArc(x: int, y: int, w: int, h: int, startAngle: Draws an arc conceived as part of an oval bounded by the int, arcAngle: int): void rectangle specified by the parameters x, y, w, and h. +fillArc(x: int, y: int, w: int, h: int, startAngle: Draws a filled arc conceived as part of an oval bounded by the int, arcAngle: int): void rectangle specified by the parameters x, y, w, and h. +drawPolygon(xPoints: int, yPoints: int, Draws a closed polygon defined by arrays of x and y nPoints: int): void coordinates. Each pair of (x[i], y[i]) coordinates is a point. +fillPolygon(xPoints: int, yPoints: int, Draws a filled polygon defined by arrays of x and y nPoints: int): void coordinates. Each pair of (x[i], y[i]) coordinates is a point. +drawPolygon(g: Polygon): void Draws a closed polygon defined by a Polygon object. +fillPolygon(g: Polygon): void +drawPolyline(xPoints: int, yPoints: int, Draws a filled polygon defined by a Polygon object. Draws a polyline defined by arrays of x and y coordinates. EE3206/EE5805 Java Programming & Applications (x[i], y[i]) coordinates is a point. nPoints: int): void Each pair of 6 A Drawing Example (0, 0) (50, 50) Draw a line and a text Draw TestGetGraphics Run EE3206/EE5805 Java Programming & Applications 7 Problems With the Preceding Example If you resize the frame, the line is gone. Why? If To fix this problem, you need to know its cause. When you resize the frame, the JVM invokes the paintComponent method paintComponent method of a Swing component (e.g., a label) to redisplay the graphics on of the component. Since you did not draw a line in the paintComponent method, the line is gone when the frame is paintComponent method, resized. To permanently display the line, you need to draw the line in the paintComponent method. paintComponent EE3206/EE5805 Java Programming & Applications 8 The paintComponent() Method The paintComponent The paintComponent method is defined in JComponent, and its header is as paintComponent method JComponent and follows: follows: protected void paintComponent(Graphics g) paintComponent(Graphics This method, defined in the JComponent class, is invoked whenever the JComponent class, component is first displayed or redisplayed. first The Graphics object g iis created automatically by the JVM for every visible GUI Graphics object s component. The JVM obtains the Graphics object and passes it to invoke Graphics object paintComponent. paintComponent In order to draw things on a component (e.g., a JLabel), you need to declare a class JLabel), that extends a Swing GUI component class and overrides its paintComponent extends class paintComponent method to specify what to draw. The previous problem can be solve by rewriting by paintComponent. paintComponent TestPaintComponent Run 9 EE3206/EE5805 Java Programming & Applications Drawing Geometric Figures on Panels JPanel can be used to draw graphics (including text) and enable user interaction. JPanel Drawing Strings Drawing Drawing Lines Drawing Drawing Rectangles Drawing Drawing Ovals Drawing Drawing Arcs Drawing Drawing Polygons Drawing To draw in a panel, you create a new class that extends JPanel and override the JPanel and paintComponent method to tell the panel how to draw things. You can then paintComponent method display strings, draw geometric shapes, and view images on the panel. display TestPanelDrawing Run 10 EE3206/EE5805 Java Programming & Applications Drawing Strings and Lines The baseline of the leftmost character is at position (x, y). (0, 0) (getWidth(), 0) (0, 0) (x1, y1) (x, y) (getWidth(), 0) s is display here (x2, y2) (getWidth(), getHeight()) (getWidth(), getHeight()) (0, getHeight()) (0, getHeight()) drawString(String s, int x, int y); s, int x, int drawLine(int x1, int y1, int x2, int y2); drawLine(int x1, int y1, int x2, int EE3206/EE5805 Java Programming & Applications 11 Drawing Rectangles drawRect(int x, int y, int w, int h); x, int y, int w, int fillRect(int x, int y, int w, int h); x, int y, int w, int (x , y ) ( x , y) h h w w EE3206/EE5805 Java Programming & Applications 12 Drawing Rounded Rectangles drawRoundRect(int x, int y, int w, int h, int aw, int ah); x, int y, int w, int h, int aw, int fillRoundRect(int x, int y, int w, int h, int aw, int ah); x, int y, int w, int h, int aw, int (x , y) a h /2 a w /2 ah = arc height aw = arc width h w EE3206/EE5805 Java Programming & Applications 13 Drawing Ovals drawOval(int x, int y, int w, int h); x, int y, int w, int fillOval(int x, int y, int w, int h); x, int y, int w, int (x, y) h w EE3206/EE5805 Java Programming & Applications 14 Drawing Arcs drawArc(int x, int y, int w, int h, int angle1, int angle2); x, int y, int w, int h, int angle1, int fillArc(int x, int y, int w, int h, int angle1, int angle2); x, int y, int w, int h, int angle1, int Angles are in degree EE3206/EE5805 Java Programming & Applications 15 Drawing Arcs Example DrawArcs Run 16 EE3206/EE5805 Java Programming & Applications Drawing Polygons and Polylines Drawing Polylines int x = {40, 70, 60, 45, 20}; int y = {20, 40, 80, 45, 60}; g.drawPolygon(x, y, x.length); g.drawPolyline(x, y, x.length); (x[0], y[0]) (x[1], y[1]) (x[3], y[3]) (x[0], y[0]) (x[1], y[1]) (x[3], y[3]) (x[4], y[4]) (x[2], y[2]) (x[4], y[4]) (x[2], y[2]) EE3206/EE5805 Java Programming & Applications 17 Drawing Polygons Drawing Using the Polygon Class Using Polygon polygon = new Polygon(); polygon.addPoint(40, 59); polygon.addPoint(40, 100); polygon.addPoint(10, 100); g.drawPolygon(polygon); EE3206/EE5805 Java Programming & Applications 18 Drawing Polygons Example DrawPolygon Run 19 EE3206/EE5805 Java Programming & Applications Displaying Image Icons You learned how to create image icons and display image icons in labels and buttons. For example, the following statements create an image icon and display it in a label: ImageIcon imageIcon = new ImageIcon("image/us.gif"); JLabel jlblImage = new JLabel(imageIcon); 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 getImage() method as follows: Image image = imageIcon.getImage(); EE3206/EE5805 Java Programming & Applications 20 Displaying Images 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 drawImage method of the Graphics class on a panel. Four versions of the drawImage method are shown here. java.awt.Graphics +drawImage(image: Image, x: int, y: int, bgcolor: Color, observer: ImageObserver): void Draws the image in a specified location. The image's top-left corner is at (x, y) in the graphics context's coordinate space. Transparent pixels in the image are drawn in the specified color bgcolor. The observer is the object (e.g. JPanel) on which the image is displayed (usually this). The image is cut off if it is larger than the area it is being drawn on. Same as the preceding method except that it does not specify a background color. Draws a scaled version of the image that can fill all of the available space in the specified rectangle. +drawImage(image: Image, x: int, y: int, observer: ImageObserver): void +drawImage(image: Image, x: int, y: int, width: int, height: int, observer: ImageObserver): void +drawImage(image: Image, x: int, y: int, Same as the preceding method except that it provides a solid background width: int, height: int, bgcolor: Color, color behind the image being drawn. observer: ImageObserver): void EE3206/EE5805 Java Programming & Applications 21 Displaying Images Example This example gives the code that displays an image from image/us.gif. The file image/us.gif is under the class directory. The Image from the file is created in the program. The drawImage method displays the image to fill in the whole panel, as shown in the figure. DisplayImage Run 22 EE3206/EE5805 Java Programming & Applications Case Study EE3206/EE5805 Java Programming & Applications 23 Case Study 1: The FigurePanel Class Case FigurePanel Class This example develops a useful class for displaying various figures. The class This res. enables the user to set the figure type and specify whether the figure is filled, and displays the figure on a panel. javax.swing.JPanel FigurePanel LINE, RECTANGLE, ROUND_RECTANGLE, and OVAL are constants. FigurePanel +LINE = 1 +RECTANGLE = 2 +ROUND_RECTANGLE = 3 +OVAL = 4 -type: int -filled: boolean +FigurePanel() +FigurePanel(type: int) +FigurePanel(type: int, filled: boolean) +getType(): int +setType(type: int): void +isFilled(): boolean Specifies the figure type (default: 1). Specifies whether the figure is filled (default: false). Creates a default figure panel. Creates a figure panel with the specified type. Creates a figure panel with the specified type and filled property. Returns the figure type. Sets a new figure type. Checks whether the figure is filled with a color. 24 +setFilled(filled: boolean): void Sets Java filled property. EE3206/EE5805 a new Programming & Applications Test FigurePanel Test FigurePanel This example develops a useful class for displaying various This figures. The class enables the user to set the figure type and specify whether the figure is filled, and displays the figure on a specify panel. TestFigurePanel Run EE3206/EE5805 Java Programming & Applications 25 Case Study 2: ImageViewer Class Case Study Displaying an image is a common task in Java programming. This case study develops a reusable component named ImageViewer that displays an image in a panel. The ImageViewer class contains the properties image, imageFilename, stretched, xCoordinate, and yCoordinate. javax.swing.JPanel ImageViewer -image: Image -stretched: boolean -xCoordinate: int -yCoordinate: int +ImageViewer() +ImageViewer(imageFile: String) The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity. Image in the image viewer. True if the image is stretched in the viewer. x-coordinate of the upper-left corner of the image in the viewer. y-coordinate of the upper-left corner of the image in the viewer. Constructs an image viewer with no image. Constructs an image viewer with the specified image file. 26 EE3206/EE5805 Java Programming & Applications ImageView Example This example gives an example that creates six images using the ImageViewer class. SixFlags Run EE3206/EE5805 Java Programming & Applications 27 ...
View Full Document

Ask a homework question - tutors are online