Drawing Rectangles

Drawing Rectangles

Drawing rectangles in Java is fairly easy. There are two methods provided by the "Graphics" object that provide this. These methods are fillRect and drawRect. The differences between these two methods are as follows:

• fillRect - Draws a filled in rectangle, in the current color
• drawRect - Draws a rectangle outline in the current color

You will find that many of the Java drawing commands will include both a fillXXX and drawXXX method. For example fillOval and drawOval both draw a filled in and outline oval respectively.

I will now show you a simple applet that displays a both a filled in and non-filled in rectangle. You can see this program in Figure 2.1.

Figure 2.1: Drawing rectangles

This program draws two rectangles. Can you see them? The first rectangle drawn is a black filled in rectangle. This rectangle takes up the entire applet. It is the black background. To give the applet a background color, other than the gray it normally has, you should draw a filled rectangle with the desired background color. Most of the programs we will look at int his series will do this.

The second rectangle drawn by this program is a white rectangle outline. It is drawn on top of the filled-in black rectangle. This program can be seen in Listing 2.1.

Listing 2.1: Drawing Rectangles Part 1 (RectApplet.java)

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

public class RectApplet extends Applet
{
  public static final int IDEAL_WIDTH = 200;
  public static final int IDEAL_HEIGHT = 200;

  public void paint(Graphics g)
  {
    g.setColor(Color.BLACK);

    g.fillRect(0, 0, getWidth(), getHeight());

    g.setColor(Color.WHITE);
    g.drawRect(10, 10, 100, 100);
  }

  public static void main(String args[])
  {
    Applet applet = new RectApplet();
    Frame frame = new Frame();
    frame.addWindowListener(new WindowAdapter()
    {
      public void windowClosing(WindowEvent e)
      {
        System.exit(0);
      }
    });

    frame.add(applet);
    frame.setSize(IDEAL_WIDTH, IDEAL_HEIGHT);
    frame.show();
  }
}

This program is relatively simple. You can see the call first to fillRect and secondly to drawRect. The first rectangle is drawn with the following two lines of code.

g.setColor(Color.BLACK);
g.fillRect(0, 0, getWidth(), getHeight());

First the current color is set to black. Then a rectangle is filled in at coordinates (0,0) and the width and height of the rectangle are the width and height of the applet. The first two parameters specify the coordinate of the upper left corner of the rectangle. The second two parameters specify the width and height of the rectangle. Because the call is made to fillRect, the rectangle is filled in.

Next, a white outline rectangle is drawn. This is done with the following two lines of code.

g.setColor(Color.WHITE);
g.drawRect(10, 10, 100, 100);

As you can see, the current color is set to white. Then the rectangle is drawn at coordinates (10,10). The rectangle will not be filled in, and will be 100 pixels wide and 100 pixels high.

Now we will examine a slightly more complex use of drawRect. This program will use the for loop to draw a series of rectangles. You can see this program's output in Figure 2.2.

Figure 2.2: Drawing More Rectangles

The source code for this program can be seen in Listing 2.2.

Listing 2.2: Drawing Rectangles Part 2 (RectApplet2.java)

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

public class RectApplet2 extends Applet
{
  public static final int IDEAL_WIDTH = 200;
  public static final int IDEAL_HEIGHT = 200;

  public void paint(Graphics g)
  {
    g.setColor(Color.BLACK);

    g.fillRect(0, 0, getWidth(), getHeight());

    g.setColor(Color.WHITE);
    for (int x = 0; x < getWidth() / 2; x += 5)
    {
      int x1 = (getWidth() / 2) - x;
      int y1 = (getHeight() / 2) - x;
      g.drawRect(x1, y1, x * 2, x * 2);
    }
  }

  public static void main(String args[])
  {
    Applet applet = new RectApplet();
    Frame frame = new Frame();
    frame.addWindowListener(new WindowAdapter()
    {
      public void windowClosing(WindowEvent e)
      {
        System.exit(0);
      }
    });

    frame.add(applet);
    frame.setSize(IDEAL_WIDTH, IDEAL_HEIGHT);
    frame.show();
  }
}

As you can see this program loops from zero to half the width of the applet. Each iteration of the loop increases the count by 5. Larger and larger rectangles are drawn as the loop progresses.

Rectangles are an important drawing element that you will use often.