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!

You might wanna look at the SO question, "How do you draw like a crayon?" http://stackoverflow.com/questions/509310/how-do-you-draw-like-a-crayon — KingNestor, Sep 03 '09 at 00:42
@KingNestor: "Give a man a crayon, and he'll draw for a day. Teach a man to write software that draws like a crayon, and he'll work at Burger King for a lifetime". — MusiGenesis, Sep 03 '09 at 01:21
I would look at SketchFlow before getting started on this. WPF may be a better technology to look at than windows forms. (leaving my comment here instead of the answer) — Sam Saffron, Sep 03 '09 at 09:30

score 4 · Accepted Answer · edited Nov 08 '21 at 10:17

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

... 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.

@MusiGenesis, seeing that SketchFlow is developed with WPF I would not think that you would be trading off much. — Sam Saffron, Sep 03 '09 at 05:51

Creating a Hand-Drawn effect using .NET

1 Answers1

Linked