Aqua Phoenix
     >>  Research >>  OOP  
 

Navigator
   
 
       
   

16. Graphics

16.1 Summary

  • Graphics as an example of an object that is inherent to Components
  • Framework of a Graphics applet
  • Example of a simple 1-panel applet with Colored Lines, Filled Rectangles, Arcs (Circles), etc.

16.2 Contents

16.2.1 Graphics as an example of an object that is inherent to Components

What good are applets, if we can only use predefined user-interface components like the ones we have discussed? Probably the most interesting and fun part about applets is the Graphics object. The Graphics object is inherent to the class Object, and basically every object in Java is a derivation from the class Object. Thus, we can access the Graphics context of every object and component, may it be a button or a textarea.

The Graphics object is used to draw lines, rectangles, change colors, place images, and essentially every basic graphical operation that you can imagine. Since Graphics is inherent to all objects, you can draw lines and other shapes over a button, or a textarea, as if you took a can of graffiti and spray painted a boring, gray-looking button. Of course, we don't necessarily want to disfigure our user interface. Instead, we would want to use Graphics in order to draw Graphs or the like. The Graphics object behaves just like any other object we have thus far seen. It tends to have a large variety of methods, because there are plenty of basic Graphics that can be constructed.

As you may remember, we came across an object earlier on that didn't seem to make too much sense in terms of its purpose, namely the Canvas. This object had a bunch of methods that exist for Buttons as well; however, it had no additional methods of any sort. The reason for that is that canvases are used predominently for Graphics. Other than Canvas, another popular object for drawing is the Panel. We have used it a few times in order to lay out other objects in a Layout Manager. Panels are very versatile; they can be used for lots of things, among others, the display of Graphics.

We should note, that an instantiated applet without any objects on it can also be used to paint Graphics, mainly because an empty applet has a default Panel in its background.

16.2.2 Framework of a Graphics applet

Before we get into any details, we will need to look at how to use Graphics, and in particular, where to use it. We cannot simply start drawing lines from any method in an applet; specific methods have been designed and set aside for this particular purpose. Upon instantiation of an applet, these methods are called in a particular order.

import java.applet.*;
import java.awt.*;
import java.util.*;
import java.io.*;


public class myApplet extends Applet {


  public void init() {

  }


  public void paint(Graphics g) {


  }


  public void update(Graphics g) {

    paint(g);
  }

}
The two key components of Graphics are the methods paint(Graphics g) and update(Graphics g). We will not discuss the update method in much detail. For now, understand that without it, the Graphics context of an applet (or object) will flicker upon updates. Include it in all of your Graphics applets (or objects) just as it appears above. Our main focus is the paint(Graphics g) method. Notice how this function takes the argument of "Graphics". The question is, who calls the method? Where all of a sudden does Graphics come from? As we have alluded to above, these methods are not actually called by the programmer, but rather by the environment, in which applets are finally displayed. For that reason, take the argument for granted.

Within the "paint(..)" method, we can now use the Graphics object to start painting. Let's look at an example:

  public void paint(Graphics g) {

    g.drawLine(0, 0, 100, 100);
  }
The above snipped of code would draw a line going from (x1, y1) = (0, 0) to (x2, y2) = (100, 100). Notice that we are calling the drawLine method in the Graphics object. We need not worry about the details of how the line is actually transported to the screen; all we need to know is that the drawLine method in Graphics draws a line.

Example of a simple 1-panel applet with Colored Lines, Filled Rectangles, Arcs (Circles), etc.

Let's look at some other methods:

  public void paint(Graphics g) {

    // J
    g.setColor(Color.blue);
    g.fillRect(10, 10, 50, 10);
    g.setColor(Color.green);
    g.drawArc(-40, -90, 100, 200, 270, 90);
    g.drawArc(-40, -88, 98, 196, 270, 90);
    g.drawArc(-40, -86, 96, 192, 270, 90);
    g.drawArc(-40, -84, 94, 188, 270, 90);

    // A
    g.setColor(Color.gray);
    g.fillRect(80, 10, 50, 100);
    g.setColor(Color.yellow);
    g.fillRect(95, 25, 20, 35);
    g.fillRect(95, 75, 20, 35);

    // V
    g.setColor(new Color(0, 174, 255));
    g.drawLine(150, 10, 175, 110);
    g.drawLine(151, 10, 176, 110);
    g.setColor(new Color(0, 184, 255));
    g.drawLine(200, 10, 175, 110);
    g.setColor(new Color(0, 194, 255));
    g.drawLine(200, 10, 175, 110);
    g.setColor(new Color(0, 204, 255));
    g.drawLine(202, 10, 177, 110);
    g.setColor(new Color(0, 214, 255));
    g.drawLine(202, 10, 177, 110);
    g.setColor(new Color(0, 224, 255));
    g.drawLine(204, 10, 179, 110);
    g.setColor(new Color(0, 234, 255));
    g.drawLine(204, 10, 179, 110);
    g.setColor(new Color(0, 244, 255));
    g.drawLine(206, 10, 181, 110);
    g.setColor(new Color(0, 254, 255));
    g.drawLine(206, 10, 181, 110);

    // A
    g.setColor(Color.magenta);
    g.fillArc(220, 10, 50, 100, 0, 180);
    g.fillRect(220, 60, 50, 50);
    g.setColor(Color.red);
    g.fillArc(235, 25, 20, 70, 0, 180);
    g.fillRect(235, 75, 20, 35);
  }
The above code results in the following applet:

You should experiment with this applet and draw a non-modern art picture of some sort using only the following methods: setColor, drawRect, fillRect, drawArc, fillArc, drawLine. The above code can be found here:

SimpleGraphics.java

SimpleGraphics.html You may want to increase the size of the applet from (150, 150) to perhaps (640, 480) or (800, 600) in SimpleGraphics.html.

Note the arguments for the method setColor. The object Color has a few predefined colors, like red, blue, gree, yellow, etc. If you want to create your own colors, you may create a new Color by writing new Color(red, green, blue), where red, green, and blue are the intensities for the respective color going from 0 to 255. [color management should be discussed]