Andromo - Start Making Apps - Free Signup

Announcement

Collapse
No announcement yet.

Maintain Image Aspect ratio at runtime

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Maintain Image Aspect ratio at runtime

    I'm guessing the Maintain aspect ratio for images is only for the design environment. Is there a way to do the same at runtime? If not I'll add it to the suggestion box.

    I have an Image object that I am dynamically loading with images of various sizes but they keep getting stretch or squished. I'd use a web or Thumblist object but I need to have objects layered on top of the object.

    Any ideas?

  • #2
    Hello,

    You could resize the image object to the dimensions of the image you are about to load:

    Code:
    sImageFile = "image.jpg";
    tImageInfo = Image.GetFileInfo();
    Image.SetSize("Image1", tImageInfo.Width, tImageInfo.Height);
    Image.Load("Image1", sImageFile);
    You coudl get more complicated, figure out the math to reposition the newly sized object to the center of the page . . . if you really want to.

    Give 'er a try. Let me know if it works for you!

    Comment


    • #3
      Do you Flash?

      See if maybe this will help -

      Scale

      Let me know, I have the source code
      Regards,

      -Ron

      Music | Video | Pictures

      Comment


      • #4
        I ran into the same problem when I was playing around with a way to make a picture viewer. I made a function that would get the properties of the image and then adjust the image as it was displayed. This is very simple code and only looks for portrait or landscape pictures and adjusts the image accordingly. You should be able to modify appropriately to adjust for the correct ration of your image.

        In making this function I wanted to make sure that I could view pictures that were taken and larger than the project, but ensure that they were displayed withing the confines of the project. You will also notice that a second image is referenced ("Image2"). This is a border around the picture and acts like a frame so I had to resize accordingly.

        Anywho, here is the function:

        Code:
        function GetImage(landscape,portrait)
        image = pic_table[ctr];
        image_info = Image.GetFileInfo(image);
        if (image_info.Width > image_info.Height) then
        	iwidth = landscape
        else
        	iwidth = portrait
        end
        ratio = (image_info.Width / iwidth);
        iheight = (image_info.Height / ratio);
        Image.SetVisible ("Image1", false);
        Image.SetVisible ("Image2", false);
        Image.SetSize("Image2", (iwidth + 20), (iheight + 20));
        Image.SetSize("Image1", iwidth, iheight);
        Image.Load("Image1", image);
        Image.SetVisible ("Image2", true);
        Image.SetVisible ("Image1", true);
        end

        And here is an example of how I would use it.

        Code:
        ssfolder = Dialog.FolderBrowse("Select a folder that contains pictures.", _DesktopFolder);
        pic_table = File.Find(ssfolder, "*.jpg", false, false, nil);
        pic_count = Table.Count(pic_table);
        ctr = 1;
        GetImage(500,375)
        Image.SetVisible("Image1", true);
        Image.SetVisible("Image2", true);
        I hope that helps
        Tigg
        TJ-Tigger
        "A common mistake that people make when trying to design something completely foolproof was to underestimate the ingenuity of complete fools."
        "Draco dormiens nunquam titillandus."
        Map of IR Forum Users - IR Project CodeViewer - Online Help - TiggTV - QuizEngine

        Comment


        • #5
          One suggestion which falls off the beaten path is using javascript pop-ups too, I love 'em for image display and it's a cinch to have them resize to a picture at runtime dynamically, so you don't even have to know what size your images are to use them. I'm not suggesting that this is the nest way, just one way. For me, if point-and-go is the order of the day, Javascript is becoming a very attractive solution for dynamic image content.

          In terms of making galleries I tend to size my images to a standard size first, just an old habit... As for keeping aspect ratio at runtime I would probably get the image size dynamically and then calculate the aspect ration by dividing the y into the x and then resizing my image according to that ratio, i.e. an image at 800 X 600 becomes 600 pixels wide at 450 pixels tall if 4:3 is the ratio...

          Corey Milner
          Creative Director, Indigo Rose Software

          Comment


          • #6
            Thanks for all the great responses.....

            Tig...You win the prize... that was exactly the solution I was looking for and handed to me on a silver platter too.

            Now if only I could spell ratio correctly....

            Comment


            • #7
              Here's the final function I used for anyone that needs it. Essentially it requires 4 values:

              maxwidth = the maximum width your image can be
              maxheight = the maximum height your image can be
              centerX = the X value of your center x,y position
              centerY = the Y value of your center x,y position


              --**************************************************
              -- RESIZE_CENTER FUNCTION
              --**************************************************
              function RESIZE_CENTER(maxwidth, maxheight, centerX, centerY)
              --If width larger than height resize based on width
              if (ImageWidth > ImageHeight) then

              iwidth = maxwidth --set width to max specifed in function call
              ratio = (ImageWidth / iwidth); -- determine ratio
              iheight = (ImageHeight / ratio); -- set height based on ratio

              --else height is larger and resize based on height
              else
              iheight = maxheight -- set height to max specified in function call
              ratio = (ImageHeight / iheight); --determine ratio
              iwidth = (ImageWidth / ratio); -- set width
              end

              -- Determine top left X & Y based on Image center coordinates sent in function call
              CoordX = centerX - (iwidth / 2);
              CoordY = centerY - (iheight / 2);
              end

              --------------------------------------------------------------

              --Sample Project actions using this function

              --Get Image Info
              ImageInfo = Image.GetFileInfo("AutoPlay\\Images\\indigorose.pn g");

              --Set Image Height & Width based off of Info
              ImageWidth = ImageInfo.Width
              ImageHeight = ImageInfo.Height

              --Call the function with max X,?Y of 475 pixels and Center of 456,245

              RESIZE_CENTER(475, 475, 456, 245)

              --Hide Image
              Image.SetVisible("Image", false);

              --Set Image Size based on function results
              Image.SetSize ("Image", iwidth, iheight);

              --Set Image position based on function results
              Image.SetPos("Image", CoordX, CoordY);

              --Load the image using the image path
              Image.Load ("Image", "AutoPlay\\Images\\indigorose.png");

              --Set the image Visible again
              Image.SetVisible("Image", true);

              Comment

              Working...
              X