0

我正在使用mx:Resize效果来更改 Flex 中图像的宽度（让高度自行处理），但我希望图像保持垂直居中在页面上。虽然我可以计算照片的纵横比，并计算出新的 y 值以使其保持居中，但我也必须包含一个mx:Move效果，我希望 Flex 有一个更简单的方法。

这是一个照片库，其中图像在运行时加载并交换，所以我真的很想避免每次触发 updateComplete 事件时重新计算纵横比和垂直位置。好像太乱了

我尝试将我的图像放在一个mx:VBoxwithverticalAlign="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 的新手，如果我做了一些愚蠢的事情，请道歉。查看 Adob​​e 示例照片库的来源并没有帮助我实现解决方案 - 我不认为他们使用效果，而是创建自己的例程来更改大小和位置。代码看起来很可怕！

4

2 回答 2

0

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

希望这可以帮助。

于 2010-03-04T16:33:02.663 回答
0

既然老板想让这个为明天做好准备，我不得不放弃让 Flex 为我工作的想法，自己计算价值。

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

第一部分

每次complete在图像对象上触发事件（即，将 JPG 加载到其中）时，我都会根据其高度设置其位置。假设中心线是从屏幕顶部向下 300 像素的线，我使用：

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)
于 2010-03-05T16:53:38.990 回答