Subscribe to Amrykid's Dev Log        RSS Feed
****- 1 Votes

Fun with GDI+ : A Paint Story, PT. 1

Icon Leave Comment
Have you ever wanted to make a Paint application? Fear Not! I'm developing one and showing you how! I will also post this in the tutorial section. The name of this application is called ImgPaint (I couldn't come up with a better name...sorry). I started this project because I've seen many beginners making paint applications and I realized that I have never made one. Thats when I began from scratch. I started off by overriding a PictureBox object like so:
public partial class ImgPictureBox : PictureBox
	{
		public ImgPictureBox()
		{
			InitializeComponent();
			this.MouseClick += new MouseEventHandler(ImgPictureBox_MouseClick);
			//pen = new Pen(this);
			line = new LineTool(this);
		}
		private LineTool line = null;
		//private Pen pen = null;
		void ImgPictureBox_MouseClick(object sender, MouseEventArgs e)
		{
			UseTool(line);
		}
		public void UseTool(ITool tool)
		{
			this.Cursor = tool.Cursor;
			tool.Use(this,this,Color.Blue);
			this.Cursor = Cursors.Arrow;
		}
		public void ApplyEffect(IEffect eff)
		{
		}
		
	}


ITool and IEffect are interfaces that allow you to draw a certain way on the picturebox and are defined like this.
public interface ITool
	{
		void Use(object sender,ImgPictureBox box,Color col);
		Cursor Cursor { get; }
		ImgPictureBox Box { get; set; }
	}
	public interface IEffect
	{
		void Render(ImgPictureBox box);
	}

Next, were gonna define a the line tool. It allows you to draw a straight line from point A to point B. You can change the color if you like.
public class LineTool : ITool
	{
		#region ITool Members
		public LineTool(ImgPictureBox box)
		{
			_box = box;
			_box.MouseDoubleClick += new MouseEventHandler(_box_MouseDoubleClick);
			_box.MouseClick += new MouseEventHandler(box_MouseClick);
			_box.MouseDown += new MouseEventHandler(box_MouseDown);
			_box.MouseUp += new MouseEventHandler(box_MouseUp);
			_box.MouseMove += new MouseEventHandler(box_MouseMove);
		}

		void _box_MouseDoubleClick(object sender, MouseEventArgs e)
		{
			box_MouseDown(sender, e);
		}
		private bool _drawing = false;
		public void Use(object sender,ImgPictureBox box,Color col)
		{
			//Checks if its itself calling this method and draws the line.
			if (sender is LineTool)
			{
				using (Graphics g = box.CreateGraphics())
				{
					g.DrawLine(Pens.Blue, _ox, _oy, _x, _y);
				}
				_ox = _x;
				_oy = _y;
			}
		}

		void box_MouseClick(object sender, MouseEventArgs e)
		{
			//box_MouseDown(sender, e);
		}

		void box_MouseUp(object sender, MouseEventArgs e)
		{
			//Sets the end of the line and calls the draw method.
			_drawing = false;
			_x = e.X;
			_y = e.Y;
			Use(this, (ImgPictureBox)sender, Color.Blue);
		}

		void box_MouseDown(object sender, MouseEventArgs e)
		{
			//Sets the start of the line
			_drawing = true;
			_ox = e.X;
			_oy = e.Y;
		}

		void box_MouseMove(object sender, MouseEventArgs e)
		{
			if (_drawing == false)
			{
				box_MouseDown(sender, e);
			}
		}
		//Defines our variables
		private static int _x, _y = 0;
		private static int _ox, _oy = 0;
		//Gives the tool its own cursor.
		public Cursor Cursor
		{
			get { return Cursors.Cross; }
		}

		#endregion

		#region ITool Members
		//Allows the tool to set events for the picture box.
		private ImgPictureBox _box = null;
		public ImgPictureBox Box
		{
			get
			{
				return _box;
			}
			set
			{
				_box = value;
			}
		}

		#endregion
	}

And the output is:
Posted Image
Bugs/ToDo:
  • Fix Redraw Bug: If you minimize or resize the window, the picture will distort. Minimizing will cause the picturebox to go blank.
  • Add more tools
  • Update the UI a bit.

0 Comments On This Entry

 

Search My Blog

Recent Entries

Recent Comments