Drawing geometric shapes

 

Drawing overview

public class CustomButton extends Button {
  public void paint(Graphics g) {
    
  
    custom drawing code goes here...

  }
}

To instantiate a customized CustomButton object would only require a single statement such as

CustomButton myButton = new CustomButton();

Through inheritance, myButton would have all the features of a Button object. It would also be automatically rendered when necessary by the JVM through internal calls to its customized paint() method.

Note: An application should never call a component's paint() method directly. It should request painting by calling repaint() instead.

Application

<->

 

context

 

<->

JVM

<->

 

display

 

The paint() method automatically receives an object of the Graphics class as a parameter. This object represents the graphics context of the component and encapsulates methods for drawing within that context.

Every pixel in the component's context has a unique set of x-axis and y-axis coordinates with the origin located in the top-left corner. For example, the context of a component that is 300 pixels wide and 400 pixels high may be visualized as follows:

(0, 0)

x-axis

(299, 0)

y-axis

 

 

 

 

 

 

 

 

 

(0, 399)

(299, 399)

 

The Graphics class 

Object 

\

Graphics 

Method

Usage

clearRect()

Clears a specified rectangle by filling it with the background color of the component

drawArc()

Draws the outline of a circular or elliptical arc within a specified rectangle

drawLine()

Draws a line between two points

drawOval()

Draws the outline of an oval within a specified rectangle

drawRect()

Draws the outline of a specified rectangle

drawString()

Draws the text of a specified string using the graphics context's current font and color

fillArc()

Draws a filled circular or elliptical arc within a specified rectangle

fillOval()

Draws a filled oval within a specified rectangle

fillRect()

Draws a filled rectangle

getColor()

Gets the graphics context's current color

getFont()

Gets the graphics context's current font

setColor()

Sets the graphics context's current color

setFont()

Sets the graphics context's current font

Many methods require you to specify the x-axis and y-axis coordinates of where an action is to occur. These may be coded as integer literals, variables, or expressions. Consult the help facility of your Java development environment or the Java API for details.

Example:

import java.awt.*;
import java.awt.event.*;

public class App extends Frame implements WindowListener {

  public class MyCanvas extends Canvas {
    public void paint(Graphics g) {
      g.setColor(Color.yellow);
      g.fillOval(10,10,50,50);
      g.setColor(Color.black);
      g.drawOval(10,10,50,50);
      g.fillOval(20,28,8,8);
      g.fillOval(40,28,8,8);
      g.drawArc(25,35,20,15,190,160);
      g.setFont(new Font("SanSerif", Font.BOLD + Font.ITALIC, 16));
      g.setColor(Color.blue);
      g.drawString("Have a happy day!", 10, 80);
      g.setColor(Color.red);
      g.drawLine(10,84,150,84);
    }
  }

  MyCanvas picture;

  public static void main(String[] args) {
    App myWindow = new App("Smiley");
    myWindow.setSize(180,130);
    myWindow.setVisible(true);
  }

  public App(String title) {
    super(title);
    addWindowListener(this);
    picture = new MyCanvas();
    add(picture);
  }

  public void windowClosing(WindowEvent e) {
    dispose();
    System.exit(0);
  }

  public void windowOpened(WindowEvent e) {}
  public void windowActivated(WindowEvent e) {}
  public void windowIconified(WindowEvent e) {}
  public void windowDeiconified(WindowEvent e) {}
  public void windowDeactivated(WindowEvent e) {}
  public void windowClosed(WindowEvent e) {}
}

Notes:

  1. This sample defines an inner class named MyCanvas that extends Canvas and overrides the inherited paint() method. The statements within this method use the graphics context to draw the head, eyes, and mouth of a smiley face, draw a text message, and draw a line under the message.

  2. For drawing shapes, the top-left corner is used for positioning. For drawing text, the bottom-left corner is used for positioning.

  3. The application's constructor instantiates a MyCanvas object and adds it to the application container. Rendering of the object is automatic.

  4. Any valid component could have been extended by the MyCanvas class. For instance, if Button had been extended, the object created by the application constructor would be a button. Try it!

 

Review questions

  1. Assume that all unseen code is correct and that g references the graphics context of a component that is 200 pixels wide and 200 pixels high. Which of the following statements are true of executing this code?  (choose three)

g.drawString("Hello World!",50,50);
g.fillRect(50,50,100,100);
  1. the text will be outside the rectangle

  2. the text will be inside the rectangle

  3. the text will be hidden by the rectangle

  4. the rectangle will be filled with color

  5. the rectangle and text will have the same color

  1. If g references the graphics context of a component that is 100 pixels wide and 50 pixels high, code a single statement to draw a diagonal line in the current color from the bottom-left corner to the top-right corner of the component.

  2. If g references the graphics context of a component that is 100 pixels wide and 100 pixels high, which of the following will draw a solid red arc in the top-left quadrant of a ellipse?  (choose two)

  1. g.setColor(Color.red);
    g.fillArc(50,50,100,100,180,-90);

  1. g.setColor(Color.red);
    g.drawArc(50,50,100,100,90,90);

  2. g.setColor(Color.red);
    g.fillArc(50,50,100,100,180,90);

  3. g.setColor(Color.red);
    g.fillArc(50,50,100,100,90,90);

  4. g.setColor(Color.red);
    g.fillArc(50,50,100,100,90,-90);

  1. Assuming that all unseen code is correct, what does the following paint() method draw?

public void paint(Graphics g) {
  g.setColor(Color.green);
  g.fillRect(0,0,100,100);
  g.setColor(Color.white);
  g.drawOval(1,1,98,98);
}

  1. The statements will not compile

  2. a white circle within a solid green square

  3. a white ellipse that is wider than it is tall inside a solid green square

  4. a solid white circle within a solid green square

  5. a solid white ellipse that is wider than it is tall inside a solid green square