Re: [flexcoders] Re: is there a simple way to center a loaded image?

[Muzak]

Not sure, but it seems like you're not realizing that the Image component 
itself is a container.

<Canvas><Image>loaded_jpg</Image></Canvas>

So you don't need to *tell the Image component to center inside the canvas*, 
but rather you need to *center the loaded image inside 
the Image component* and set the Image component to 100% width and height (so 
it completely fills the canvas).

The following should do the trick.

 <mx:Canvas width="250" height="250" borderStyle="solid">
  <mx:Image
   width="100%"
   height="100%"
   source="path_to_image.jpg"
   verticalAlign="middle"
   horizontalAlign="center"
   scaleContent="true"
   maintainAspectRatio="true"
   />
 </mx:Canvas>

regards,
Muzak

----- Original Message ----- 
From: "herklano" <[EMAIL PROTECTED]>
To: <flexcoders@yahoogroups.com>
Sent: Monday, April 02, 2007 11:07 PM
Subject: [flexcoders] Re: is there a simple way to center a loaded image?


the image is dynamic loaded through a database.

i want to scale proportionally the image to the canvas boundaries and
then center it.

i allready got it working with this code, but thx for the help anyway :)

<mx:Canvas x="10" y="10" width="190" borderStyle="none"
backgroundColor="#d0d0d0" height="190">
<mx:Image id="SMCDadosImg" complete="changeDadosImg(event);" />
</mx:Canvas>

private function changeDadosImg(event:Event):void
            {
            var pW_DadosImg:Number;
           var pH_DadosImg:Number;

           pW_DadosImg = event.target.contentWidth;
           pH_DadosImg = event.target.contentHeight;

           var scaleF:Number;

       trace("W.ini = "+ pW_DadosImg);
       trace("H.ini = "+ pH_DadosImg);

       if (pW_DadosImg > pH_DadosImg)
       {
       scaleF = 190/pW_DadosImg;
       pH_DadosImg = scaleF * pH_DadosImg;

       event.target.width = 190;
       event.target.height = pH_DadosImg;

       trace("scaleH = " + scaleF);
       }
       else if (pW_DadosImg < pH_DadosImg)
       {
       scaleF = 190/pH_DadosImg;
       pW_DadosImg = scaleF * pW_DadosImg;

       event.target.height = 190;
       event.target.width = pW_DadosImg;

       trace("scaleW = " + scaleF);
       }
       else if (pW_DadosImg == pH_DadosImg)
       {
       event.target.height = 190;
       event.target.width = 190;
       }

       event.target.y = (190/2) - (event.target.height/2);
       event.target.x = (190/2) - (event.target.width/2);

       pW_DadosImg = event.target.width;
           pH_DadosImg = event.target.height;

       trace("W.2 = "+ pW_DadosImg);
       trace("H.2 = "+ pH_DadosImg);

            }





--- In flexcoders@yahoogroups.com, "Alex Harui" <[EMAIL PROTECTED]> wrote:
>
> OK, I'm now confused.  If you want an image to fill a canvas then you
> don't really need to center it (unless there's going to be distortion
> from aspect ratio changing).  And, if you fill the Canvas, I'd think
> you'd just use the backgroundImage instead.
>
> Can you provide more details on the scenario?
> -Alex
>
> ________________________________
>
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
> Behalf Of herklano
> Sent: Monday, April 02, 2007 7:51 AM
> To: flexcoders@yahoogroups.com
> Subject: [flexcoders] Re: is there a simple way to center a loaded
> image?
>
>
>
> hi,
>
> i tried that aprouch but the problem is that i want to scale the image
> to the canvas boundaries, so i really think the only way to do it is
> through AS.
>
> --- In flexcoders@yahoogroups.com <mailto:flexcoders%40yahoogroups.com>
> , "B. Korsmit" <bmod@> wrote:
> >
> > Hi Herklano,
> >
> > You probably want to use the horizontalAlign and verticalAlign
> styles to
> > do this?
> >
> > <mx:Image
> > id="SMCDadosImg"
> > horizontalCenter="0"
> > verticalCenter="0"
> > horizontalAlign="center"
> > verticalAlign="middle"
> > />
> >
> > That's what I often use...
> >
> >
> >
> > herklano wrote:
> > >
> > > hi,
> > >
> > > i'm kinda noob at coding in general, but i'm trying to work my way
> to
> > > get a image that is loaded in a Canvas to center to it after it has
> > > been loaded to it.
> > >
> > > i'm trying this but it doesn't work:
> > >
> > > <mx:Canvas
> > > x="10" y="10" width="190" borderStyle="none"
> > > backgroundColor="#d0d0d0" height="190">
> > > <mx:Image id="SMCDadosImg"
> > > complete="changeSMCDadosImg(event);" horizontalCenter="0"
> > > verticalCenter="0"/>
> > > </mx:Canvas>
> > >
> > > private function changeSMCDadosImg(event:Event):void
> > > {
> > > var pW_SMCDadosImg:Number;
> > > var pH_SMCDadosImg:Number;
> > >
> > > pW_SMCDadosImg = event.target.width;
> > > pH_SMCDadosImg = event.target.height;
> > >
> > > trace("W = "+ pW_SMCDadosImg);
> > > trace("H = "+ pH_SMCDadosImg);
> > >
> > > if (pW_SMCDadosImg > pH_SMCDadosImg)
> > > {
> > > SMCDadosImg.height = 190;
> > > SMCDadosImg.width = pW_SMCDadosImg/(190*pH_SMCDadosImg);
> > > SMCDadosImg.x = 190/2 - SMCDadosImg.width/2;
> > > }
> > > else if (pW_SMCDadosImg < pH_SMCDadosImg)
> > > {
> > > SMCDadosImg.width = 190;
> > > SMCDadosImg.height = pH_SMCDadosImg/(190*pW_SMCDadosImg);
> > > SMCDadosImg.y = 190/2 - SMCDadosImg.height/2;
> > > }
> > > else if (pW_SMCDadosImg == pH_SMCDadosImg)
> > > {
> > > SMCDadosImg.height = 190;
> > > SMCDadosImg.width = 190;
> > > }
> > > }
> > >
> > >
> >
>