Graphics

Graphics Features in Java Topics to be covered Topics to be covered Graphics Basics Graphics Basics Coordinate System Coordinate System Graphics, Color, Font classes Graphics, Color, Font classes Displaying graphics Displaying graphics Graphic User Interface (GUI) Graphic User Interface (GUI) Frames and Containers Frames and Containers Applets Applets Event-driven Programs Event-driven Programs

Graphics-related Classes in Package java.awt Graphics Graphics —for drawing geometric figures —for drawing geometric figures Color Color —for background and foreground colors for text, for geometric figures —for background and foreground colors for text, for geometric figures Font Font —for text formatting, size, style, face, etc. —for text formatting, size, style, face, etc.

Java Coordinate System Draw figures on a “canvas,” such an applet or a frame. Draw figures on a “canvas,” such an applet or a frame.

Graphics Methods A Graphics object provides a handle (graphics environment) for various graphics methods, such as A Graphics object provides a handle (graphics environment) for various graphics methods, such as SetColor() SetColor() setFont() setFont() drawRect() drawRect() drawOval() drawOval() fillRect() fillRect() fillOval() fillOval()

Drawing a Rectangle The following code segments draws a rectangle with a blue outline. The following code segments draws a rectangle with a blue outline. int xStart = 10; // in pixels int yStart = 20; int width = 100; int height =50; Graphics g = new Graphics(); g.setColor(Color.blue); g.drawRect(xStart, yStart, width, height);

Drawing an Oval The following statement draws an oval which is inscribed in a rectangle of the given dimensions. (The rectangle will not be shown.) The following statement draws an oval which is inscribed in a rectangle of the given dimensions. (The rectangle will not be shown.) g.drawOval(xStart, yStart, width, height); (xStart, yStart) heightheight width

Drawing a Circle The following statements draw a circle of radius 10 (pixels), at (30, 40), and a filled circle at (50, 60). (Note that (startX, startY) refers to the corner of a circumscribed rectangle.) int r = 10; int startX = 30; int startY = 40; Graphics g = new Graphics(); g.drawOval(startX, startY, 2 * r, 2 * r); g.fillOval(startX + 20, startY + 29, 2 * r, 2 * r) The following statements draw a circle of radius 10 (pixels), at (30, 40), and a filled circle at (50, 60). (Note that (startX, startY) refers to the corner of a circumscribed rectangle.) int r = 10; int startX = 30; int startY = 40; Graphics g = new Graphics(); g.drawOval(startX, startY, 2 * r, 2 * r); g.fillOval(startX + 20, startY + 29, 2 * r, 2 * r)

Drawing an Arc The following statement draws an arc, which is defined in terms of an oval. The following statement draws an arc, which is defined in terms of an oval. g.drawArc(xStart, yStart, width, height, startAngle, arcAngle); startAngle (xStart, yStart) heightheight width arcAngle

Filling Rectangles and Ovals g.setColor(Color.blue); g.fillRect(xStart, yStart, width, height); g.fillOval(xStart, yStart + 70, width, height); g.setColor(Color.yellow); g.fillOval(xStart, yStart + 140, width, height);

Drawing a Line The following statements draw a line from (20, 30) to (120, 50). The following statements draw a line from (20, 30) to (120, 50). xStart = 20; yStart = 30; xEnd = 120; yEnd = 50; drawLine(xStart, yStart, xEnd, yEnd);

Drawing a Text The following statements draw a text starting at (20, 30). The following statements draw a text starting at (20, 30). int xText = 20; int yText = 30; g.drawString("Welcome to Hawaii.", xText, yText);

Setting Color The following statements create a yellow circle at (20, 40) and a blue square at (80, 40). The following statements create a yellow circle at (20, 40) and a blue square at (80, 40). int r = 10; g.setColor(Color.YELLOW); g.fillOval(20, 40, r, r); g.setColor(Color.BLUE); g.fillRect(80, 40, r, r);

RGB Colors Color Constant RGB ORANGE 255, 200, 0 PINK 255, 175, 175 CYAN 0, 255, 255 MAGENTA 255, 0, 255 YELLOW 255, 255, 0 BLACK 0, 0, 0 WHITE 255, 255, 255 GRAY 128, 128, 128 LIGHT_GRAY 192, 192, 192 DARK_GRAY 64, 64, 64 RED 255, 0, 0 BLUE 0, 0, 255 GREEN 0, 255, 0

Exercise: Rectangle and Line Write a Java code segment to create the following figure. (Solution) Write a Java code segment to create the following figure. (Solution)(Solution)(Solution)

Rectangle and Line int xStartRect = 0; int yStartRect = 0; int width = 100; int height = 50; g.setColor(Color.RED); g.fillRect(xStartRect, yStartRect, width, height); g.setColor(Color.BLACK); int xStartLine = xStartRect; int yStartLine = yStartRect; int xEndLine = xStartLine + width; int yEndLine = yStartLine = height; g.drawLine(xStartLine, yStartLine, xEndLine, yEndLine);

Exercise Write a code segment which will produce a circle of radius 100, centered at (150, 200), and a horizontal line segment from the center to the circle. Write a code segment which will produce a circle of radius 100, centered at (150, 200), and a horizontal line segment from the center to the circle.

Exercise (cont.) If the center is at (150, 200), the right-top corner is (50, 100), and the width and height of the circumscribed rectangle are both 200. If the center is at (150, 200), the right-top corner is (50, 100), and the width and height of the circumscribed rectangle are both 200. (50, 100)(150, 100) (50, 200) (150, 200) (250, 200)

Displaying Graphics Graphics objects must be drawn inside a “container” Graphics objects must be drawn inside a “container” Top-level Container (heavy-weight) Top-level Container (heavy-weight) JApplet, JFrame, JWindow JApplet, JFrame, JWindow Secondary Container: (light-weight) Secondary Container: (light-weight) JPanel, JScrollPane, JRootPane JPanel, JScrollPane, JRootPane Used to arrange layout of components like JButton, JLabel, JtextField, etc Used to arrange layout of components like JButton, JLabel, JtextField, etc

CircleDemoApplet The following demo applet shows: The following demo applet shows: The following demo applet The following demo applet Orange circle of diameter 150, centered at (200, 200). Orange circle of diameter 150, centered at (200, 200). A 150 x 30 blue rectangle, located 30 px from left edge of circle & 50 px above its bottom A 150 x 30 blue rectangle, located 30 px from left edge of circle & 50 px above its bottom A text inside the rectangle A text inside the rectangle

ColorUse Demo Applet (cont.) All drawings occur in paint() method. All drawings occur in paint() method. setBackground() --sets the applet's background color setBackground() --sets the applet's background color g.setColor()-- sets the color for the graphics context (unless it is changed, color remains the same for all subsequent figures) g.setColor()-- sets the color for the graphics context (unless it is changed, color remains the same for all subsequent figures) Color myColor = new Color(0,200,200); g.setColor(myColor); can be combined to g.setColor(new Color(0, 200, 200)); Color myColor = new Color(0,200,200); g.setColor(myColor); can be combined to g.setColor(new Color(0, 200, 200));

Font Class Name Name Specific, like “Helvetica”, “Courier New” Specific, like “Helvetica”, “Courier New” Family, like “San Serif”, “Monospaced” Family, like “San Serif”, “Monospaced” Style Style BOLD, ITALIC, PLAIN BOLD, ITALIC, PLAIN Size Size 10, 12, 18, etc., in “points” 10, 12, 18, etc., in “points” Font f = new Font("Helvetica", Font.BOLD, 24); g.setFont(f); g.drawString("Hawaii", 50, 50);

Font Demo The following code segment produces the lines of display shown below. The following code segment produces the lines of display shown below.following code segment following code segment

Example: Greeting Draw the image consisting of Draw the image consisting of 1. Background in cyan 2. 6 ovals at the top 3. 1 yellow circle 4. 6 rectangles at bottom 5. A text message across the circle Solution

Greeting import javax.swing.*; import java.awt.*; public class Greeting extends JApplet { // declarations final int APPLET_W = 350; //applet size final int APPLET_H = 250; int xCircle, yCircle; //circle pos. int radCircle; //circle size int xText, yText; //text pos. int xTopRow, yTopRow; //top row pos. int wOval, hOval; //oval size int gapOval; //gap betw. Ovals int xBotRow, yBotRow; //bottom row pos int xRect, yRect; //rectangle pos. int wRect, hRect; //rectangle size size int gapRect; //gap betw. Recs.

public void init() { // set dimensions and locations of obj. xTopRow = 40; yTopRow = 20; xCircle = xTopRow + 50; yCircle = yTopRow + 50; radCircle = 120; xText = xCircle - 50; yText = yCircle + radCircle - 30; wOval = 40; hOval = 15; gapOval = 50; wRect = wOval; hRect = hOval; gapRect = gapOval; xBotRow = xTopRow; yBotRow = APPLET_H - (hRect + 10); }

public void paint(Graphics g){ // draw filled circle setBackground(Color.CYAN); g.setColor(Color.YELLOW); g.fillOval(xCircle, yCircle, radCircle, radCircle); // draw message text g.setColor(Color.BLUE); Font f = new Font("Brush Script MT", Font.PLAIN, 32); g.setFont(f); g.drawString("Welcome to Hawaii.", xText, yText);

// draw 6 ovals at top g.setColor(Color.MAGENTA); int xOval = xTopRow; int yOval = yTopRow; for (int i = 1; i <= 6; i++) { g.drawOval(xOval, yOval, wOval, hOval); xOval += gapOval; } // draw 6 rectangles at bottom g.setColor(Color.RED); xRect = xBotRow; yRect = yBotRow; for (int i = 1; i <= 6; i++) { g.drawRect(xRect, yRect, wRect, hRect); xRect += gapRect; } } }

Example: Greeting (cont.) Note: Note: Various graphics elements are declared as instance variables, so that they can be accessed from all methods in the class Various graphics elements are declared as instance variables, so that they can be accessed from all methods in the class They are initialized in paint() They are initialized in paint() Variables are defined in terms of previously defined variables. E.g., Variables are defined in terms of previously defined variables. E.g., final int APPLET_H = 250; hOval = 15; hRect = hOval; yBotRow = APPLET_H - (hRect + 10);

Example: House Applet House uses geometric shapes with colors can be used to paint a simple scenery. Applet House uses geometric shapes with colors can be used to paint a simple scenery. Applet House Applet House Here is the source code for House.java. Here is the source code for House.java.source code for House.javasource code for House.java

Example: Smiley Applet Smiley is another example to illustrate the use of Graphics objects. Applet Smiley is another example to illustrate the use of Graphics objects. Applet Smiley Applet Smiley Here is the source code for Smiley.java. Here is the source code for Smiley.java.source code for Smiley.java.source code for Smiley.java.