CODEWITHSUNDEEP
c#androidxamarinbitmapskiasharp
MegaSlippers
MegaSlippers

Reputation: 43

SkiaSharp Mirror Bitmap

I'm looking to mirror a bitmap such that I can have an image and its mirror next to each other. I'm using SkiaSharp and my bitmaps are SKBitmap and I'm drawing them on a canvas.

canvas.Translate( -imageWidth/ 2.0f, -imageHeight/ 2.0f );
canvas.Scale( -1, 1,0,0 );
canvas.DrawBitmap( bitmap, new SKPoint( 0.0f, 0.0f ) );
canvas.Scale( -1, 1, 0, 0 );
canvas.Translate( imageWidth/ 2.0f, imageHeight / 2.0f );

I'm centring the image around the origin, mirroring it about the Y axis, painting the bitmap on the canvas, then undoing the transforms to get the result.

My problem seems to be that the bitmap just vanishes when I start playing with the scale method. This doesn't occur if I paint something like a circle.

Upvotes: 2

Views: 2487

Answers (1)

Matthew
Matthew

Reputation: 5222

This is because you actually want to do the reverse. SkiaSharp drawing happens by transforming a matrix, and then drawing using that.

Your code actually asks for this: - move the origin off the screen (left and up) by half the bitmap width and height - flip the origin on the y-axis (this makes the right side of the image flip over to the far left) - draw the image with the top left at the origin (right now at the very far left of the screen)

What you want to do is the opposite, but there is also a shortcut way for flipping the matrix at the center:

canvas.Scale(-1, 1, imageWidth / 2.0f, 0);
canvas.DrawBitmap(bitmap, 0, 0);

To do this in separate operations, you just need to translate the entire image to the right, and then flip:

canvas.Translate(imageWidth , 0);
canvas.Scale(-1, 1, 0, 0);

Also, to avoid having mixed transforms and having to undo everything, just wrap them in a SKAutoCanvasRestore (or just use the Save and Restore methods):

using(new SKAutoCanvasRestore(canvas, true))
{
   // transform and draw . . .
}

Upvotes: 8

Related Questions