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

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

1 голос
/ 21 января 2010

Я ищу лучший способ получить объект изображения flex 4 для изменения размера и горизонтального центрирования всякий раз, когда изменяется размер его родительского контейнера (пользовательский компонент на основе группы). Я не могу установить горизонтальный центр = "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>

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

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

Ответы [ 3 ]

1 голос
/ 22 января 2010

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" />
1 голос
/ 06 августа 2012

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

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

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

var aspect:Number = imgA.contentWidth / imgA.contentHeight;
1 голос
/ 22 января 2010

Я, наверное, подхожу к этому так: 

<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>

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

...