Изменение размера изображения в Flex, сохраняя его центральным - PullRequest
Новая
       15

Изменение размера изображения в Flex, сохраняя его центральным

0 голосов
/ 04 марта 2010

Я использую эффект 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 не помог мне найти решение - я не думаю, что они используют эффекты, но создают свою собственную программу для изменения размера и положения. Код выглядит ужасно!

Ответы [ 2 ]

0 голосов
/ 05 марта 2010

Поскольку начальник хотел, чтобы это было готово к завтрашнему дню, мне пришлось отказаться от идеи, что Flex выполняет эту работу за меня, и рассчитать значения самостоятельно.

Обратите внимание, что я знал, что все мои JPG были шириной 120px, но высота могла варьироваться. Это облегчает горизонтальное позиционирование, поэтому его вертикальное позиционирование будет упоминаться ниже ...

ЧАСТЬ ПЕРВАЯ

Каждый раз, когда событие 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)
0 голосов
/ 04 марта 2010

Вы можете попытаться создать обработчик события для события effectEnd элемента управления Resize, который вызывает 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>

Надеюсь, это поможет.

...