Graphics Chapter 6 Copyright © 2000 W. W. Norton & Company.

6.1 Creating a Drawing Java’s Abstract Window Toolkit (AWT) provides classes and other tools that are used to build programs that have a graphical user interface. The Graphics class, which belongs to the java.awt package, makes it possible to create line drawings on the screen. This class provides methods for drawing lines, rectangles, ovals, arcs, polygons, and polylines. There’s also a method for displaying text. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Graphics Contexts An instance of the Graphics class is a rectangular area, called a graphics context, that's capable of storing an image. A graphics context consists of many tiny pixels (picture elements), each capable of displaying a single speck of color. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Graphics Contexts An image consisting of black and white pixels:
Copyright © 2000 W. W. Norton & Company. All rights reserved.

Graphics Contexts The pixels in a graphics context are arranged in rows and columns. Each pixel can be identified by a pair of coordinates, with the x coordinate coming first. The pixel at the upper left corner is located at position (0, 0). A graphics context typically contains an image that’s being displayed on the user’s screen. A graphics context can also be printed or used to store an image that's not visible on the screen. Copyright © 2000 W. W. Norton & Company. All rights reserved.

A Sample Graphics Context

Using Graphics Methods
If g is a graphics context, the pixels in g can be changed by calling one of the drawing methods in the Graphics class. The drawLine method draws a line from one point to another: g.drawLine(x1, y1, x2, y2); (x1, y1) is one of the line’s endpoints; (x2, y2) is the other. Copyright © 2000 W. W. Norton & Company. All rights reserved.

The DrawableFrame Class
The DrawableFrame class makes it easy to experiment with the Graphics class. DrawableFrame belongs to the jpb package, which is not a part of the standard Java API. A DrawableFrame object is a window in which images can easily be drawn. When a DrawableFrame object is created, a title for the frame must be specified: DrawableFrame df = new DrawableFrame(title); Copyright © 2000 W. W. Norton & Company. All rights reserved.

Creating a DrawableFrame object doesn’t cause it to be displayed on the screen. The show method is used to make a frame visible: df.show(); The next step is to call setSize to specify the size of the frame’s graphics context: df.setSize(width, height); The values in the call of setSize don’t determine the size of the frame itself, but rather the drawable area inside the frame. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Before doing any drawing within a frame, it’s necessary to call getGraphicsContext: Graphics g = df.getGraphicsContext(); getGraphicsContext returns the frame’s graphics context. After the pixels in g have been changed, the repaint method should be called to make sure that the changes appear on the screen: df.repaint(); Copyright © 2000 W. W. Norton & Company. All rights reserved.

Program: Drawing a Line
The DrawLine program illustrates how to create a DrawableFrame object and draw a line within it. The line will go from (50, 50) to (100, 100). Copyright © 2000 W. W. Norton & Company. All rights reserved.

DrawLine.java // Draws a line inside a frame import java.awt.*;
import jpb.*; public class DrawLine { public static void main(String[] args) { // Create drawable frame DrawableFrame df = new DrawableFrame("Draw Line"); df.show(); df.setSize(150, 150); // Obtain graphics context Graphics g = df.getGraphicsContext(); // Draw line g.drawLine(50, 50, 100, 100); // Repaint frame df.repaint(); } Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Rectangles The Graphics class provides methods to draw three types of rectangles: Ordinary rectangles Rectangles with rounded corners “Three-dimensional” rectangles For each type, there’s one method to draw an outline and another to draw a filled rectangle. Rectangle methods take four arguments or more: The first two specify the rectangle’s upper left corner. The next two specify the rectangle’s width and height. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Ordinary Rectangles The drawRect method draws the outline of a rectangle: g.drawRect(x, y, width, height); The fillRect method draws a filled rectangle: g.fillRect(x, y, width, height); Copyright © 2000 W. W. Norton & Company. All rights reserved.

Ordinary Rectangles An ordinary rectangle:

Rectangles with Rounded Corners
drawRoundRect draws an outline of a rectangle with rounded corners: g.drawRoundRect(x, y, width, height, arcWidth, arcHeight); fillRoundRect draws a filled rectangle: g.fillRoundRect(x, y, width, height, Copyright © 2000 W. W. Norton & Company. All rights reserved.

The arcWidth argument specifies the horizontal diameter of the arc at each corner; arcHeight is the vertical diameter. The upper-right corner of a rounded rectangle: Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Ovals The drawOval and fillOval methods will draw the outline of an oval or a filled oval, respectively: g.drawOval(x, y, width, height); g.fillOval(x, y, width, height); x and y are the coordinates of the upper-left corner of an imaginary rectangle enclosing the oval. width and height are the measurements of this rectangle. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Arcs An arc is a segment of an oval.
The drawArc method requires six arguments: g.drawArc(x, y, width, height, startAngle, arcAngle); The last two arguments specify the angle at which the oval starts and the “arc angle” of the oval. Angles are measured in degrees, with zero degrees at 3 o’clock. If the arc angle is positive, drawing is done in the counterclockwise direction. If the arc angle is negative, drawing is done in the clockwise direction. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Filling Arcs The fillArc method draws a filled arc, which resembles a slice of pie. The arguments to fillArc are the same as those for drawArc. The filled area is a portion of the oval described by the first four arguments to fillArc. The values of startAngle and arcAngle determine which portion is filled. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Polygons A call of drawPolygon requires two arrays.
One array contains the x coordinates of the polygon’s vertices. The other array contains the y coordinates: int[] xCoordinates = {0, 100, 200}; int[] yCoordinates = {100, 0, 100}; drawPolygon also requires a third argument, indicating the number of vertices: g.drawPolygon(xCoordinates, yCoordinates, xCoordinates.length); Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Polygons The result of calling drawPolygon:

Filling Polygons Filling a polygon is similar to drawing one:
g.fillPolygon(xCoordinates, yCoordinates, xCoordinates.length); The third argument in the calls of drawPolygon and fillPolygon could have been 3. Using xCoordinates.length or yCoordinates.length is a better choice. That way, the method call won’t have to be changed later if the number of vertices changes. Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Polygon Class There’s a second technique for drawing (or filling) a polygon. The java.awt package provides a class named Polygon. Instances of this class represent specific polygons. A statement that creates a Polygon object: Polygon p = new Polygon(xCoordinates, yCoordinates, xCoordinates.length); Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Polygon Class The drawPolygon and fillPolygon methods will accept a Polygon object as their argument: g.drawPolygon(p); g.fillPolygon(p); The Polygon class provides several useful operations on polygons. The translate method changes the position of a polygon, and the addPoint method adds another vertex to a polygon. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Polygons in Java A polygon in Java is any series of lines that form a closed region in two-dimensional space. Some polygons are convex—a line drawn from any corner to any other corner will stay within the polygon: Copyright © 2000 W. W. Norton & Company. All rights reserved.

Polygons in Java Java doesn’t require that polygons be convex.
A legal polygon that’s not convex: Java even allows the lines that form a polygon to cross. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Polygons in Java The following polygon was created from four points (the four corners): To produce this figure, the points were placed in the order {upper-left, lower-right, upper-right, lower-left}. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Polylines A polyline is a series of lines, with each line after the first sharing an endpoint with the previous line. A polyline is the same as a polygon, except that Java doesn’t automatically connect the last line back to the first to form a closed figure. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Polylines Drawing a polyline is similar to drawing a polygon.
The first step is to create arrays containing the x and y coordinates of the points in the polyline: int[] xCoordinates = {0, 100, 200}; int[] yCoordinates = {100, 0, 100}; The next step is to call drawPolyline: g.drawPolyline(xCoordinates, yCoordinates, xCoordinates.length); The arguments are the same as for drawPolygon. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Drawing Polylines The result of calling drawPolyline:

6.2 Drawing in Color The state of a Graphics object consists of more than just the pixels that it stores. Each Graphics object also has a “current color.” All drawing is done in that color until the setColor method is called. By default, the drawing color is black. Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Color Class The argument to the setColor method must be an instance of the Color class, which belongs to the java.awt package. A Color object can be created from three integers, indicating the red, green, and blue components of the color. Each component has a value between 0 (no contribution) and 255 (maximum contribution). The color “black” has red, green, and blue values of 0. “White” has values of 255 for all three. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Color Constants The Java API provides constants representing frequently used colors. These constants are defined inside the Color class itself. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Color Constants Red Green Blue Name Component Component Component
black blue cyan darkGray gray green lightGray magenta orange pink red white yellow Copyright © 2000 W. W. Norton & Company. All rights reserved.

Calling the setColor Method
Using a constant from the Color class is done by writing the name of the class (Color), a dot, and then the name of the constant. A call of setColor that changes the current drawing color to magenta: g.setColor(Color.magenta); Copyright © 2000 W. W. Norton & Company. All rights reserved.

Calling the setColor Method
If no Color constant is available for a particular color, a new Color object can be created. Code that sets the drawing color to light blue: Color lightBlue = new Color(64, 192, 255); g.setColor(lightBlue); The new Color object can be passed directly to setColor, without storing it in a variable first: g.setColor(new Color(64, 192, 255)); Copyright © 2000 W. W. Norton & Company. All rights reserved.

6.3 Displaying Text The drawString method is used to display text.
drawString requires three arguments: A string containing the text to be displayed. The x and y coordinates at which the text is to be displayed. A call of drawString: g.drawString("Java rules!", x, y); Copyright © 2000 W. W. Norton & Company. All rights reserved.

Coordinates for Displaying Text
x specifies the horizontal position of the first character in the string. y specifies the vertical position of the string’s baseline: Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Font Class When text is written using drawString, the appearance of the text depends on the “current font,” which is stored in every Graphics object. The current font can be changed by calling the setFont method: g.setFont(newFont); The argument to setFont must be a Font object. Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Font Class Font objects are created by calling the Font constructor, which requires three arguments: the font’s name, style, and size. Font name. The font name is a string, such as "Monospaced", "Serif", or "SansSerif". Other font names are allowed, but there’s no guarantee that a particular font will be available on the user’s computer. Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Font Class Font style. Possible styles are bold, italic, and plain, represented by the constants Font.BOLD, Font.ITALIC, and Font.PLAIN. Writing Font.BOLD + Font.ITALIC creates a font that’s both bold and italic. Font size. Font sizes are measured in points. (A point is approximately 1/72" or 0.35 mm.) Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Font Class An example of using the Font constructor:
Font f = new Font("SansSerif", Font.BOLD, 24); The font name can be stored in a variable: Font f = new Font(fontName, Font.BOLD, 24); Don’t put quotes around a variable name: Font f = new Font("fontName", Font.BOLD, 24); The Font constructor will treat "fontName" itself as the name of the desired font. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Calling the setFont Method
Passing f to the setFont method changes the current font: g.setFont(f); If desired, the font can be created within the call of setFont: g.setFont(new Font("SansSerif", Font.BOLD, 24)); A common programming mistake is to create a Font object, but fail to pass it to setFont. Copyright © 2000 W. W. Norton & Company. All rights reserved.

DisplayText.java // Displays text in three different colors and styles
import java.awt.*; import jpb.*; public class DisplayText { public static void main(String[] args) { // Create drawable frame DrawableFrame df = new DrawableFrame("Display Text"); df.show(); df.setSize(210, 85); // Obtain graphics context Graphics g = df.getGraphicsContext(); Copyright © 2000 W. W. Norton & Company. All rights reserved.

// Display "Monospaced Bold" g.setColor(Color.red);
g.setFont(new Font("Monospaced", Font.BOLD, 20)); g.drawString("Monospaced Bold", 15, 25); // Display "SansSerif Italic" g.setColor(Color.green); g.setFont(new Font("SansSerif", Font.ITALIC, 20)); g.drawString("SansSerif Italic", 15, 50); // Display "Serif Plain" g.setColor(Color.blue); g.setFont(new Font("Serif", Font.PLAIN, 20)); g.drawString("Serif Plain", 15, 75); // Repaint frame df.repaint(); } Copyright © 2000 W. W. Norton & Company. All rights reserved.

6.4 Combining Text with Graphics
Combining text with graphics is easy, because the graphics methods (such as drawLine and drawRect) and the text method (drawString) all operate on a Graphics object. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Design of the StopSign Program
The program will need to draw three figures: An eight-sided polygon (black). A filled eight-sided polygon (red). The word STOP in sans serif (white). drawPolygon can be used to draw the black polygon. fillPolygon can be used to draw the filled red polygon. drawString can be used to display the word STOP. Copyright © 2000 W. W. Norton & Company. All rights reserved.

StopSign.java // Displays a stop sign import java.awt.*; import jpb.*;
public class StopSign { public static void main(String[] args) { // Create drawable frame DrawableFrame df = new DrawableFrame("Stop Sign"); df.show(); df.setSize(125, 125); // Obtain graphics context Graphics g = df.getGraphicsContext(); // Define coordinates of outer polygon (edge of sign) and // inner polygon (red portion) int[] xOuter = {36, 87, 123, 123, 87, 36, 0, 0}; int[] yOuter = {0, 0, 36, 87, 123, 123, 87, 36}; Copyright © 2000 W. W. Norton & Company. All rights reserved.

// Draw edge of sign in black g.setColor(Color.black);
int[] xInner = {37, 86, 118, 118, 86, 37, 5, 5}; int[] yInner = {5, 5, 37, 86, 118, 118, 86, 37}; // Draw edge of sign in black g.setColor(Color.black); g.drawPolygon(xOuter, yOuter, xOuter.length); // Fill interior of sign with red g.setColor(Color.red); g.fillPolygon(xInner, yInner, xInner.length); // Display "STOP" in white g.setColor(Color.white); g.setFont(new Font("Helvetica", Font.BOLD, 36)); g.drawString("STOP", 13, 76); // Repaint frame df.repaint(); } Copyright © 2000 W. W. Norton & Company. All rights reserved.

The Facebook Graphic Example

More JAVA GUI Programming in Chapter 12

6.6 Debugging A program that displays graphics in a frame can still display output using System.out.print and System.out.println. This output will appear in the window from which the program was launched. The ability to display messages in the original window is valuable for debugging. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Printing Objects System.out.println, when given an object as its argument, will automatically call the object's toString method. (System.out.print has the same ability.) All objects have a toString method. (If a class doesn’t declare a toString method, Java supplies one automatically through a mechanism known as inheritance.) Printing an object may supply useful debugging information about the object. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Printing Objects Printing a Color object: Output produced:
System.out.println(Color.lightGray); Output produced: java.awt.Color[r=192,g=192,b=192] Printing a Font object: Font f = new Font("SansSerif", Font.BOLD, 24); System.out.println(f); java.awt.Font[family=SansSerif,name=SansSerif, style=bold,size=24] Copyright © 2000 W. W. Norton & Company. All rights reserved.

Printing Objects Printing an object variable can be used to make sure that the variable actually contains an object and that the object has the expected state. It’s not necessary to test whether an object variable is null before printing it. If the variable’s value is null, the word null will be displayed. Although any object can be printed, the amount of information displayed varies from class to class. Copyright © 2000 W. W. Norton & Company. All rights reserved.

Graphics Chapter 6 Copyright © 2000 W. W. Norton & Company.

Similar presentations

Presentation on theme: "Graphics Chapter 6 Copyright © 2000 W. W. Norton & Company."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Graphics Chapter 6 Copyright © 2000 W. W. Norton & Company.

Similar presentations

Presentation on theme: "Graphics Chapter 6 Copyright © 2000 W. W. Norton & Company."— Presentation transcript:

Similar presentations

About project

Feedback