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

我可能会这样做：

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

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 3

你写过这一行。

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

使用此行代替上一行。

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

Flex4，在组容器内居中并调整图像大小

3 个答案: