How to create Paint-like app with XNA?

Question

The issue of programmatically drawing lines using XNA has been covered here. However, I want to allow a user to draw on a canvas as one would with a drawing app such as MS Paint.

This of course requires each x and/or y coordinate change in the mouse pointer position to result in another "dot" of the line being drawn on the canvas in the crayon color in real time.

In the mouse move event, what XNA API considerations come into play in order to draw the line point by point? Literally, of course, I'm not drawing a line as such, but rather a sequence of "dots". Each "dot" can, and probably should, be larger than a single pixel. Think of drawing with a felt tip pen.

Answer 1

The article you provided suggests a method of drawing lines with primitives; vector graphics, in other words. Applications like Paint are mostly pixel based (even though more advanced software like Photoshop has vector and rasterization features).

Bitmap editor

Since you want it to be "Paint-like" I would definitely go with the pixel based approach:

1. Create a grid of color values. (Extend the System.Drawing.Bitmap class or implement your own.)
2. Start the (game) loop:
   • Process input and update the color values in the grid accordingly.
   • Convert the Bitmap to a Texture2D.
   • Use a sprite batch or custom renderer to draw the texture to the screen.
3. Save the bitmap, if you want.

Drawing on the bitmap

I added a rough draft of the image class I am using here at the bottom of the answer. But the code should be quite self-explanatory anyways.

As mentioned before you also need to implement a method for converting the image to a Texture2D and draw it to the screen.

---

First we create a new 10x10 image and set all pixels to white.

var image = new Grid<Color>(10, 10);
image.Initilaize(() => Color.White);

Next we set up a brush. A brush is in essence just a function that is applied on the whole image. In this case the function should set all pixels inside the specified circle to a dark red color.

// Create a circular brush
float brushRadius = 2.5f;
int brushX = 4;
int brushY = 4;
Color brushColor = new Color(0.5f, 0, 0, 1); // dark red

Now we apply the brush. See this SO answer of mine on how to identify the pixels inside a circle. You can use mouse input for the brush offsets and enable the user to actually draw on the bitmap.

double radiusSquared = brushRadius * brushRadius;

image.Modify((x, y, oldColor) =>
{
    // Use the circle equation
    int deltaX = x - brushX;
    int deltaY = y - brushY;
    double distanceSquared = Math.Pow(deltaX, 2) + Math.Pow(deltaY, 2); 

    // Current pixel lies inside the circle
    if (distanceSquared <= radiusSquared)
    {
        return brushColor;
    }

    return oldColor;
});

You could also interpolate between the brush color and the old pixel. For example, you can implement a "soft" brush by letting the blend amount depend on the distance between the brush center and the current pixel.

Drawing a line

In order to draw a freehand line simply apply the brush repeatedly, each time with a different offset (depending on the mouse movement):

---

Custom image class

I obviously skipped some necessary properties, methods and data validation, but you get the idea:

public class Image
{
    public Color[,] Pixels { get; private set; }

    public Image(int width, int height)
    {
        Pixels= new Color[width, height];
    }

    public void Initialize(Func<Color> createColor)
    {
         for (int x = 0; x < Width; x++)
         {
             for (int y = 0; y < Height; y++)
             {
                  Pixels[x, y] = createColor();
             }
         }
    }

    public void Modify(Func<int, int, Color, Color> modifyColor)
    {
         for (int x = 0; x < Width; x++)
         {
             for (int y = 0; y < Height; y++)
             {
                  Color current = Pixels[x, y];
                  Pixels[x, y] = modifyColor(x, y, current);
             }
         }
    }
}