Java Mini-Paint Program

Okay, all you Java programmers out there! Here's my first tutorial! The last time I checked, there wasn't a Java paint program out here yet, so hopefully I'm the first. This tutorial will cover pretty much all of the code involved, so I guess this counts as a beginner tut. So, in this program that we'll be making(if you do it right), you'll be able to draw on a blank white canvas, change the colors of your brush, and clear it! Enough chat, let's do it!

Things needed before-code:
Okay, so some things that you'll need to do before the code is make an 16x16 GIF for each of the colors that we'll have, so you'll need a blue, green, magenta, black, and red GIF (create seperate GIFs. It's not that hard. Just go to Microsoft Paint[if you're using a Microsoft OS], make a 16x16 image and fill the canvas with that color). Or, you could use mine, which are attached. =D

Remember to save the GIFs as the names of the GIFs in the code, or just change the code to fit your file names.

Something else to do(I guess you don't have to, but I like to keep things organised), is to create a Paint folder and store all your code and images in it.

Now that you've done all that, we can get to the actual code =]


/* 

 * Code by NomNom /*

 */

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;



public class paint{

	public static void main(String[] args){

		Icon iconB = new ImageIcon("blue.gif");

		//the blue image icon

		Icon iconM = new ImageIcon("magenta.gif");

		//magenta image icon

		Icon iconR = new ImageIcon("red.gif");

		//red image icon

		Icon iconBl = new ImageIcon("black.gif");

		//black image icon

		Icon iconG = new ImageIcon("green.gif");

		//finally the green image icon

		//These will be the images for our colors.

		

		JFrame frame = new JFrame("Paint It");

		//Creates a frame with a title of "Paint it"

		

		Container content = frame.getContentPane();

		//Creates a new container

		content.setLayout(new BorderLayout());

		//sets the layout

		

		final PadDraw drawPad = new PadDraw();

		//creates a new padDraw, which is pretty much the paint program

		

		content.add(drawPad, BorderLayout.CENTER);

		//sets the padDraw in the center

		

		JPanel panel = new JPanel();

		//creates a JPanel

		panel.setPreferredSize(new Dimension(32, 68));

		panel.setMinimumSize(new Dimension(32, 68));

		panel.setMaximumSize(new Dimension(32, 68));

		//This sets the size of the panel

		

		JButton clearButton = new JButton("Clear");

		//creates the clear button and sets the text as "Clear"

		clearButton.addActionListener(new ActionListener(){

			public void actionPerformed(ActionEvent e){

				drawPad.clear();

			}

		});

		//this is the clear button, which clears the screen.  This pretty

		//much attaches an action listener to the button and when the

		//button is pressed it calls the clear() method

		

		JButton redButton = new JButton(iconR);

		//creates the red button and sets the icon we created for red

		redButton.addActionListener(new ActionListener(){

			public void actionPerformed(ActionEvent e){

				drawPad.red();

			}


		});

		//when pressed it will call the red() method.  So on and so on =]

		

		JButton blackButton = new JButton(iconBl);

		//same thing except this is the black button

		blackButton.addActionListener(new ActionListener(){

			public void actionPerformed(ActionEvent e){

				drawPad.black();

			}

		});

		

		JButton magentaButton = new JButton(iconM);

		//magenta button

		magentaButton.addActionListener(new ActionListener(){

			public void actionPerformed(ActionEvent e){

				drawPad.magenta();

			}

		});

		

		JButton blueButton = new JButton(iconB);

		//blue button

		blueButton.addActionListener(new ActionListener(){

			public void actionPerformed(ActionEvent e){

				drawPad.blue();

			}

		});

		

		JButton greenButton = new JButton(iconG);

		//green button

		greenButton.addActionListener(new ActionListener(){

			public void actionPerformed(ActionEvent e){

				drawPad.green();

			}

		});

		blackButton.setPreferredSize(new Dimension(16, 16));

		magentaButton.setPreferredSize(new Dimension(16, 16));

		redButton.setPreferredSize(new Dimension(16, 16));

		blueButton.setPreferredSize(new Dimension(16, 16));

		greenButton.setPreferredSize(new Dimension(16,16));

		//sets the sizes of the buttons

		

		panel.add(greenButton);

		panel.add(blueButton);

		panel.add(magentaButton);

		panel.add(blackButton);

		panel.add(redButton);

		panel.add(clearButton);

		//adds the buttons to the panel

		

		content.add(panel, BorderLayout.WEST);

		//sets the panel to the left

		

		frame.setSize(300, 300);

		//sets the size of the frame

		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		//makes it so you can close

		frame.setVisible(true);

		//makes it so you can see it

	}

}



class PadDraw extends JComponent{

	Image image;

	//this is gonna be your image that you draw on

	Graphics2D graphics2D;

	//this is what we'll be using to draw on

	int currentX, currentY, oldX, oldY;

	//these are gonna hold our mouse coordinates


	//Now for the constructors

	public PadDraw(){

		setDoubleBuffered(false);

		addMouseListener(new MouseAdapter(){

			public void mousePressed(MouseEvent e){

				oldX = e.getX();

				oldY = e.getY();

			}

		});

		//if the mouse is pressed it sets the oldX & oldY

		//coordinates as the mouses x & y coordinates

		addMouseMotionListener(new MouseMotionAdapter(){

			public void mouseDragged(MouseEvent e){

				currentX = e.getX();

				currentY = e.getY();

				if(graphics2D != null)

				graphics2D.drawLine(oldX, oldY, currentX, currentY);

				repaint();

				oldX = currentX;

				oldY = currentY;

			}


		});

		//while the mouse is dragged it sets currentX & currentY as the mouses x and y

		//then it draws a line at the coordinates

		//it repaints it and sets oldX and oldY as currentX and currentY

	}


	public void paintComponent(Graphics g){

		if(image == null){

			image = createImage(getSize().width, getSize().height);

			graphics2D = (Graphics2D)image.getGraphics();

			graphics2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

			clear();


		}

		g.drawImage(image, 0, 0, null);

	}

	//this is the painting bit

	//if it has nothing on it then

	//it creates an image the size of the window

	//sets the value of Graphics as the image

	//sets the rendering

	//runs the clear() method

	//then it draws the image



	public void clear(){

		graphics2D.setPaint(Color.white);

		graphics2D.fillRect(0, 0, getSize().width, getSize().height);

		graphics2D.setPaint(Color.black);

		repaint();

	}

	//this is the clear

	//it sets the colors as white

	//then it fills the window with white

	//thin it sets the color back to black

	public void red(){

		graphics2D.setPaint(Color.red);

		repaint();

	}

	//this is the red paint

	public void black(){

		graphics2D.setPaint(Color.black);

		repaint();

	}

	//black paint

	public void magenta(){

		graphics2D.setPaint(Color.magenta);

		repaint();

	}

	//magenta paint

	public void blue(){

		graphics2D.setPaint(Color.blue);

		repaint();

	}

	//blue paint

	public void green(){

		graphics2D.setPaint(Color.green);

		repaint();

	}

	//green paint


}



//good job, you've made your paint program =]

Yeah! You've made it through. Hopefully this helped someone with something. Thanks!

-NomNom

Attached Files

magenta..GIF 832bytes 5317 downloads
red..GIF 832bytes 5313 downloads
green..GIF 852bytes 5303 downloads
blue..GIF 832bytes 5292 downloads
black..GIF 832bytes 5301 downloads

Edited by NomNom, 23 August 2010 - 03:36 PM.

Crashnboboom said:

Hey. I'm a newbie when it comes to java programming so if I sound dumb, so be it.
If I wanted to add buttons that change the tool in use. Like, a square or circle tool instead of the default pencil, how would I go about doing that?

Okay. So, the button part:

//this is in the paint class, not the PadDraw class

Icon iconWhatever = new ImageIcon("whatever.gif");


JButton whateverButton = new JButton(iconWhatever);
		//green button
		whateverButton.addActionListener(new ActionListener(){
			public void actionPerformed(ActionEvent e){
				drawPad.whatever();
                                //this here goes to the drawPad (it's a PadDraw class that we made, so technically it goes into the class)
                                //so this goes to the method in PadDraw, that we shall add next
			}
		});

Okay, PadDraw modification:

//at the bottom-ish add this:
public void whatever(){
		//you put whatever code you want in here...
                //I set this up the way it is so we could link the PadDraw methods to the paint class (via buttons)
	}