Draw a fluid set of circles in real time using WriteableBitmapEx

Question

I have a WriteableBitmap object which I load a .jpg image into and show it in an image control. Now I would like to be able to let the user draw on that image with a little half-transparent brush.

Right now I am handling the MouseDown and MouseMove events to draw a little half-transparent circle on every change of the mouse's coordinates over the image:

MyWriteableBitmap.FillEllipseCentered(x, y, 1, 1, myColor);

That clearly does not refresh fast enough though - leaving me with a set of dots (unless the user moves the mouse very very slow).

My temporary solution is to just draw lines from one point to another and update the two points on every MouseMove event - the curve is consistent that way but is only one-pixel wide, which doesn't look great.

What is the best approach for me to tackle that problem?

For drawing programs (like paint) it is typical to "skip" between known mouse-event points when they are far apart with a strait line. — , Dec 02 '13 at 18:53
How about putting the image into an ImageBrush and use that as the Background of an [InkCanvas](http://msdn.microsoft.com/en-us/library/System.Windows.Controls.InkCanvas(v=vs.110).aspx)? — Clemens, Dec 02 '13 at 19:15

Mark Feldman · Accepted Answer · 2013-12-02T22:16:24.750

You'll get better performance and automatic conversion to splines (if you want it) by using an InkCanvas instead:

<InkCanvas>
    <InkCanvas.DefaultDrawingAttributes>
        <DrawingAttributes Color="Blue" Width="8" Height="8" FitToCurve="True" />
    </InkCanvas.DefaultDrawingAttributes>
</InkCanvas>

You can always get it to render itself into a bitmap later if you need it:

RenderTargetBitmap bitmap = new RenderTargetBitmap((int)theCanvas.ActualWidth, (int)theCanvas.ActualHeight, 96d, 96d, PixelFormats.Default);
bitmap.Render(theCanvas);

UPDATE: this works for transparent brushes as well BTW, and also pressure-sensitive pens (if enabled). The main problem is that the performance will drop as the user draws more and more lines, but you can easily fix that by rendering to a bitmap and then setting that bitmap to be the InkCanvas background i.e. the InkCanvas shouldn't never be displaying more than 1 spline, and only when the user is drawing it.

I had no idea about this control, guess I need to do some learning on WPF. Thanks! — Rafał Saltarski, Dec 05 '13 at 17:37

Draw a fluid set of circles in real time using WriteableBitmapEx

1 Answers1