Question

I’m current drawing some tile (small square images) for a mapping app.

I’m using WPF to draw shapes on to these tiles.

I have a list of geospatial coordinates that make up polygons that are drawn.

The geospatial coordinates that make up these polygons are converted in to pixel coordinates.

The tiles are created at various set levels of detail.

At most of these levels of detail the drawing is fine; but at certain levels a visual artifact appears in the form of a spike or a line.

Here’s an example, these images are at three different levels of detail, one which shows the problem and two either side where the problem isn’t occurring.

This image is the highest detail level and is ok:

This image is at the medium detail level and exhibists the spikes (The one along road 85 is easiest to spot):

This image is at the lowest detail level and is ok:

The spikes appear to occur when two lines in the polygon get close to each other and/or form a dense point (convergence).

We have checked the source data and these artifacts don’t exist (this is also confirmed by the fact it renders correctly most of the time).

The next suspect was the coordinate conversion process, but again we checked it and the points being produced shouldn’t be drawn in this way.

That leaves WPF as the culprit which leaves us in a hard place as we can’t simply fix whatever the issue is as we could with our own code.

Have you guys seen this kinda thing before?

A fix would be fantastic 😉

At the moment it’s looking like we either have to put up with this issue or switch to using Direct2D. We already moved away from GDI+ rendering due to it being single threaded within a process.

Answer 1

The solution is to change the LineJoin property on the Pen object to ‘Round’.

http://msdn.microsoft.com/en-us/library/system.windows.media.pen.linejoin.aspx

http://msdn.microsoft.com/en-us/library/system.windows.media.penlinejoin.aspx

Many thanks to Moozhe who provided this answer in the comments.