在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> 

希望這有助於。