0

I am trying to rotate a canvas which contains few image tiles (Four 200x200 images. I put them together to make a big square). It is ok when the rotation degree is 0: enter image description here

When rotation degree > 0, let's say 30. There is some spaces between each image tiles: enter image description here

What I want is no space between each image tiles: enter image description here

Here is the code snippet of rotating the Canvas:

myCanvasCompositeTransform.CenterX = 200;
myCanvasCompositeTransform.CenterY = 200;
myCanvasCompositeTransform.Rotation = 30;

Here is the link of the source code: source code


Please help me to solve this problem, thanks!

mobile app Beginner
  • 1,651
  • 3
  • 26
  • 40

1 Answers1

2

What you are seeing in the second rotated screenshot isn't space between the images. It is the anti-aliasing of the image with the black background behind it. Since there is no way to draw a truly straight line diagonally with pixels.

In order to get the effect that you want you could try a few things.

  1. Put a big square behind all the images that has a color similar to the overall color of the images. This would make the lines less noticeable.

  2. Put tiny squares behind each image colored as above.

  3. Stitch the images together into a single image using code and then rotate the single image.

Bryant
  • 8,660
  • 1
  • 33
  • 53
  • In real case, I will use image with complex background. Therefore (1) and (2) is not applicable. For (3), it seems that it is a solution. But the problem is I reload the canvas at the GestureListener.DragDelta event. It make the reload process much slower if always stitches all image tiles before canvas.Children.Add(). – mobile app Beginner Dec 14 '12 at 04:23
  • I would suggest this to make it faster. (1) at the drag event just add the image as before and put it on top of the big image and then (2) in the background build your new big image and once you're done remove the "floating" small image. – Bryant Dec 14 '12 at 16:25