Draw on image

With the DrawOnImage program, you learn to draw things such as images, shapes, and text on an original image, and save the updated image to your local drive. In Java, image manipulation tasks can be performed after the data of original image are read in to an BufferredImage object. When the image data loads in the BufferredImage object, you can manipulate it, use drawing objects (Canvas, JFrame,...) to show it, and write it to the file.

DrawOnImage source code:

import javax.imageio.*;

import java.io.*;

import java.awt.*;

import java.awt.geom.*;

import java.awt.image.*;

import java.awt.color.*;

import javax.swing.*;

import java.util.*;

class ShowImg extends Canvas implements ImageObserver{

           

            public void paint(Graphics g){

                        try{

                       

1                                  BufferedImage bi=ImageIO.read(new File("image02.jpg"));                

2                                  Graphics2D g2d=(Graphics2D)bi.createGraphics();

3                                  int x=bi.getWidth()/2-100;

4                                  int y=bi.getHeight()/2;

                                               

5                                  g2d.setPaint(new GradientPaint(0,1,Color.BLUE,5,5,Color.RED, true));                 

6                                  g2d.fill(new Ellipse2D.Double(x,y,200,50));

7                                  BufferedImage bi1=ImageIO.read(new File("wedding.png"));

8                                  g2d.drawImage(bi1,x+50,y-80,bi1.getWidth(),bi1.getWidth(),this);

                       

9                                  Date dat=new Date();                                 

10                                g2d.setPaint(new Color(255,10,10));

11                                g2d.drawString(dat.toString(),x,y+150);

                       

12                                g.drawImage(bi,0,0,bi.getWidth(),bi.getHeight(),this);

                       

13                                ImageIO.write(bi,"png",new File("drawonimage.png"));                      

           

                        }catch(IOException e){}

                                   

            }

}

class ProgramWindow extends JFrame{

                       

                        ProgramWindow(){

                        setTitle("Draw on Image");

                        ShowImg si=new ShowImg();

                        si.setBackground(Color.BLACK);

                        add(si, BorderLayout.CENTER);

                        setDefaultCloseOperation(EXIT_ON_CLOSE);

                        setExtendedState(this.getExtendedState() | this.MAXIMIZED_BOTH);        

                        setVisible(true);

                                               

                        }

                       

}

public class DrawOnImage{

            public static void main(String[] args) {

                        new ProgramWindow();

            }

                       

                       

}

Code Explanation

1 Read an image file (image02.jpg) and place the image data in the BufferedImage object bi.

2 Create the Graphics2d object from the BufferredImage bi so you can start draw somethings on it.

3-4 Determine the x-axis and y-axis values to place the ellipse shape on the image.

5 The setPaint of the Graphics2D is invoked to set gradient style to painting context. The GradientPaint object that is passed to setPaint method determines the gradient style. It is a cyclic or acyclic gradient style.

6 The fill method that takes an Ellipse object as its argument creates an ellipse shape on the image. The ellipse shape is filled with the gradient style.

7-8 Read  another image file (wedding.png) and place the image data in the BufferedImage object bi1. Then 

the BufferedImage bi1 is drawn on the orginal image by invoking the drawImage method of Graphics2D.

9-11 Get the current date and time and draw it on the image by invoking the drawString method. The current date and time displays in red color.

12 Draw the updated image on the Canvas so it is ready to show on the program window.

13 Write the updated image to the local file drawonimage.png.  

Quick Draw program

This is a simple Draw program. In this program you will learn how to record the location of mouse pointer on the frame window when it is pressed and dragged, to draw lines from one location to another location of the mouse pointer, to use the JColorChooser tool to enable the user to choose a color for drawing pen from a color dialog box.

QuickDraw source code:

1 import java.awt.*;

2 import java.awt.event.*;

3 import javax.swing.*;

class  Draw extends JFrame implements ActionListener{

4                      protected int x_axis, y_axis;

5                      protected JColorChooser jser;

6                      protected JButton btchooser;

7                      protected Color fcolor;

8                      Draw(){

9                                  fcolor=Color.BLACK;

10                                x_axis=y_axis=0;

11                                setDefaultCloseOperation(EXIT_ON_CLOSE);

12                                addMouseListener(new Readxy());

13                                addMouseMotionListener(new LineDraw());

14                                setLayout(null);

15                                setTitle("Quick Draw");

16                                setExtendedState(this.getExtendedState() | this.MAXIMIZED_BOTH);

17                                btchooser=new JButton("Set pen color");

18                                btchooser.setLocation(1,1);

19                                btchooser.setSize(200,25);

20                                btchooser.addActionListener(this);

21                                add(btchooser);

22                                setVisible(true);

23                                requestFocus();

24                                setCursor(new Cursor(Cursor.HAND_CURSOR));

                                                           

                        }

25                    public void resetXY(int x,int y){

                                    x_axis=x;

                                    y_axis=y;

                        }

26                    class Readxy extends MouseAdapter{

                                   

                                    public void mousePressed(MouseEvent e){

                                                resetXY(e.getX(),e.getY());

                                    }

                                   

                        }

27                    class LineDraw extends MouseMotionAdapter{

                                    public void mouseDragged(MouseEvent e){

                                                int x=e.getX();

                                                int y=e.getY();                                              

                                                Graphics g=getGraphics();

                                                g.setColor(fcolor);

                                                g.drawLine(x_axis,y_axis,x,y);

                                                resetXY(x,y);

                                    }

                       

                                   

                        }

28                                public void actionPerformed(ActionEvent e){

                                                if(e.getSource()==btchooser) {

                                                            jser=new JColorChooser();                                   

                                                            fcolor=jser.showDialog(this,"Color Chooser",Color.BLACK);

                                                            requestFocus();

                                                           

                                                }

                                    }

}

29 public class QuickDraw{

 

            public static void main(String args[]){

                          new Draw();

  

            }

}

Code Explanation:
1 Introduce classes in awt package to the program.
2 Introduce classes in awt.event package to the program.
3 Introduce classes in swing package to the program.
4 Declare variables x_axis, and y_axis to record the values of x-axis, and y-axis of the mouse pointer. 
5 Declare variable jser to refer to the JColorChooser object.
6 Declare variable btchooser to refer to the JButton object.
7 Declare variable fcolor to store the color value chosen from the JColorChooser dialog box. 
8 Draw is the constructor of the class Draw. The code in the constructor is executed when an object of the Draw class  is created.
9 Initialize the fcolor variable to the black color.
10 Initialize the x_axis, and y_axis variables to zero.
11 Allow the frame window to close when the user clicks the close button.
12 Register the mouse event with the current frame window. 
13 Register the mouse motion event with the current frame window. 
14 Set the layout of the current frame window to null so that you can customize the location of the components on it.
15 Set title of the current frame window.
16 Maximize the current frame window when it opens.
17 Create a JButton object. The JButton object is clicked to display a JColorChooser dialogbox.
18 Define the location of the JButton object on the current frame window.
19 Define the size of the JButton object.
20 Register the action event with the JButton object. The ActionListener interface has the actionPerformed method to be rewritten to enable the button to perform an action when it is clicked.
21 Add the JButton object to the current frame window.
22 Make sure the current frame window visible.
23 Make focus on the current frame window.
24 Set cursor type.
25 The resetXY method is defined to assign values to x-axis and y-axis of the mouse pointer to x_axis, and y_axis variables.
26 The class Readxy extends the MouseAdapter class so that the mousePressed method can be inherited. The mousePressed method is executed when the mouse is pressed in the current frame window. 
27 The class LineDraw extends the MouseMotionAdapter class to inherit the mouseDragged method. This method is executed when the mouse is dragged in the current frame window.
28 To able a button to perform an action when it is clicked, the actionPerformed method of the ActionListener interface has to be rewritten.
29 The QuickDraw class has the main method to start the program.