Drawing with The paintComponent Method on the Java Panel(JPanel) Us...

What Will I Learn?

In this tutorial;

You will learn how to draw something on a JPanel.
You will learn the use of the paintComponent method.
You will learn to use of super.paintComponent decleration.
You will learn the drawing methods.

Requirements

Java SE Development Kit (Not necessarily the last version) is required.
Eclipse IDE or any similar Interated Development Enviroment (IDE) that is designed for Java programming language is required.

Difficulty

Basic

Tutorial Contents

The purpose of this tutorial is to explain how to draw a Graphics object on the JPanel. To explain, a demo program which displays a basic face drawing in JFrame is desingned. For this demo program, we have 2 different Java file.

For the main frame of the program (Drawing_Face_Demo.java);

For the panel that contains face drawings (Face_Drawing_Panel.java);

Defining The Panel

A separate panel class for the drawing face panel needs to be defined. The constants of the of the panel is also needed to be declared before writing the costructor of the class. We have two constant in this program. These are for the base points of the face that is drawn.

import javax.swing.JPanel;
import java.awt.*;
public class Face_Drawing_Panel extends JPanel {
    public int base_point_x=130;
    public int base_point_y=110;

To set up the characteristic of the panel, we need to desing the constructor of the panel. In here, we can only draw the background color as drawing because the other drawings should not be in the constructor of the class.

    public Face_Drawing_Panel() {
        setBackground(Color.BLACK);
        setPreferredSize(new Dimension (350,350));
        setFont(new Font("Times New Roman", Font.ITALIC, 30));
    }

Drawing The Face

The paintComponent Method

If it is needed to draw something on JPanel other than drawing the background color, the definition of paintComponent method should be added. This method is already exist in jPanel class so that we need to use super decleration to add something to this method and takes Graphics objects as parameters. Note that the super.paintComponent which represents the normal the paintComponent method of the JPanel which can only handle the background of the panel must be called in the first line. It is always used in the first line in the paintComponent method. Then, we can add our drawing into the the paintComponent method.

    public void paintComponent(Graphics page) {
        super.paintComponent(page);

Now we can add our drawings. The method that we are going to use are similar to the method that we used in Drawing in JApplet Example. You can find the explanation of fillOval, drawOval and drawArc methods there. In this program,

For head in magneta color the following code is added;

      page.setColor(Color.MAGENTA);
      page.fillOval(base_point_x, base_point_y, 100, 100);//For HEAD

For the ears the following code is added;

      page.fillOval(base_point_x-5, base_point_y+25, 15, 40);//Left EAR
      page.fillOval(base_point_x+90, base_point_y+25, 15, 40);//Right EAR

For the black eyes the following code is added;

      page.setColor(Color.black);
      page.drawOval(base_point_x+20, base_point_y+29, 18, 10); //Left EYE
      page.drawOval(base_point_x+60, base_point_y+29, 18, 10); //Right EYE

For the pupils the following code is added;

      page.fillOval(base_point_x+25, base_point_y+30, 8, 8); //Left PUPIL
      page.fillOval(base_point_x+65, base_point_y+30, 8, 8); //Right PUPIL

For the eyebrows the following code is added;

      page.drawArc(base_point_x+20, base_point_y+25, 18, 10, 0, 180); //Left Eyebrow
      page.drawArc(base_point_x+60, base_point_y+25, 18, 10, 0, 180); //Left Eyebrow

For the nose the following code is added;

      page.drawArc(base_point_x+40, base_point_y+55, 18, 10, 180, 180); //NOSE

For the mouth the following code is added;

      page.drawArc(base_point_x+25, base_point_y+60, 45, 18, 180, 180); //MOUTH

For drawing words we used the drawString method that takes the String that needs to be drawn and its position as parameters.
```
      page.setColor(Color.white);
      page.drawString("@aromatheraphy", base_point_x-45, base_point_y-45);
```

Main Frame

In the main frame, you need create the frame of the program;

        JFrame frame = new JFrame("Drawing Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Then, you need to create the Face_Drawing_Panel object;

        Face_Drawing_Panel panel = new Face_Drawing_Panel();

Finally, by adding this panel to the main frame, the program will be ready.

        frame.getContentPane().add(panel);
        frame.pack();
        frame.setVisible(true);

Results

When the program runs, the following frame with the face panel opens as expected.

Code of The Program

//Face_Drawing_Panel.java
import javax.swing.JPanel;
import java.awt.*;
public class Face_Drawing_Panel extends JPanel {
    public int base_point_x=130;
    public int base_point_y=110;
    public Face_Drawing_Panel() {
        setBackground(Color.BLACK);
        setPreferredSize(new Dimension (350,350));
        setFont(new Font("Times New Roman", Font.ITALIC, 30));
    }
    public void paintComponent(Graphics page) {
        super.paintComponent(page);
        page.setColor(Color.MAGENTA);
        page.fillOval(base_point_x, base_point_y, 100, 100);//For HEAD
        page.fillOval(base_point_x-5, base_point_y+25, 15, 40);//Left EAR
        page.fillOval(base_point_x+90, base_point_y+25, 15, 40);//Right EAR
        page.setColor(Color.black);
        page.drawOval(base_point_x+20, base_point_y+29, 18, 10); //Left EYE
        page.drawOval(base_point_x+60, base_point_y+29, 18, 10); //Right EYE
        page.fillOval(base_point_x+25, base_point_y+30, 8, 8); //Left PUPIL
        page.fillOval(base_point_x+65, base_point_y+30, 8, 8); //Right PUPIL
        page.drawArc(base_point_x+20, base_point_y+25, 18, 10, 0, 180); //Left Eyebrow
        page.drawArc(base_point_x+60, base_point_y+25, 18, 10, 0, 180); //Left Eyebrow
        page.drawArc(base_point_x+40, base_point_y+55, 18, 10, 180, 180); //NOSE
        page.drawArc(base_point_x+25, base_point_y+60, 45, 18, 180, 180); //MOUTH
        page.setColor(Color.white);
        page.drawString("@aromatheraphy", base_point_x-45, base_point_y-45);
    }
}
//Drawing_Face_Demo.java
import javax.swing.JFrame;
public class Drawing_Face_Demo {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Drawing Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Face_Drawing_Panel panel = new Face_Drawing_Panel();
        frame.getContentPane().add(panel);
        frame.pack();
        frame.setVisible(true);
    }
}

Github

You can get this program here.

Curriculum

You can find my other java related tutorials in below links.

Posted on Utopian.io - Rewarding Open Source Contributors

Drawing with The paintComponent Method on the Java Panel(JPanel) Using Eclipse IDE