Изменение размера изображения в 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 имеют ширину 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) 

Answer 2

Вы можете попробовать создать обработчик событий для события effectEnd контроля изменения размера, то, что вызывает invalidateDisplayList на VBox, что-то вроде:

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

Надеется, что это помогает.