A Little Bit on Graphics, Image & Animation

Module 1: The Graphics Class

    With Java's Graphics class, you can draw lines, shapes and images to the screen inside your applet. Most of the graphics operations in Java are methods defined in the Graphics class. You can include a paint() method (which is supplied with a Graphics object) in your applet to draw something on the screen.

    The Graphics class is part of the java.awt package, so if your applet does any painting, make sure you import that class at the beginning of your Java source file:
       import java.awt.Graphics;
       public class YourClass extends java.applet.Applet {
       .......
       }

    To draw an object on the screen, you call one of the drawing methods available in the Graphics class. All drawing methods have arguments representing the startpoints of an object and the endpoints of this object as values in the applet's X-Y co-ordinate system in the form of (x,y) co-ordinate. This co-ordinate system has the origin (0,0) in the top left corner. Positive x values are to the right, and positive y values are down. All pixel values are integers and hence non-fractions or non-decimals. 

    For example, a straight line can start at the point (20,20) and ends at the point (60,20). A downward slope-to-the-right line can start at the point (20,20) and ends at the point (60,60). Note that Java's co-ordinate system is different from many painting, layout programs and mathematical diagrams that have their x and y in the bottom left.

Module 2: Drawing and Filling

    1. To draw straight lines, use the drawLine() method. The four arguments it takes are: x and y co-ordinate of the starting point, and the x and y co-ordinate of the ending point. Here is the code:

    /* get and drawn an image */
    import java.awt.Graphics;

    public class SLine extends java.applet.Applet {
       public void paint(Graphics g) {
          g.drawLine(25,25,75,75);      // downward slope-to-the-right straight line
       }
    }
    and this is the output:

    2. To draw a rectangle, use the drawRect(). The arguments it takes are: x co-ordinate of top left corner, y co-ordinate of top left corner, width and height of the shape. Here is the code:

    import java.awt.Graphics;

    public class Rectangle extends java.applet.Applet {
      public void paint(Graphics g) {
         g.drawRect(25,25,115,75);      // x co-ord. of top left is 25, y co-ord. of top left is 25, width is 115, height is 75
         g.fillRect(190,25,115,75);        // x co-ord. of top left is 190, y co-ord. of top left is 25, ........
      }
    }

    and this is the output:

    3. Other shapes ( rounded rectangle, circle, oval ) that you can draw:

    import java.awt.Graphics;

    public class OtherShape extends java.applet.Applet {
      public void paint(Graphics g) {
        g.drawRoundRect(25,25,115,75,10,20);
        g.drawOval(190,25,75,75);              // a circle,
        g.drawOval(315,25,125,75);            // an oval, note the same method being used !
      }
    }

    and this is the output:

Module 3: Text and Fonts

    Java's Font class, in conjunction with Graphics class, enables you to print text onto the screen. The Font class provides a given font -- its name, style and point size to allow you to lay out your text precisely in your applet. Here is a quick way of using the Font class in your applet:

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

    public class FontColor extends java.applet.Applet {
      Font yourfont = new Font("TimesRoman",Font.BOLD,30);
      public void paint(Graphics g) {
      // setBackground(Color.white);     // you may want to set the background color as white
      g.setColor(Color.green);
      g.setFont(yourfont);
      g.drawString("Welcome to Java Language",2,25);
      }
    }
    Note that I have imported the Color and Font classes into the code here.

    and this is the output:

    Other font names include: "Courier", "Helvetica". Font styles that you can use are: Font.PLAIN, Font.ITALIC.

Module 4: Using Colours

    Java's Color class provides methods and operations for you to add colour to your design. Again, the Color class is part of the java.awt package. Remember to import this class to your source file.

    Here is a quick technique for using the Color object in Color class:

    import java.awt.Graphics;
    import java.awt.Color;

    public class RectColor extends java.applet.Applet {
      public void paint(Graphics g) {
         g.setColor(Color.red);
         g.drawRect(25,25,115,75);
         g.fillRect(190,25,115,75);
      }
    }
    Note that I have imported the Color class into the code here.

    This is the output:

Module 5: Getting & Displaying Image

    The Image class in java.awt provides you with the methods to load and display images on the screen. To load and display an image, you use the getImage() & drawImage() methods.

    In the following form of getImage(), the button1.gif file is in the same directory as the HTML file that refer to the applet concerned:
                        Image img = getImage(getDocumentBase(), "button1.gif");

    In this form of getImage(), the button1.gif file is in the same directory as the applet itself:
                        Image img = getImage(getCodeBase(), "button1.gif");

    Here is the code for loading and displaying an image:

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

    public class GetImage extends java.applet.Applet {
      int xpos = 1;
      int ypos = 1;
      Image currentimg;

      public void init() {
        currentimg = getImage(getCodeBase(), "button1.gif");
      }

      public void paint(Graphics g) {
        setBackground(Color.white);
        g.drawImage(currentimg, xpos, ypos, this);
      }
    }

    Below is the output:

    Other image formats that Java currently supports include BMP & JPEG.

©2001. William NWL6. All rights reserved.
Last Updated: January 15, 2002