5 Replies Latest reply on Apr 3, 2007 6:02 AM by herkulano

    Is there simple way to center a image to a canvas?

    herkulano
      i got a image inside a canvas and when i load the image i want it to center and scale in that canvas, whats the best way to do it?

      mycode :(
      <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;
      }
      }
        • 1. Re: Is there simple way to center a image to a canvas?
          herkulano Level 1
          got it to work :) some bad math in that previous code :(

          private function changeSMCDadosImg(event:Event):void
          {
          var pW_SMCDadosImg:Number;
          var pH_SMCDadosImg:Number;
          var tempSize:Number;

          pW_SMCDadosImg = event.target.contentWidth;
          pH_SMCDadosImg = event.target.contentHeight;

          var scaleF:Number;

          trace("W.ini = "+ pW_SMCDadosImg);
          trace("H.ini = "+ pH_SMCDadosImg);

          if (pW_SMCDadosImg > pH_SMCDadosImg)
          {
          scaleF = 190/pW_SMCDadosImg;
          pH_SMCDadosImg = scaleF * pH_SMCDadosImg;

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

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

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

          trace("scaleW = " + scaleF);
          }
          else if (pW_SMCDadosImg == pH_SMCDadosImg)
          {
          SMCDadosImg.height = 190;
          SMCDadosImg.width = 190;
          }

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

          pW_SMCDadosImg = event.target.width;
          pH_SMCDadosImg = event.target.height;

          trace("W.2 = "+ pW_SMCDadosImg);
          trace("H.2 = "+ pH_SMCDadosImg);

          }
          • 2. Re: Is there simple way to center a image to a canvas?
            Craig Grummitt Level 3
            i think something like this will do what you're attempting as well:

            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
            <mx:Canvas x="0" y="0" width="100%" height="100%">
            <mx:Image verticalCenter="0" horizontalCenter="0" scaleContent="true" width="190" height="190" source="........JPG"/>
            </mx:Canvas>
            </mx:Application>
            • 3. Re: Is there simple way to center a image to a canvas?
              herkulano Level 1
              hi Craig,

              i tried that but it didn't work :(

              the loaded source is a component inside the image component, so you have to center the child component and not the image component itself.

              i didn't tried to add horizontalAlign=center and verticalAlign=middle, maybe that would do it also hence the horizontal and vertical ailign is refering to the child component and not the image component itself.

              anyway thx for the help m8
              • 4. Re: Is there simple way to center a image to a canvas?
                herkulano Level 1
                Just to let you that also the vertical and Horizontal Align wont work because i want my image to scale to the boundaries and then align to the center of the canvas, i think the only way is really throught AS
                • 5. Re: Is there simple way to center a image to a canvas?
                  herkulano Level 1
                  seems the really simple way to do it is:

                  <mx:Canvas x="10" y="10" width="190" height="190" borderStyle="none" backgroundColor="#d0d0d0" >
                  <mx:Image id="SMCDadosImg"
                  width="100%" height="100%"
                  horizontalAlign="center" verticalAlign="middle" />
                  </mx:Canvas>