GraphicsGraphics

Graphics Features in Graphics Features in JavaJava

Topics to be coveredTopics to be covered Graphics BasicsGraphics Basics

Coordinate SystemCoordinate System Graphics, Color, Font classesGraphics, Color, Font classes Displaying graphicsDisplaying graphics

Graphic User Interface (GUI)Graphic User Interface (GUI) Frames and ContainersFrames and Containers AppletsApplets Event-driven ProgramsEvent-driven Programs

Graphics-related Classes Graphics-related Classes in Package in Package java.awtjava.awt

GraphicsGraphics ——for drawing geometric figuresfor drawing geometric figures

ColorColor ——for background and foreground colors for background and foreground colors

for text, for geometric figuresfor text, for geometric figures FontFont

——for text formatting, size, style, face, for text formatting, size, style, face, etc.etc.

Java Coordinate SystemJava Coordinate System Draw figures on a “canvas,” such an applet Draw figures on a “canvas,” such an applet

or a frame.or a frame.

Graphics MethodsGraphics Methods

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

Drawing a RectangleDrawing a Rectangle

The following code segments draws a The following code segments draws a rectanglerectangle with a blue outline. 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 OvalDrawing an Oval The following statement draws an The following statement draws an ovaloval which which

is inscribed in a rectangle of the given is inscribed in a rectangle of the given dimensions. (The rectangle will not be shown.) dimensions. (The rectangle will not be shown.)

g.drawOval(xStart, yStart, width, height);

(xStart, yStart)

height

width

Drawing a CircleDrawing a Circle The following statements draw a circle of The following statements draw a circle of

radius 10 (pixels), at (30, 40), and a filled circle radius 10 (pixels), at (30, 40), and a filled circle at (50, 60). (Note that (startX, startY) refers to at (50, 60). (Note that (startX, startY) refers to the corner of a circumscribed rectangle.)the corner of a circumscribed rectangle.)

int r = 10;int r = 10;int startX = 30;int startX = 30;int startY = 40;int startY = 40;Graphics g = new Graphics();Graphics g = new Graphics();g.drawOval(startX, startY, g.drawOval(startX, startY, 2 * r, 2 * r); 2 * r, 2 * r);g.fillOval(startX + 20, startY + 29,g.fillOval(startX + 20, startY + 29, 2 * r, 2 * r) 2 * r, 2 * r)

Drawing an ArcDrawing an Arc The following statement draws an The following statement draws an arc, arc,

which is defined in terms of an oval. which is defined in terms of an oval.

g.drawArc(xStart, yStart, width, height, startAngle, arcAngle);

startAngle

(xStart, yStart)

height

width

arcAngle

Filling Rectangles and Filling Rectangles and OvalsOvals

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 LineDrawing a Line

The following statements draw a line The following statements draw a line from (20, 30) to (120, 50).from (20, 30) to (120, 50).

xStart = 20;yStart = 30;xEnd = 120;yEnd = 50;drawLine(xStart, yStart, xEnd, yEnd);

Drawing a TextDrawing a Text

The following statements draw a text The following statements draw a text starting at (20, 30).starting at (20, 30).

int xText = 20;int yText = 30;g.drawString("Welcome to Hawaii.", xText, yText);

Setting ColorSetting Color The following statements create a yellow The following statements create a yellow

circle at (20, 40) and a blue square at (80, circle at (20, 40) and a blue square at (80, 40).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 ColorsRGB ColorsColor ConstantColor Constant RGBRGB

ORANGE ORANGE 255, 200, 0 255, 200, 0

PINK PINK 255, 175, 175 255, 175, 175

CYAN CYAN 0, 255, 2550, 255, 255

MAGENTA MAGENTA 255, 0, 255 255, 0, 255

YELLOW YELLOW 255, 255, 0255, 255, 0

BLACK BLACK 0, 0, 00, 0, 0

WHITE WHITE 255, 255, 255255, 255, 255

GRAY GRAY 128, 128, 128128, 128, 128

LIGHT_GRAY LIGHT_GRAY 192, 192, 192192, 192, 192

DARK_GRAYDARK_GRAY 64, 64, 6464, 64, 64

RED RED 255, 0, 0255, 0, 0

BLUEBLUE 0, 0, 2550, 0, 255

GREENGREEN 0, 255, 00, 255, 0

Exercise: Rectangle and Exercise: Rectangle and LineLine

Write a Java code segment to create Write a Java code segment to create the following figure. the following figure. (Solution))

Rectangle and LineRectangle and Lineint 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);

ExerciseExercise Write a code segment which will produce a circle of Write a code segment which will produce a circle of

radius 100, centered at (150, 200), and a horizontal radius 100, centered at (150, 200), and a horizontal line segment from the center to the circle.line segment from the center to the circle.

Exercise (cont.)Exercise (cont.) If the center is at (150, 200), the right-top If the center is at (150, 200), the right-top

corner is (50, 100), and the width and height corner is (50, 100), and the width and height of the circumscribed rectangle are both 200.of the circumscribed rectangle are both 200.

(50, 100)

(150, 100)

(50, 200) (150,

200)

(250, 200)

Displaying GraphicsDisplaying Graphics

Graphics objects must be drawn Graphics objects must be drawn inside a “container”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, JRootPaneJPanel, JScrollPane, JRootPane Used to arrange layout of components like Used to arrange layout of components like

JButton, JLabel, JtextField, etcJButton, JLabel, JtextField, etc

CircleDemoAppletCircleDemoApplet

The following demo The following demo applet shows:applet shows: Orange circle of Orange circle of

diameter 150, diameter 150, centered at (200, centered at (200, 200). 200).

A 150 x 30 blue A 150 x 30 blue rectangle, located rectangle, located 30 px from left 30 px from left edge of circle & 50 edge of circle & 50 px above its bottompx above its bottom

A text inside the A text inside the rectanglerectangle

ColorUseColorUse Demo Applet Demo Applet (cont.)(cont.)

All drawings occur in All drawings occur in paint()paint() method. method. setBackground()setBackground()--sets the applet's --sets the applet's

background color background color g.setColor()--g.setColor()--sets the color for the graphics sets the color for the graphics

context (unless it is changed, color remains context (unless it is changed, color remains the same for all subsequent figures)the same for all subsequent figures)

Color myColor = new Color(0,200,200);Color myColor = new Color(0,200,200); g.setColor(myColor);g.setColor(myColor); can be combined tocan be combined tog.setColor(new Color(0, 200, 200));g.setColor(new Color(0, 200, 200));

Font ClassFont Class NameName

Specific, like “Specific, like “Helvetica”Helvetica”, , “Courier New”“Courier New” Family, like Family, like “San Serif”“San Serif”, “, “Monospaced”Monospaced”

StyleStyle BOLD, ITALIC, PLAINBOLD, ITALIC, PLAIN

SizeSize 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 DemoFont Demo

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

Example: Example: GreetingGreeting Draw the image Draw the image

consisting of consisting of

1.1. Background in Background in cyancyan

2.2. 6 ovals at the top6 ovals at the top

3.3. 1 yellow circle1 yellow circle

4.4. 6 rectangles at 6 rectangles at bottombottom

5.5. A text message A text message across the circleacross the circle

Solution

GreetingGreetingimport 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: Example: Greeting Greeting (cont.)(cont.)

Note:Note: Various graphics elements are declared Various graphics elements are declared

as instance variables, so that they can as instance variables, so that they can be accessed from all methods in the be accessed from all methods in the class class

They are initialized in They are initialized in paint()paint() Variables are defined in terms of Variables are defined in terms of

previously defined variables. E.g.,previously defined variables. E.g.,final int APPLET_H = 250; hOval = 15; hRect = hOval; yBotRow = APPLET_H - (hRect + 10);

Example: HouseExample: House

Applet Applet HouseHouse uses geometric shapes uses geometric shapes with colors can be used to paint a with colors can be used to paint a simple scenery.simple scenery.

Here is the source code for Here is the source code for House.javaHouse.java..

Example: SmileyExample: Smiley

Applet Applet SmileySmiley is another example to is another example to illustrate the use of Graphics objects.illustrate the use of Graphics objects.

Here is the source code for Here is the source code for Smiley.javaSmiley.java..