Simple Drawing Part I

Java includes the Abstract Windowing Toolkit (AWT) which allows graphical user interfaces (GUIs) to be constructed. A GUI makes use of windows, menus, buttons, the mouse and all the other things you see on the screen when using a workstation or PC. A subset of the AWT allows you to write small programs that draw simple pictures out of lines, circles, boxes and other shapes. These notes will show you how to create such programs.

A program to draw a line

At this stage you don't know very much about Java, so you have to take much of the example program below on trust. As the course proceeds, however, you will be able to understand more and more of the program until it makes full sense. This program will draw a diagonal line across the interior of a window. The interior size is 300 by 300 pixels (or if you like a 300 by 300 square grid).

// We are using AWT so we need to say so.
import java.awt.* ;

// Also using events.
import java.awt.event.* ;

/**
 * <dl>
 * <dt>Purpose:
 * <dd>Example drawing program with exit option.
 *
 * <dt>Description:
 * <dd>Draws a diagonal line in a window.
 * </dl>
 *
 * @author  Danny Alexander
 * @version $Date: 2003/09/24 17:30:28 $
 * 
 */
 
// This program will be called DrawLine and must be
// to stored in a file called DrawLine.java.
//
// To create your own program with a different name,
// change *all* the occurrences of DrawLine to the new
// name. Save the program to a new file named using the
// new name with .java appended.
// You should also remove this comment (with //'s), but 
// not the one above (with *'s), which should be altered
// to reflect what your new program does, who wrote it 
// and when.
//
// I DO NOT WANT TO BE TOLD THAT I WROTE YOUR PROGRAM
// OVER A YEAR AGO!
public class DrawLine extends Frame
{
  protected static class DrawArea extends Panel
  { 
    /**
     * Does the actual drawing.
     */
    public void paint(Graphics g)
    {
      // You add/change the statements here to draw
      // the picture you want.
      g.drawLine(0,0,300,300) ;	
    }

    /**
     * Makes sure that
     * the window drawing area ends up being the
     * right size. You don't need to change this.
     */
    public Dimension getPreferredSize()
    {
      return new Dimension(WIDTH,HEIGHT) ;
    }

    // These set the size of the drawing area.
    // Change the sizes to suit what you need.
    private int WIDTH = 300 ;
    private int HEIGHT = 300 ;
  }

  /**
   * Creates a new window frame.
   */
  public DrawLine(String name)
  {
    super(name) ;
  } 
  
  /**
   * Terminates the program when the user
   * wants to quit.
   */
  private static void quit()
  {
    System.exit(0) ;
  }

  /**
   * Sets everything up
   * and displays the drawing window.
   */
  public static void main(String[] args)
  {
     // Create the window frame with the label
     // "My DrawLine". Change the text to change
     // the label.
     DrawLine frame = new DrawLine("My DrawLine") ;

     // Create the contents of the frame. The top (or Center)
     // part is the drawing area. The bottom (or South) strip 
     // holds a quit button.
     DrawArea drawing = new DrawArea() ;
     Panel buttonPanel = new Panel() ;
     buttonPanel.setLayout(new BorderLayout()) ;
     Button quitButton = new Button("Quit") ;
     buttonPanel.add("Center",quitButton) ;
     frame.setLayout(new BorderLayout()) ;
     frame.add("Center",drawing) ;
     frame.add("South",buttonPanel) ;

     // The event listeners are set up here to enable the
     // program to respond to events.
     quitButton.addActionListener(new ActionListener()
     {
       public void actionPerformed(ActionEvent evt)
       {
         quit() ;
       }
     }) ;

     frame.addWindowListener(new WindowAdapter()
     {
       public void windowClosing(WindowEvent evt)
       {
         quit() ;
       }
     }) ;

     frame.pack() ;
     frame.setVisible(true) ;
  }
}

To see this program running, cut and paste the program code into a file called DrawLine.java. (Ask a demonstrator if you are not sure how.) Or download it from this link: DrawLine.java . Compile the code using the command:

% javac DrawLine.java

and then run the program using:

% java DrawLine

A window like this should appear on the screen:

Notice that the diagonal line slopes from top to bottom, left to right. The co-ordinate of the top left of the window is (0,0), while the co-ordinate at the bottom right is (300,300). Based on this you should be able to work out how to draw a line in any position (it's just like drawing on graph paper, except you have to remember that (0,0) is at top left not bottom left).

This window will remain on the screen while the program is still running. To stop the program type, click the Quit button, or type Ctrl-C in the xterm window you started the program from.

If you read the comment lines in the program carefully you will see the things that you can change. In particular, look at the part where it says "  // This part of the program does the actual drawing.". To draw something different you add or edit statements here. For example, to draw a line from bottom left to top right change the statement:

g.drawLine(0,0,300,300) ;

to:

g.drawLine(0,300,300,0) ;

Drawing commands

You may well be asking what does g.drawline mean? Well, you are asking a thing called 'g' to draw a line for you. The line is specified using a pair of co-ordinates (x1,y1,x2,y2), which are given as a short list in brackets following the drawline command.

What is 'g'? It is what we call an object, and it knows how to draw things when asked. We don't know how it does this, only that it does. As the course moves on we will start to explore the idea of objects in more detail. For now, take it as is!

What else can we draw? The following is a list of some of the possibilities:

• g.drawArc(x, y, width, height, startAngle, arcAngle). Draw an arc inside the rectangle with top left corner at (x,y) and size given by width and height.
  startAngle is the angle in degrees that specifies where the arc starts (0 is the 3 o'clock position).
  arcAngle is the angle in degrees that specifies the end of the arc, relative to startAngle.
  Don't follow this? Use the code above to write a test program and experiment!!
• g.drawLine(x1,y1,x2,y2). Draw a line from (x1,y1) to (x2,y2).
• g.drawOval(x,y,witdh,height). Draw an oval inside the rectangle with top left corner at (x,y) and size width by height.
• g.drawRect(x,y,width,height). Draw a rectangle with top left hand corner at (x,y) and size width by height.
• g.drawString(text, x,y). Display the text at position (x,y). The text is specified as a string in double quotes, for example:
  g.drawString("Hello",40,40).

If you want know more, visit the online Java documentation and look for class Graphics in the API reference.

To create more interesting drawing from these basic commands, add them in sequence where indicated in the program above. For example, to draw three lines replace the original g.drawline with:

g.drawLine(0,0,100,100);
g.drawLine(0,0,100,200);
g.drawLine(0,0,100,300);