[SOLVED] How to fill rectangle with an image but not have it stretch?

Audio and Graphics
#1

This is my first time doing anything with the Graphics Engine 2.0, and having trouble figuring out how to do something I would think would be simple.
 
I am creating some panels dynamically (doing math on the contentWidth and contentHeight to fit things on all screens) using display.newRect and want to fill them with an image.
 
Here is the code I am using:

local buttonWidth = [sizing code] local buttonheight = [sizing code] local filenum = math.random( 1,4 ) myPanel[i] = display.newRect( 0, 0, buttonWidth, buttonHeight ) myPanel[i].fill = { type = "image", filename = category.pack[i].filename .. "\_0" .. filenum .. ".jpg" } local scaleFactorY = myPanel[i].width / myPanel[i].height myPanel[i].fill.scaleX = 1 myPanel[i].fill.scaleY = scaleFactorY

The buttonWidth and buttonHeight values change depending on the device, since the contentWidth and contentHeight change based on the universal config.lua that Rob had outlined.  (I am using the 1200x800 aspect ratio.)

The buttonWidth values might be 465, 505, 548, or 575 (in my testing in the Simulator).

The buttonHeight values might be 124, 126, or 145 (in my testing in the Simulator).

The fill images are 512px x 256px.

The issue that is happening is that the images are being shrunk to fit the width of the panel.  They do not appear to be shrunk vertically, but are correctly “cut.”  The problem with this is that the fill images are now the wrong ratio.  For example, in one image, there are a bunch of circles.  But when viewed in the panel, they are squeezed so they look more like vertical ovals.

is there a way to keep the fills the correct ratio?  So that if it does stretch to fit the width (which is fine to cover the issue of the panels being both smaller and larger than the fill image) that it adjusts the height accordingly so the fill doesn’t look skewed?

#2

I use this function get the max size of the image before drawing it (again) :

 -- get the size of an image given the maximum width and height. Maintain aspect ratio. Prefers larger image function self:getImageSize(image, baseDir, maxwidth, maxheight) -- print( baseDir , image .. " : " .. maxwidth .. "x" .. maxheight) local tempImage if baseDir == nil then tempImage = display.newImage(image) else tempImage = display.newImage(image, baseDir) end -- if tempImage == nil then return end -- print( "maxheight / tempImage.height " , maxheight , tempImage.height ) -- print( "maxwidth / tempImage.width " , maxwidth , tempImage.width ) local multiplier\_height = maxheight / tempImage.height local multiplier\_width = maxwidth / tempImage.width local width = nil local height = nil if multiplier\_height \> multiplier\_width then width = tempImage.width \* multiplier\_height height = tempImage.height \* multiplier\_height else width = tempImage.width \* multiplier\_width height = tempImage.height \* multiplier\_width end -- do we need to shrink? if width \> maxwidth then --resize width multiplier\_width = maxwidth / width width = maxwidth height = height \* multiplier\_width end if height \> maxheight then --resize height multiplier\_height = maxheight / height height = maxheight width = width \* multiplier\_height -- because this can only shrink, we do not need to check width again end tempImage:removeSelf() --make whole width = math.floor(width) height = math.floor(height) -- width = math.round(width) -- height = math.round(height) -- print("width/height : " .. width, height) -- print("height : " .. height) return { width = width, height = height } end
#3

Thanks yosu, but I don’t think that will help me.  I know the image size already.  And I am not creating an image to display.  I am creating a shape and using an image to fill it.

#4

Actually, I figured this out.  It was simply a matter of changing:

myPanel[i].fill.scaleY = scaleFactorY

to:

myPanel[i].fill.scaleY = scaleFactorY / 2

I assume, since the height is half the size of the width?

#5

I use this function get the max size of the image before drawing it (again) :

 -- get the size of an image given the maximum width and height. Maintain aspect ratio. Prefers larger image function self:getImageSize(image, baseDir, maxwidth, maxheight) -- print( baseDir , image .. " : " .. maxwidth .. "x" .. maxheight) local tempImage if baseDir == nil then tempImage = display.newImage(image) else tempImage = display.newImage(image, baseDir) end -- if tempImage == nil then return end -- print( "maxheight / tempImage.height " , maxheight , tempImage.height ) -- print( "maxwidth / tempImage.width " , maxwidth , tempImage.width ) local multiplier\_height = maxheight / tempImage.height local multiplier\_width = maxwidth / tempImage.width local width = nil local height = nil if multiplier\_height \> multiplier\_width then width = tempImage.width \* multiplier\_height height = tempImage.height \* multiplier\_height else width = tempImage.width \* multiplier\_width height = tempImage.height \* multiplier\_width end -- do we need to shrink? if width \> maxwidth then --resize width multiplier\_width = maxwidth / width width = maxwidth height = height \* multiplier\_width end if height \> maxheight then --resize height multiplier\_height = maxheight / height height = maxheight width = width \* multiplier\_height -- because this can only shrink, we do not need to check width again end tempImage:removeSelf() --make whole width = math.floor(width) height = math.floor(height) -- width = math.round(width) -- height = math.round(height) -- print("width/height : " .. width, height) -- print("height : " .. height) return { width = width, height = height } end
#6

Thanks yosu, but I don’t think that will help me.  I know the image size already.  And I am not creating an image to display.  I am creating a shape and using an image to fill it.

#7

Actually, I figured this out.  It was simply a matter of changing:

myPanel[i].fill.scaleY = scaleFactorY

to:

myPanel[i].fill.scaleY = scaleFactorY / 2

I assume, since the height is half the size of the width?