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

你可以尝试为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>

希望这有帮助。

Answer 2

由于老板希望明天为此做好准备，我不得不放弃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)

调整Flex中的图像大小，同时保持其中心

2 个答案: