Your SlideShare is downloading. ×
  • Like
×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

13slide graphics

  • 308 views
Published

 

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
308
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
26
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Chapter 13 GraphicsLiang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 1
  • 2. MotivationsIf you want to draw shapes such as a bar chart, aclock, or a stop sign, how do you do it? Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 2
  • 3. Objectives To describe Java coordinate systems in a GUI component (§13.2). To draw things using the methods in the Graphics class (§13.3). To override the paintComponent method to draw things on a GUI component (§13.3). To use a panel as a canvas to draw things (§13.3). To draw strings, lines, rectangles, ovals, arcs, and polygons (§§13.4, 13.6-13.7). To obtain font properties using FontMetrics and know how to center a message (§13.8). To display an image in a GUI component (§13.11). To develop reusable GUI components FigurePanel, MessagePanel, StillClock, and ImageViewer (§§13.5, 13.9, 13.10, 13.12). Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 3
  • 4. Java Coordinate System x Y Axis (0, 0) X Axisy (x, y) (0, 0) X Axis Java Coordinate Conventional System Coordinate System Y Axis Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 4
  • 5. Each GUI Component Has its Own Coordinate System(x3, y3) c3’s coordinate (0, 0) Component c3 system (x2, y2) (0, 0) Component c2 c2’s coordinate system (x1, y1) (0, 0) Component c1 c1’s coordinate system Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 5
  • 6. The Graphics Class java.awt.GraphicsYou can draw strings, +setColor(color: Color): void +setFont(font: Font): void Sets a new color for subsequent drawings. Sets a new font for subsequent drwings.lines, rectangles, ovals, +drawString(s: String, x: int, y: int): void Draws a string starting at point (x, y). +drawLine(x1: int, y1: int, x2: int, y2: int): void Draws a line from (x1, y1) to (x2, y2).arcs, polygons, and +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.polylines, using the +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.methods in the Graphics +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.class. +fillRoundRect(x: int, y: int, w: int, h: int, aw: int, ah: int): void Draws a filled round-cornered rectangle with specified arc 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 Draws a filled polygon defined by a Polygon object. +drawPolyline(xPoints: int[], yPoints: int[], Draws a polyline defined by arrays of x and y coordinates. nPoints: int): void Each pair of (x[i], y[i]) coordinates is a point. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 6
  • 7. paintComponent ExampleIn order to draw things on a component, you needto define a class that extends JPanel and overridesits paintComponent method to specify what todraw. The first program in this chapter can berewritten using paintComponent. TestPaintComponent Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 7
  • 8. Drawing Geometric Figures Drawing Strings Drawing Lines Drawing Rectangles Drawing Ovals Drawing Arcs Drawing Polygons Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 8
  • 9. Drawing Strings (0, 0) (getWidth(), 0) (0, 0) (getWidth(), 0) (x1, y1)(x, y) s is display here (x2, y2) (0, getHeight()) (getWidth(), getHeight()) (0, getHeight()) (getWidth(), getHeight()) drawString(String s, int x, int y); drawLine(int x1, int y1, int x2, int y2); Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 9
  • 10. Drawing Rectangles drawRect(int x, int y, int w, int h); fillRect(int x, int y, int w, int h);(x, y) (x, y) h h w w Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 10
  • 11. Drawing Rounded RectanglesdrawRoundRect(int x, int y, int w, int h, int aw, int ah);fillRoundRect(int x, int y, int w, int h, int aw, int ah); (x, y) ah/2 aw/2 h w Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 11
  • 12. Drawing OvalsdrawOval(int x, int y, int w, int h);fillOval(int x, int y, int w, int h);(x, y) h w Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 12
  • 13. Case Study: The FigurePanel ClassThis example develops a useful class for displaying variousfigures. The class enables the user to set the figure type andspecify whether the figure is filled, and displays the figure on apanel. javax.swing.JPanel -char token +getToken FigurePanel +setToken +paintComponet LINE, RECTANGLE, +LINE = 1 +mouseClicked ROUND_RECTANGLE, and OVAL are +RECTANGLE = 2 constants. +ROUND_RECTANGLE = 3 +OVAL = 4 -type: int Specifies the figure type (default: 1). -filled: boolean Specifies whether the figure is filled (default: false). +FigurePanel() Creates a default figure panel. +FigurePanel(type: int) Creates a figure panel with the specified type. +FigurePanel(type: int, filled: boolean) Creates a figure panel with the specified type and filled property. +getType(): int Returns the figure type. +setType(type: int): void Sets a new figure type. FigurePanel +isFilled(): boolean Checks whether the figure is filled with a color. +setFilled(filled: boolean): void Sets a new filled property. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 13
  • 14. Test FigurePanelThis example develops a useful class for displaying variousfigures. The class enables the user to set the figure type andspecify whether the figure is filled, and displays the figure on apanel. TestFigurePanel Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 14
  • 15. Drawing ArcsdrawArc(int x, int y, int w, int h, int angle1, int angle2);fillArc(int x, int y, int w, int h, int angle1, int angle2); Angles are in degree Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 15
  • 16. Drawing Arcs Example DrawArcs RunLiang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 16
  • 17. Drawing Polygons and Polylinesint[] x = {40, 70, 60, 45, 20};int[] y = {20, 40, 80, 45, 60}; g.drawPolyline(x, y, x.length);g.drawPolygon(x, y, x.length); (x[0], y[0]) (x[0], y[0]) (x[1], y[1]) (x[1], y[1]) (x[3], y[3]) (x[3], y[3])(x[4], y[4]) (x[4], y[4]) (x[2], y[2]) (x[2], y[2]) Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 17
  • 18. Drawing Polygons Using the Polygon ClassPolygon polygon = new Polygon();polygon.addPoint(40, 59);polygon.addPoint(40, 100);polygon.addPoint(10, 100);g.drawPolygon(polygon); Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 18
  • 19. Drawing Polygons Example DrawPolygon Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 19
  • 20. Centering Display Using the FontMetrics ClassYou can display a string at any location in a panel. Can you displayit centered? To do so, you need to use the FontMetrics class tomeasure the exact width and height of the string for a particularfont. A FontMetrics can measure the following attributes: public int getAscent()  public int getHeight() public int getDescent()  public int stringWidth(String str) public int getLeading() getLeading()getHeight() getAscent() getDescent() Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 20
  • 21. The FontMetrics ClassFontMetrics is an abstract class. To get a FontMetricsobject for a specific font, use the followinggetFontMetrics methods defined in the Graphics class: · public FontMetrics getFontMetrics(Font f)Returns the font metrics of the specified font. · public FontMetrics getFontMetrics()Returns the font metrics of the current font. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 21
  • 22. panel stringWidthgetHeight() stringAscent Welcome to Java getWidth() TestCenterMessage Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 22
  • 23. Case Study: MessagePanel javax.swing.JPanel The get and set methods for these data This case study fields are provided in the class, but-char token omitted in the UML diagram develops a useful class+getToken MessagePanel+setToken that displays a message+paintComponet+mouseClicked int-xCoordinate: The x-Coordinate for the message (default 20). in a panel. The class-yCoordinate: int-centered: boolean The y-Coordinate for the message (default 20). Specifies whether the message is displayed centered. enables the user to set-message: String The message to be displayed. the location of the-interval: int The interval to move the message in the panel. message, center the+MessagePanel()+MessagePanel(message: String) Constructs a default message panel. Constructs a message panel with a specified string. message, and move the+moveLeft(): void Moves the message to the left. message with the+moveRight(): void Moves the message to the right.+moveUp(): void Moves the message up. specified interval.+moveDown(): void Moves the message down. MessagePanel TestMessagePanel Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 23
  • 24. Case Study: StillClock javax.swing.JPanel The get and set methods for these data fields are provided in the class, but-char token omitted in the UML diagram+getToken StillClock+setToken+paintComponet-hour: int+mouseClicked The hour in the clock.-minute: int The minute in the clock.-second: int The second in the clock.+StillClock() Constructs a default clock for the current time.+StillClock(hour: int, minute: int, Constructs a clock with a specified time. second: int)+setCurrentTime(): void Sets time to current time. StillClock DisplayClock Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 24
  • 25. Drawing ClockxEnd = xCenter + handLength sin( ) Since there are sixty seconds in one minute, the angle foryEnd = yCenter - handLength cos( ) the second hand is second (2 /60) Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 25
  • 26. Drawing Clock, cont. xEnd = xCenter + handLength sin( ) yEnd = yCenter - handLength cos( )The position of the minute hand isdetermined by the minute andsecond. The exact minute valuecombined with seconds is minute +second/60. For example, if the timeis 3 minutes and 30 seconds. Thetotal minutes are 3.5. Since there aresixty minutes in one hour, the anglefor the minute hand is(minute + second/60) (2 /60) Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 26
  • 27. Drawing Clock, cont.xEnd = xCenter + handLength sin( )yEnd = yCenter - handLength cos( )Since one circle is divided intotwelve hours, the angle for thehour hand is(hour + minute/60 + second/(60 60))) (2 /12) Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 27
  • 28. Displaying Image IconsYou learned how to create image icons and display image icons inlabels and buttons. For example, the following statements create animage icon and display it in a label:ImageIcon icon = new ImageIcon("image/us.gif");JLabel jlblImage = new JLabel(imageIcon);An image icon displays a fixed-size image. To display an image in aflexible size, you need to use the java.awt.Image class. An image canbe created from an image icon using the getImage() method asfollows:Image image = imageIcon.getImage(); Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 28
  • 29. Displaying ImagesUsing a label as an area for displaying images is simple andconvenient, but you dont have much control over how the image isdisplayed. A more flexible way to display images is to use thedrawImage method of the Graphics class on a panel. Four versionsof the drawImage method are shown here. java.awt.Graphics+drawImage(image: Image, x: int, y: int, Draws the image in a specified location. The images top-left corner is at bgcolor: Color, observer: (x, y) in the graphics contexts coordinate space. Transparent pixels in ImageObserver): void the image are drawn in the specified color bgcolor. The observer is the object on which the image is displayed. The image is cut off if it is larger than the area it is being drawn on.+drawImage(image: Image, x: int, y: int, Same as the preceding method except that it does not specify a background observer: ImageObserver): void color.+drawImage(image: Image, x: int, y: int, Draws a scaled version of the image that can fill all of the available space width: int, height: int, observer: in the specified rectangle. 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 Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 29
  • 30. Displaying Images ExampleThis example gives the code that displays an image fromimage/us.gif. The file image/us.gif is under the class directory. TheImage from the file is created in the program. The drawImagemethod displays the image to fill in the whole panel, as shown in thefigure. DisplayImage Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 30
  • 31. Case Study: ImageViewer ClassDisplaying an image is a common task in Java programming. Thiscase study develops a reusable component named ImageViewer thatdisplays an image in a panel. The ImageViewer class contains theproperties image, imageFilename, stretched, xCoordinate, andyCoordinate. javax.swing.JPanel The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity. ImageViewer -image: Image Image in the image viewer. -stretched: boolean True if the image is stretched in the viewer. -xCoordinate: int x-coordinate of the upper-left corner of the image in the viewer. -yCoordinate: int y-coordinate of the upper-left corner of the image in the viewer. +ImageViewer() Constructs an image viewer with no image. +ImageViewer(imageFile: String) Constructs an image viewer with the specified image file. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 31
  • 32. ImageView ExampleThis example gives an example that creates six images using theImageViewer class. SixFlags Run Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 32