Drawing Graphics Files

 

Retrieving and using images in Java is not difficult. The Image.class in the Java Abstract Windowing Toolkit contains methods to represent image behavior and methods defined in Applet and Graphics contain everything needed to load and display images in an applet.

First, you must obtain an image in GIF or JPEG file format. Both formats are demonstrated in this page. These images can be obtained from the Internet, a graphics program like Corel, scanned in, or taken with a digital camera.

The Applet class provides a method called getImage. The java.awt.Image class must be imported and getImage is provided with two arguments, the base URL and a string which represents the path or filename of the image (relative to the base). Use getDocumentBase() when the file is in the same directory as the HTML files that refer to the applet. Use getCodeBase() when the file is in the same directory as the applet itself. In the example,

dukeImage[1]=getImage(getDocumentBase(),"duke/T1.gif");

dukeImage[1] is an instance of the Image class. It is the first element of a one-dimensional array. The image is in the duke subdirectory of the directory containing the HTML files that refer to this applet and the filename is T1.gif.

catImage=getImage(getDocumentBase(),"cat.jpg");

In this example, the instance catImage of the Image class is assigned the image located in the filename cat.jpg which is in the same directory as the HTML files that refer to the applet. If the getImage() method cannot find the required file, it returns null and nothing will be drawn.

The Graphics class provides a method called drawImage. The java.awt.Graphics class must be imported and drawImage is provided with four arguments, the image to display, the x and y positions of the top left corner, and this. The code below takes an instance g of the class Graphics and calls the method drawImage. As the "for" loop is traversed, each duke image in the array is drawn, starting the top left corner at x position 0 and y position 5. As each subsequent image is drawn, the x position is increased by 35 until all 10 images of Java Duke have been drawn. The object catImage (assigned above) is then drawn in the defined applet window with the top left corner at the x position 1 and y position 100. The applet below draws an array of 10 images of Java Duke and one image of Gizmo, the cat.

   
 

 

The code for this Java images applet is listed below.

 

import java.awt.Graphics;
import java.awt.Color;
import java.awt.Font;
import java.awt.Image;

public class images extends 
java.applet.Applet
{
Image dukeImage[] = new Image[11];
Image catImage;


public void init()
{

for (int i=1;i <= 10;i++) {
  dukeImage[i]= getImage(getDocumentBase(),
"duke/T"+i+".gif");}
catImage = getImage(getDocumentBase(),
"cat.jpg");

}
public void paint(Graphics g)
{
for (int i=1;i <= 10;i++) {
  g.drawImage(dukeImage[i],(i-1)*35,5,this);}
g.drawImage(catImage,1,100,this);
}

}

This allows us to use the Graphics,Color, Font, and Image methods of the Java Abstract Windowing toolkit.


We want to generate an applet .

Create an instance of the image class which is a one-dimensional array. Also create an instance of the image class called catImage.
.

Use a for loop to assign the 10 Java Duke images to instances of the Image class. The GIF files are in a subdirectory named duke. Get the image for the cat from the same directory.

Use a for loop to draw the Java Duke images in the applet. Notice how the x position is increased by 35 to line the images up in a row. Then draw the cat image underneath.

The easiest way to copy the code for this example is to click here, copy the contents of the screen that loads in your browser , paste it in a text editor and save it in a file called "images.java".

After compiling this program we need to create an HTML page with a reference to the class file. It must run in a graphic window that is large enough to accommodate the pixels in the applet. In the example above, set the width="368" and the height="564".

Save the HTML code in the same directory as the class file.

When you load the HTML file in your browser the applet will execute within the window.

Go to the next topic: Incorporating Sound in an Applet

Back to the Table of Contents