hi,
the given example resizes the image to fit the larger side and adjusts
the other side to maintain proportion and middles it in the component
Lets take the first image component of dimension 100X200 as example
lets say you are loading a image of dimension 600X400
-once the image is loaded the actual image dimesions are read and
ratio is calculated
var box:Object=evt.target //Image container
var img:Object=box.content //image
var w:Number=img.width=(600) //width of image
(example)
var h:Number=img.height=(400) //height of
image
var whR:Number=h/w //width-height ratio to
calculate height for given width
=(2/3)
var hwR:Number=w/h //width-height ratio to
calculate width for given height(you can just use the inverse of
above)
=(1.5)
var boxW:Number=box.width=(100) //Image
container width
var boxH:Number=box.height =(200)//Image
container width
if the width of image container is greater than its height set the
width of image to the width of container and calculate the
proportionate height using width-height ration(whR) and set it to the
image, this way you fit the image to the box along its width, but your
height may or may not fit the height of your container so calculate
the overflow height and move the image to half of overflow height to
center it along height(..adopt same for height if height is greater
than width)
if(boxW>=boxH){
img.width=boxW
img.height=boxW*whR
}else{
img.height=boxH
img.width=boxH*hwR
}
in taken example container height is greater than container width...
so set image height as 200, width will be 200*hwR=200*1.5=300
while height of Image container and image fits exactly the width
doesnt there is a over flow of 200
so move the image 200/2 pixels to left to center the image
var dx:Number = (boxW-img.width)/2 = (100-300)/
2 = -100
var dy:Number=(boxH-img.height)/2 = (200-200)/
2 = 0
img.x=dx
img.y=dy
-sathesh
On Dec 11, 6:06 pm, sri space hero <[email protected]> wrote:
> Hello sathesh,
>
> I didnt get your example. can u be little more explanatory ??
>
>
>
> On Fri, Dec 11, 2009 at 2:02 PM, sathesh <[email protected]> wrote:
> > are you expectiong something like this:
>
> > <?xml version="1.0" encoding="utf-8"?>
> > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
> > layout="vertical">
> > <mx:Script>
> > <![CDATA[
>
> > private function fitToBox(evt:Event):void{
> > var box:Object=evt.target
> > var img:Object=box.content
> > var w:Number=img.width
> > var h:Number=img.height
> > var whR:Number=h/w
> > var hwR:Number=w/h
>
> > var boxW:Number=box.width
> > var boxH:Number=box.height
>
> > if(boxW>=boxH){
> > img.width=boxW
> > img.height=boxW*whR
> > }else{
> > img.height=boxH
> > img.width=boxH*hwR
> > }
> > var dx:Number=(boxW-img.width)/2
> > var dy:Number=(boxH-img.height)/2
> > img.x=dx
> > img.y=dy
> > trace(w,h,img.width,img.height,img)
> > }
> > ]]>
> > </mx:Script>
>
> > <mx:Image width="100" height="200" scaleContent="false"
> > source="assets/image.jpg" creationComplete="fitToBox(event)"/>
> > <mx:Image width="120" height="230" scaleContent="false"
> > source="assets/image.jpg" creationComplete="fitToBox(event)"/>
> > <mx:Image width="100" height="600" scaleContent="false"
> > source="assets/image.jpg" creationComplete="fitToBox(event)"/>
>
> > </mx:Application>
>
> > On Dec 10, 6:51 pm, rohit <[email protected]> wrote:
> > > Actually i have a number of boxes of different sizes.and user can
> > > upload the image of any size inthat.
>
> > > what I need that image must not be stretched in any box.No probes if
> > > image goes to cut to fit in the box.
>
> > > How can I do this.
>
> > > On Dec 10, 5:55 pm, sri space hero <[email protected]> wrote:
>
> > > > Helo,
>
> > > > How can u make it cover the whole box, though maintaining its aspect
> > ratio.
>
> > > > Image size is fixed either u must maintain ur box of that size or keep
> > the
> > > > maintain aspect ratio to false.
>
> > > > or u can create a separate image of ur like using photoshop and use it
> > :)
>
> > > > On Thu, Dec 10, 2009 at 4:42 PM, rohit <[email protected]> wrote:
> > > > > I have three boxes having size 100*200,120*230,100*700
>
> > > > > my image size is 400*400
>
> > > > > I want to fit my image into every box but without stretched.Means it
> > > > > maintain proportion(maintain aspect ration= true)
>
> > > > > but need to cover full box
>
> > > > > --
>
> > > > > You received this message because you are subscribed to the Google
> > Groups
> > > > > "Flex India Community" group.
> > > > > To post to this group, send email to [email protected].
> > > > > To unsubscribe from this group, send email to
> > > > > [email protected]<flex_india%[email protected]>
> > <flex_india%[email protected]<flex_india%[email protected]>
>
> > > > > .
> > > > > For more options, visit this group at
> > > > >http://groups.google.com/group/flex_india?hl=en.
>
> > > > --
> > > > Regards,
>
> > > > Sri Tej
> > > > Golive Gaming Solutions PVT LTD
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "Flex India Community" group.
> > To post to this group, send email to [email protected].
> > To unsubscribe from this group, send email to
> > [email protected]<flex_india%[email protected]>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/flex_india?hl=en.
>
> --
> Regards,
>
> Sri Tej
> Golive Gaming Solutions PVT LTD
--
You received this message because you are subscribed to the Google Groups "Flex
India Community" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/flex_india?hl=en.
