Apache flex 在Flex中调整图像大小，同时将其保持在中心位置

我正在使用

mx:Resize

效果来更改Flex中图像的宽度（让高度自行调整），但我希望图像在页面上保持垂直居中。虽然我可以计算照片的纵横比，并计算出新的y值以保持其居中，但我也必须包括

mx:Move

效果，我希望Flex有一个更简单的方法

这是一个照片库，其中图像在运行时加载并交换，因此我真的希望避免每次启动updateComplete事件时重新计算纵横比和垂直位置。看起来很乱

我试着用

verticalign=“middle”

将我的图像放在

mx:VBox

中，认为这个盒子可以为我做所有的居中调整，但这似乎只发生在应用程序第一次启动时——我需要它在效果播放期间逐渐调整位置（即使部分完成时也保持居中）

下面是一个简单的示例（不起作用）：

---

我是Flex的新手，所以如果我做了一些愚蠢的事情，我会道歉。查看Adobe示例照片库的来源并没有帮助我找到解决方案——我不认为他们使用特效，而是创建自己的例程来改变大小和位置。代码看起来很可怕

您可以尝试为Resize控件的effectEnd事件创建一个事件处理程序，该事件在VBox上调用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>

---

希望这能有所帮助。

因为老板希望明天能准备好，所以我不得不放弃让Flex替我做这项工作的想法，自己计算价值

请注意，我知道我所有的JPG都是120px宽的，但高度可能会有所不同。这使得水平定位很容易，所以我将在下面提到的只是垂直定位

第一部分

每次在图像对象上触发

complete

事件（即加载了JPG）时，我都会根据其高度设置其位置。假设中心线是从屏幕顶部向下300 px的一条线，我使用：

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

我避免了

updateComplete

事件，因为当效果移动/调整图像大小时，它似乎会触发数百次。我还避免使用

height

属性（支持

contentHeight

），因为我发现图像标签有一个奇怪的问题，我必须将其高度设置为一个值（我只想真正设置宽度），以便调整大小效果能够实际执行任何操作。我使用了

height=“999”

，让图像处理自己的纵横比

第二部分

就在我对效果调用

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)

---

恐怕没用。图像的垂直位置永远不会移动。我将阅读更多关于updateDisplayList（）方法thouhg的内容，现在您已经让我意识到了这一点！我意识到，我需要不断调整图像以保持其中心位置，而不仅仅是在效果过渡结束时。很抱歉

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)