在Flex中调整图片大小，同时保持中心位置

Question

我使用mx:Resize效果改变了Flex中图片的宽度（让高度看起来像自己），但我希望图片在页面上保持垂直居中。虽然我可以计算照片的宽高比，并计算出新的y值以保持居中，但我也必须包含mx:Move效果，并且我很乐意Flex更简单一些。

这是一个照片库，在运行时加载图像并进行交换，所以我真的希望避免每次updateComplete事件触发时重新计算宽高比和垂直位置。看起来很混乱。

我试图把我的图片放在mx:VBox与verticalAlign="middle"之间，认为盒子会为我做所有的中心，但这似乎只发生在应用第一次启动时 - 我需要它在这段时间内逐渐调整位置效果起作用（即使在中途通过时也能保持中心）。

这里是一个精简的例子（不工作）：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="600"> 

<mx:Resize id="fxResize" target="{imgPhotoA}" widthTo="350" duration="500" /> 

<mx:Button x="10" y="10" label="Resize" click="fxResize.play()" /> 

<mx:VBox id="boxPhotoA" x="100" y="20" height="500" width="350" verticalAlign="middle" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off"> 
    <mx:Image id="imgPhotoA" width="60" maintainAspectRatio="true" source="http://sstatic.net/so/img/logo.png"/> 
</mx:VBox> 

</mx:Application> 

我是初来乍到的Flex，因此，如果道歉，我做一些愚蠢的。看看Adobe示例照片库的来源并没有帮助我实现一个解决方案 - 我不认为他们使用效果，但创建自己的例程来改变大小和位置。代码看起来很可怕！

Answer 1

既然老板想要为明天做好准备，我不得不放弃Flex为我完成工作的想法，并自己计算出这些值。

请注意，我知道我的所有JPG都是120px宽，但高度可能会有所不同。这使水平定位容易，所以它的唯一的垂直位置，我会请参考下...

第一部分

每次图像对象上complete触发的事件（即JPG被装进去）我根据它的身高来确定自己的位置。假设中心线是一条线300像素从屏幕的顶部向下，我使用：

oImage.y = 300 - (oImage.contentHeight/2) 

予避免updateComplete事件，因为它似乎当效果移动/调整大小的图像以断火几百倍。我还避免了height属性（赞成contentHeight），因为我发现图像标签有一个奇怪的问题，因此我不得不将其高度设置为一个值（我只是想设置宽度），以便实际调整大小效果做任何事情。我使用了height="999"并让图像照顾自己的宽高比。

PART TWO

就在我打电话给我的影响play()方法，我不得不设置yTo值每次移动的效果，保证了图像将移动到正确的垂直位置，考虑到它在同一时间调整大小（例如，如果图像缩小，则需要稍微向下移动）。

对于每个图像，我需要计算宽高比，然后我可以计算调整大小后图像的新高度。

private function calculate_yto_value(oImage:Image, iWidthAfterTheEffect:int):int { 
    var iAspectRatio:Number = oImage.contentHeight/oImage.width 
    var iHeightAfterTheEffect:Number = iAspectRatio * iWidthAfterTheEffect 
    return 300 - (iHeightAfterTheEffect/2) 
} 

fxMovePhoto.yTo = calculate_yto_value(imgPhotoA, 60) 

Answer 2

你可以尝试创建的调整大小控制的effectEnd事件，一些在垂直框调用invalidateDisplayList，类似的事件处理程序：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="600"> 

<mx:Script> 
    <![CDATA[ 
    private function resizeFinishedHandler(Event:Event) : void { 
     boxPhotoA.invalidateDisplayList(); 
    } 
    ]]> 
</mx:Script> 

<mx:Resize id="fxResize" target="{imgPhotoA}" widthTo="350" duration="500" 
    effectEnd="resizeFinishedHandler(event)" /> 

<mx:Button x="10" y="10" label="Resize" click="fxResize.play()" /> 

<mx:VBox id="boxPhotoA" x="100" y="20" height="500" width="350" verticalAlign="middle" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off"> 
    <mx:Image id="imgPhotoA" width="60" maintainAspectRatio="true" source="http://sstatic.net/so/img/logo.png"/> 
</mx:VBox> 

</mx:Application> 

希望这有助于。