Creating a Hand-Drawn effect using .NET

Question

I'd like to write a piece of code which creates images similar in style to those rendered by 'Balsamiq Mockups' or 'yUML' using the .NET framework.

Can anybody tell me how to achieve the hand-drawn pencil effect using GDI+?

The text can obviously be done using the right font - my question is how to render the lines, boxes and circles.

Thanks!

Answer 1

GDI+ is best suited for drawing right-angle-type graphics, but you can use it to produce an effect like this:

alt text http://img7.imageshack.us/img7/3497/crudite.jpg

... by using the DrawBezier method of the Graphics object. Here's the code snippet that renders the above image:

Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
using (Graphics g = Graphics.FromImage(bmp))
{
    g.FillRectangle(new SolidBrush(Color.White),
        new Rectangle(0, 0, bmp.Width, bmp.Height));
    Pen pen = new Pen(Color.Gray, 7.0F);
    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

    g.DrawBezier(pen,
        new Point(10, 10),
        new Point(11, 41),
        new Point(7, 147),
        new Point(13, 199));

    g.DrawBezier(pen,
        new Point(7, 10),
        new Point(87, 13),
        new Point(213, 17),
        new Point(319, 6));

    g.DrawBezier(pen,
        new Point(319, 4),
        new Point(305, 53),
        new Point(299, 107),
        new Point(319, 203));

    g.DrawBezier(pen,
        new Point(13, 199),
        new Point(33, 195),
        new Point(150, 207),
        new Point(319, 203));

}
pictureBox1.Image = bmp;

The keys to this effect are using a Pen with a large width (7.0F in this example), and setting the SmoothingMode of your Graphics object to HighQuality (since this looks like ass with the default SmoothingMode).

It would be relatively easy to write custom methods where you specify shapes to be drawn in the normal GDI+ way (rectangles and coordinates and radii and so forth), and then your code translates the lines of these elements into Bezier coordinates where you slightly alter the positions of things randomly by a few pixels in each direction.