Using Java’s CANVAS and JFRAME Classes

In may last article, I showed you how to use the Canvas and JFrame classes to draw basic shapes like a rectangle or an oval.  I showed you how to use the “extends” keyword that would allow you to have access to a paint function in which you could draw basic 2D shapes.

I also showed how to make a call to JAVA’s JFrame class that allowed you to create a window at a certain width and height in which you could draw your shapes.  So, when you use these two classes together you can draw primitive 2D shapes inside a computer window.  Now, I will show you how to use these classes to draw JPEG image.

 

 

In this article we will reuse the code that we created in the last article but instead of drawing shapes, I will show you how to draw a window and then load a JPEG image to render inside the window. 

What IDE I am Using and How I set up the Project

For this project and program, I am using the free IDE NETBEANS version 7.2.1.  I created a new project as a regular JAVA application and named the package “drawingcanvas,” plus, named the main class “DrawingCanvas.”  Again, this is the same setup that I used for the last article, I only am reusing the same template code that I created.

Now for the Code

The code I actually pretty simple and here it is:

/* Drawing Program that allows you to draw a Bitmap to a Window */ 

package drawingcanvas;

/**

 *

 * @author Binkster

 * version 2

 */

import java.awt.*;

import javax.swing.*;

public class DrawingCanvas extends Canvas { 

    /**

     * @param args the command line arguments

     */

    //constructor…Does not do anything in this program

    public DrawingCanvas(){

    }

    //Set up a function to draw the bitmap

    @Override

    public void paint (Graphics graphics){

        Image img1 = Toolkit.getDefaultToolkit().getImage(“c:/ford1.jpg”);

        graphics.drawImage(img1, 0, 0, this);

    }

    public static void main(String[] args) {

        // Sets up the drawing canvas

        DrawingCanvas canvas = new DrawingCanvas();

      //Create new Window

        JFrame frame = new JFrame();

        //Set Window Size

        frame.setSize(640, 480);

        //Make Sure Program Ends when Window Exit Button is Clicked

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Draw to Canvas

        frame.getContentPane().add(canvas);

        //Show Window

        frame.setVisible(true);

    }

}   

First, you need to make a call to two imports, “java.awt and javax.swing.” I also used the .* extension which allows me to access all of the classes and functions for each.  However, we are only worried about JFrame and Canvas classes.

Next is the definition of the main class.  Like before, I used the “extends,” keyword which allows me access to Canvas’ paint function in which we do all of our drawings.  This also allows us to use the graphics “drawImage,” function to help render our JPEG image inside the window we will create.

Next, we have the constructor.  The constructor is optional and not needed for the program in this article, but I always like to add constructors to my classes in case I may need to initialize something later prior to the main function.

The next lines of code creates an overridden definition for the paint function.  This function will allows us to load the JPEG file and then draw it to the window we create later.  When you override a function you basically telling the compiler that you want to control what a function does instead having to rely on the generic definition. 

Within this function, you will create a variable called image that will store the information for your JPEG image.  In this case, you are going to make a call to a basic toolkit for drawing.  Also notice that I decided to store the picture at my root drive c.  So, remember that for the picture to load into the window, you will have to pass the correct path to the JPEG file.

Next, you will make a call to the graphics drawImage function.  In this case, we take the information stored into the variable img1 and pass that to this function.  We also pass where to start the drawing inside the window, in this case, we want to start drawing the picture at coordinates 0,0 which is the upper left corner of the window.  Finally, the this keyword just tells the program to draw the picture in the present created window.

Finally, there is the main function that creates a new window using the JFrame class and then passes the paint function’s drawings to the new window which renders the JPEG image.   Basically, it creates a new Canvas class and then sets up the window.  Then the program creates a new variable for JFrame (i.e. frame) and then passes the canvas variables drawing functions to the new window.  Finally, the JPEG image is drawn to the new window.

Conclusion:

So, now you know how to draw JPEG image to a window programtically using JAVA.  This is a good way to draw a quick background image to your programs.  Also, you can load bitmap and PNG files as well……HAPPY CODING!!!!!