1

親コンテナー (グループに基づくカスタム コンポーネント) のサイズが変更されるたびに、flex 4 画像オブジェクトのサイズを変更して水平方向に中央揃えにする最良の方法を探しています。移動トランジションを使用して画像をビューの内外に「スライド」させるため、画像のセンタリングを達成するために horizo​​ntalCenter="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>

どんな助けでも大歓迎です - より理にかなっていれば、画像のサイズを変更する別の方法も受け入れます。

前もって感謝します

4

3 に答える 3

1

私はおそらく次のようにこれにアプローチします：

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

それがお役に立てば幸いです。

于 2010-01-21T21:19:42.867 に答える
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" />
于 2010-01-22T18:30:44.983 に答える
1

あなたはこの行を書きました。

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

前の行の代わりにこの行を使用してください。

var aspect:Number = imgA.contentWidth / imgA.contentHeight;
于 2012-08-06T09:24:23.370 に答える