How to flip an image

[mwpowellhtx]

How do we flip an image? Either horizontally about a Y axis, or vertically about an X axis. I see I can also Translate or Rotate a canvas, which could be useful in certain of our use cases, although I am not familiar with the vocabulary, what is pre-concatenation?

[mkj-stonehill]

I literally just figured out how to do this today. Here's a function that will flip a bitmap horizontally:

public void Flip(SKBitmap bmp)
{
    // Create a canvas to draw into the bitmap
    using var canvas = new SKCanvas(bmp);

    // Set a transform matrix which moves the bitmap to the right,
    // and then "scales" it by -1, which just flips the pixels
    // horizontally
    canvas.Translate(bmp.Width, 0);
    canvas.Scale(-1, 1);
    canvas.DrawBitmap(bmp, 0, 0);
    return;
}

[mwpowellhtx]

Scale? That's interesting. I guess which can also grow or shrink the bitmap under canvas. Gonna guess this is destructive of the bmp correct? We are keeping a stack of the changes done in case we need to roll back to a previous version, as a (SKRectM, SKBitmap) tuple. Here M being a decimal friendly implementation of the SKRect structure, for internal consistency. Neither here nor there given the question and response, but interesting keeping SKBitmap consistency at any rate.

[mwpowellhtx]

Turns out though that in our domain, the driving image we are dealing with, a "map image layer", is rotated exactly 180 degrees. Which makes the coordinates, world zero translation, etc, easier to contend with. But which also makes some operations interesting in that we must rotate, do the layers, then rotate back again, in some cases. But in the final analysis, rotate, to deliver the final product.

[mkj-stonehill]

Yeah, the Scale thing is not intuitive (at least it wasn't to me). But "scaling" by negative one just flips the pixels (instead of actually scaling the bitmap). And the Translate off to the right makes sure the the -1 (horizontal) scaling makes the pixels land in the correct place (resulting in the flipped bitmap). You can use the same trick to flip vertically (or both horizontally and vertically at the same time, which I guess is a rotate by 180 degrees?).

And, certainly, scaling by values that are not 1 (or -1) will grow or shrink the image while also flipping

As I've written it, it is destructive (since that's what I needed). If you want a new bitmap, create it and make the canvas draw into it instead:

        static public SKBitmap Flip(SKBitmap bmp)
        {
            // Create a bitmap (to return)
            var flipped = new SKBitmap(bmp.Width, bmp.Height, bmp.Info.ColorType, bmp.Info.AlphaType);

            // Create a canvas to draw into the bitmap
            using var canvas = new SKCanvas(flipped);

            // Set a transform matrix which moves the bitmap to the right,
            // and then "scales" it by -1, which just flips the pixels
            // horizontally
            canvas.Translate(bmp.Width, 0);
            canvas.Scale(-1, 1);
            canvas.DrawBitmap(bmp, 0, 0);
            return flipped;
        }

[mwpowellhtx]

Yessir I caught that (the axis inversion).

I was even thinking bitmap.Copy(), but along the same lines, yes.

Thanks! 👍

[mwpowellhtx]

I guess more broadly thinking in terms of degrees of freedom, what sort of inputs I could use. Starting bitmap and view rect, target view rect, target bitmap area, which I think could be different from each other as well. The trick is in keeping world coordinates and canvas or screen coordinates straight.

[mwpowellhtx]

Follow on scaling question link to the skia.org API docs. What does scale exactly do to the canvas / view (loosely speaking) in terms of coordinate space? We maintain a decimal friendly world and view SKRectM toward these ends, when we ask for a scaling, what does that do to the coordinate space in question? Is there source behind the API docs perhaps? Guessing probably this, that's closer, but I need to see in source, or can someone explain please, what it actually does, math wise what we should be doing to coordinate.

[mwpowellhtx]

From the source itself, but still routing through matrices and decices, which is great, that's fine. But I still need/want to know the actual effect, i.e. multiplying into the coordinate space? So to unwind and get to world coordinates, we divide out the scale?