locked
How do I rotate an image but have it remain within its container? RRS feed

  • Question

  • User385852 posted

    My previous post somehow got deleted/locked so I am reposting it...?

    I am trying to rotate an image but have it remain within the container, to solve it, i tried scaling the image based upon its width and height. Problem I'be been getting is that that when I rotate the image in a jpeg viewer so that width becomes height and height becomes width, and then try to scale the image after rotation, the image.width and image.height doesnt get updated even though the image on-screen in the application looks like it has been rotated.

    Previous person said its because the bitmap didnt get updated. Is there a way to get the actual width/height of the image that is being displayed instead of the bitmap width/height?

            private void ScaleImage(Image image)
            {
                double x = image.Width;
                double y = image.Height;
                if (image.Height> image.Width)
                {
                    x = image.Height;
                    y = image.Width;
                }
                if (image_rotation / 90 % 2 != 0)
                {
                    image.Scale = y/x;
                }
                else
                {
                    image.Scale = 1;
                }
            }
            private void W2RLeft_Clicked(object sender, EventArgs e)
            {
                image_rotation -= 90;
                ScaleImage(w2Image);
                w2Image.RotateTo(image_rotation, 100);
            }
    
            private void W2RRight_Clicked(object sender, EventArgs e)
            {
                image_rotation += 90;
                ScaleImage(w2Image);
                w2Image.RotateTo(image_rotation, 100);
            }
    

    How would I solve this issue, or.. is there a better way of solving it? thanks

    Thursday, May 23, 2019 6:57 PM

All replies

  • User180523 posted

    I am trying to rotate an image but have it remain within the container, Maybe start by showing us the actual problem. Screen shots are wonderful. Are you saying that when you rotate the Image it is growing to a size you don't like? Can we see your XAML? Have you tried just setting the WidthRequest and HeightRequest on the Image? At most you might swap the bindings for width and height request based on rotation.

    Basic logic Width return IsRotated90 ? width : height Concept not code. Give coding that a whirl.

    Thursday, May 23, 2019 7:07 PM
  • User385852 posted

    That rotate left button is connected to the W2RLeft_Clicked http s://imgur.co m/a/2cyxAV1

    image_rotation=0 w2Image.width=1200 w2Image.height=688

    Even though its not the case for displayed image apparently, i need to be in the site longer to post legit links soo, i just split the url

    Thursday, May 23, 2019 7:22 PM
  • User385852 posted

    @ClintStLaurent said:

    I am trying to rotate an image but have it remain within the container, Maybe start by showing us the actual problem. Screen shots are wonderful.

    I've uploaded the problem in the url when i rotate without scaling. http s://imgur.co m/a/2cyxAV1

    Thursday, May 23, 2019 8:44 PM
  • User180523 posted

    Again please post your XAML. I suspect you just need to set the AspectRatio to Fit

    Your before/after images for the convenience of others

    Thursday, May 23, 2019 10:08 PM
  • User385852 posted

    I am already using aspect fit, heres the xaml

    Friday, May 24, 2019 12:07 AM
  • User180523 posted

    Ok. That is odd. Its like the Image is the background image because its behind the other rows. Huh.

    As an experiment... Instead of using a Grid try laying it out with a StackLayout. Just to see if the allocated spaces resize more dynamically.

    Friday, May 24, 2019 10:34 AM
  • User385852 posted

    @ClintStLaurent said: Ok. That is odd. Its like the Image is the background image because its behind the other rows. Huh.

    As an experiment... Instead of using a Grid try laying it out with a StackLayout. Just to see if the allocated spaces resize more dynamically.

    It doesnt resize anything at all, it just rotates the given image, if an image's width and height are not identical, then when it rotates, it wont fit in any container u put it in, because its width becomes its height, and its height becomes its width, while xamarin still thinks that the image's width and height remained the same.

    Friday, May 24, 2019 4:05 PM
  • User385852 posted

    Which is why I tried to fix the case with the above method in original post, but it didnt work because image.width and image.height doesn't reflect the width and height of the image, but the bitmap width/height for some reason.

    Friday, May 24, 2019 9:01 PM