Flex4, центрирование и изменение размера изображения внутри группового контейнера

Question

Я ищу лучший способ получить объект изображения flex 4 для изменения размера и горизонтального центра, когда его родительский контейнер (настраиваемый компонент на основе группы) изменяет размер. Я не могу установить horizontalCenter = "0", чтобы выполнить центрирование изображения, потому что я использую переход перехода, чтобы «скользить» изображение в или из вида.

Я внешняя установка источника изображения в компоненте. Вот упрощенный пример моего кода компонента, который касается только изменения размера изображения.

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/halo" > 

    <fx:Script> 
     <![CDATA[     
      public function assignImage(imgUrl:String):void 
      { 
       imgA.source = imgUrl; 
       imgA.visible = true; 
      } 

      override protected function updateDisplayList(w:Number,h:Number):void 
      { 
       imgA.width = w; 
       imgA.height = h; 
       super.updateDisplayList(w,h);   
      }   
     ]]> 

    </fx:Script>   

    <s:Image id="imgA" visible="false" top="0" maintainAspectRatio="true" />   
</s:Group> 

Любая помощь очень ценится - Я также открыты для альтернативного способа изменения размера изображения, если это имеет смысл.

Заранее спасибо

Answer 1

rhtx был на правильном пути, но нет простого способа централизовать управление изображением своим решением. После некоторого тестирования я решил решить эту проблему. Надеюсь, это сэкономит вам все время.

Вот код для настраиваемого компонента на основе группы, содержащей элемент управления изображением.

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     creationComplete="group1_creationCompleteHandler(event)" 
     > 

    <fx:Script> 
     <![CDATA[      
      public function assignImage(imgUrl:String):void 
      { 
       imgA.source = imgUrl; 
       imgA.visible = true; 
      } 

      protected function group1_creationCompleteHandler(event:FlexEvent):void 
      { 
       this.addEventListener(ResizeEvent.RESIZE, SinglePageViewer_resizeHandler); 
      }  

      protected function group1_resizeHandler(event:ResizeEvent):void 
      {       
       updateImageDimensionsAndPosition(this.width, this.height); 
      }   

      private function updateImageDimensionsAndPosition(w:Number, h:Number):void 
      { 
       var aspect:Number = imgA.width/imgA.height;  
       var containerAspect:Number = w/h; 

       if (isNaN(aspect) == false) 
       {      
        if (aspect <= containerAspect) 
        { 
         imgA.height = h; 
         imgA.width = aspect * imgA.height;     
        } 
        else 
        { 
         imgA.width = w; 
         imgA.height = imgA.width/aspect; 
        } 

        // If you want to horizontally center the image, uncomment the following 
        /* 
        var oldX:Number = imgA.x;       
        var newX:Number = w/2 - imgA.width/2; 
        if ((oldX != newX) && (newX > 0)) 
        { 
         imgA.x = newX; 
        } 
        */     
       }    
      } 
     ]]> 
    </fx:Script>   

    <s:Image id="imgA" visible="false" top="0" maintainAspectRatio="true" />   
</s:Group> 

Единственная другая часть находится в главном приложении необходимо указать MaxWidth и MaxHeight для пользовательского компонента.

<components.myCustomImageGroup id="cig" maxWidth="500" maxHeight="400" /> 

Answer 2

я бы, наверное, подойти к этому, как так:

<s:Group ... creationComplete="parentingGroupCreationCompleteListener()"> 
<fx:Script> 
<![CDATA[ 
    private function parentingGroupCreationCompleteListener():void 
    { 
     this.addEventListener(ResizeEvent.RESIZE, parentingGroupResizeListener); 
    } 

    private function parentingGroupResizeListener(e:ResizeEvent):void 
    { 
     updateImageDimensionsAndPosition(this.width, this.height); 
    } 

    private function updateImageDimensionsAndPosition(w:Number, h:Number):void 
    { 
     imgA.width = w; 
     imgA.height = h; 

     // If you want to center the image, uncomment the following 
     //imgA.x = s.width/2 - imgA.width/2; 
     //imgA.y = s.height/2 - imgA.height/2; 

    } 

    override public function updateDisplayList(w:Number, h:Number):void 
    { 
     updateImageDimensionsAndPosition(w,h); 
     super.updateDisplayList(w,h); 
    } 

]]> 
</fx:Script> 

</s:Group> 

надеюсь, что это полезно.

Answer 3

Вы написали эту строку.

var aspect:Number = imgA.width/imgA.height; 

используйте эту линию вместо предыдущей строки.

var aspect:Number = imgA.contentWidth/imgA.contentHeight;