Thank You sathesh :)
On Fri, Dec 11, 2009 at 8:34 PM, sathesh <[email protected]> wrote:
> 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]>
> >
> > > <flex_india%[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]>
> <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.
