GRAPHICS

Something that many students wish to do once they have started to understand GUIs and applets is to include some drawing (graphics). The Component class in the awt package contains a method paint which is automatically invoked whenever a component is drawn or redrawn. Through the mechanism of inheritance this method is inherited by all sub-classes of the Component class, however, we must override the paint method.

To draw using paint we must first define a "drawing area". The awt package contains an appropriate component, Canvas, which describes such an area. The methods required to produce a drawing can be found in the Graphics class. Note that a Canvas is the same as any other component and thus must be placed in a container. When the container is made visible this will then automatically cause the paint method to be invoked.

In the code presented in Table 1 we create a class AppletEx which extends the class applet in the usual manner. This has a single component MyCanvas. MyCanvas is a user defined class which extends the class Canvas and includes our own version of the paint method contained in the Component class. The paint method comprises a sequence of methods taken from the Graphics class which will produce some output of the form shown in Figure 1. The parameter g refers to an instance of the class Graphics which comes with the JDK.

// Frans Coenen

public class AppletEx3 extends Applet {

    // ----------------------- FIELDS --------------------------

    /* MyCanvas */

    MyCanvas pic = new MyCanvas();

    // -------------------------- METHODS -----------------------

    /* Init method */
    
    public void init() {
        setBackground(Color.yellow);
        setLayout(null);
	
	// Add push button
	          
        addCanvas(pic,400,300,50,70);
        }
	 
    /* Add canvas */

    private void addCanvas(MyCanvas name, int width,
                           int height, int xCoord, int yCoord) {
        name.setBackground(Color.white);
	name.setLocation(xCoord,yCoord);
	name.setSize(width,height);
	add(name);
	}
    }

class MyCanvas extends Canvas {
    
    public void paint(Graphics g) {
    	
        // Car body
        g.setColor(Color.red);
	g.fillRect( 70, 40,270,100);
	g.fillRect( 60,140,290,100);	
        g.setColor(Color.black);
	g.drawRect( 70, 40,270,100);
	g.drawRect( 60,140,290,100);
			
	// Winscreen
	g.setColor(Color.cyan);
	g.fillRect( 80, 50,250, 85);
	
	// Wheels
	g.setColor(Color.black);
	g.fillRect( 80,240, 50, 50);
	g.fillRect(280,240, 50, 50);
	
	// Headlights
	g.setColor(Color.yellow);
	g.fillOval( 80,155, 50, 50);
	g.fillOval(280,155, 50, 50);
	g.setColor(Color.black);
	g.drawOval( 80,155, 50, 50);
	g.drawOval(280,155, 50, 50);
	
	// Radiator
	int xStart = 140;
	int yStart = 155;
	for(int index=0;index<60;index=index+10) {
	    g.drawLine(xStart,yStart+index,xStart+130,
                             yStart+index);
	    }
	
	// Bumper	
	g.setColor(Color.lightGray);
	g.fillOval( 40,210, 40, 40);
	g.fillOval(330,210, 40, 40);
	g.fillRect( 60,210,290, 40);	
	
	// Road
	g.drawLine( 10,290,390,290);
	
	// String

	g.setColor(Color.black);
        Font mono = new Font("Monospaced",Font.BOLD,20);
        g.setFont(mono);
        FontMetrics newFM = g.getFontMetrics(mono);
        String s1 = "Java Jeep";
        int xLength = newFM.stringWidth(s1);
        g.drawString(s1,(205-(xLength/2)),235);
	}
    }

The graphics methods used in Table 1 are as follows:

• setColor(Color c): Sets the colour for the graphic to be drawn, c must be taken from the Color Class.
• fillRect(x,y,width,height): Draw a solid rectangle with its top left hand corner located at coordinates x-y with respect to the top left hand corner of the drawing area.
• DrawRect(x,y,width,height): Draw an unfilled rectangle (in this case outlining the previous rectangle).
• fillOval(x,y,width,height): Draw a solid oval with the given dimensions (note that to draw a circle the width and height arguments must be equal).
• drawOval(x,y,width,height): Draw an unfilled oval/circle.
• DrawLine(x1,y1,x2,y2): Draw a line starting at coordinates x1-y1 and ending at coordinates x2-y2.
• DrawString(s1,x,y): Draw a string (s1) at the specified location.

It is possible to draw quite sophisticate graphics using the limited number of methods presented above. Note that in the code given in Table 3 the "radiator" is drawn using an if-else loop construct.

Something else I have slipped into the code in Table 3 is a font specification, the general form for which is:

Font name = new Font(String s1,
Font.style, int size);

There are five fonts that come with the JDK as standard: Serif (TimesRoman), SansSerif (Helvetica), Monospaced (Courier), Dialog and DialogInput. The available Font styles are: PLAIN, BOLD, ITALIC. Thus we might declare a font, tr, as follows:

Font tr = new Font("Serif"),Font.PLAIN,12)

The other thing I have done in the example (and this is advanced stuff) is to create an instance of the class FontMetrics, this then allows us the access the instance method stringWidth which returns the pixel length of its argument which must be string. I then use this value to centre the text on the jeep's bumper!

Figure 1: Output from code presented in Table 1