lines/gaps between tiles when rotated.. aliasing?

May 24, 2011 at 3:20 AM

Hi everyone,

I'm trying to rotate the maps for a wpf app, and while the rotation itself seems to be working (I still have to figure out how to animate the change in rotation), I'm getting some weird aliasing artifacts between the rotated tiles.

There is a picture at

(If that link didn't work, it's at the tinypic dot com site, with a /r/ieqfqw/7 after the dot com).

When the rotation angle is a multiple of 90 degrees, the lines disappear, and it looks as per normal). Has anyone encountered this issue before? Does it ring any bells, and someone knows what it might be, or where to begin looking?

In case it matters, I'm rotating the canvas in the SilverlightRendering.MapRenderer class.


Thanks very much..

May 27, 2011 at 9:00 AM
Edited May 27, 2011 at 9:04 AM

There is no easy solution for this. It has to do with drawing something on the edge of a pixel. You can imagine that if your source image has to be drawn halfway a target pixel there is problem.  

When the canvas is not rotated there is the same problem but this can be solved by rounding the edge of the image to a whole pixel. With rotated images there will always be some part of the edge that covers part of a pixel. We have the same problem in Silverlight when the browser is not set to 100% scaling. 

A possible solution would be to draw the entire canvas before rotating and then rasterize that and then rotate the rasterized image. This will need a totally different way of rendering though. 


May 30, 2011 at 2:20 AM

hmm.. thanks for the feedback. I'll have to have a bit of a think about this.. :)

would it help if I only ever drew the canvas at exactly 100% size (ie each 256px tile was 256 pixels on screen)?



May 30, 2011 at 11:24 AM

only if it is not rotated.