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