在Flex中调整图片大小,同时保持中心位置
我使用mx:Resize
效果改变了Flex中图片的宽度(让高度看起来像自己),但我希望图片在页面上保持垂直居中。虽然我可以计算照片的宽高比,并计算出新的y值以保持居中,但我也必须包含mx:Move
效果,并且我很乐意Flex更简单一些。在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示例照片库的来源并没有帮助我实现一个解决方案 - 我不认为他们使用效果,但创建自己的例程来改变大小和位置。代码看起来很可怕!
既然老板想要为明天做好准备,我不得不放弃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)
你可以尝试创建的调整大小控制的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>
希望这有助于。
恐怕没有工作。图像的垂直位置不会移动。我会读更多关于updateDisplayList()方法,现在你让我意识到了! – 2010-03-04 17:58:20
我意识到我需要不断调整图像以保持中心位置,而不仅仅是在效果转换结束时。抱歉。 – 2010-03-05 13:46:17