0

mx:ResizeFlex で画像の幅を変更するエフェクトを使用していますが (高さはそのままにしておきます)、画像をページの垂直方向の中央に配置したままにします。写真の縦横比を計算し、新しい y 値を計算して中央に配置することはできますが、mx:Move効果も含める必要があります。Flex にはもっと簡単な方法があることを願っています。

これは、実行時に画像が読み込まれて交換されるフォト ギャラリー用です。そのため、updateComplete イベントが発生するたびに縦横比と垂直位置を再計算することは避けたいと考えています。それはとても面倒です。

mx:VBoxボックスがすべてのセンタリングを行うと考えて、画像をwithの中に入れてみ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 サンプル フォト ギャラリーのソースを見ても、解決策を理解するのに役立ちませんでした。効果を使用しているとは思いませんが、サイズと位置を変更する独自のルーチンを作成しています。コードは恐ろしく見えます！

4

2 に答える 2

0

上司はこれを明日に備えてほしいと言っていたので、Flex が私のために仕事をしてくれるという考えをあきらめ、自分で値を計算する必要がありました。

すべての JPG の幅が 120 ピクセルであることはわかっていましたが、高さは異なる可能性があることに注意してください。これにより、水平方向の配置が簡単になったので、以下で参照するのは垂直方向の配置のみです...

パート1

complete画像オブジェクトでイベントが発生する (つまり、JPG が読み込まれる)たびに、その高さに基づいて位置を設定しました。中心線が画面の上部から 300 ピクセル下の線であると仮定すると、次のように使用しました。

oImage.y = 300 - (oImage.contentHeight / 2)

updateComplete効果が画像を移動/サイズ変更したときに何百回も発生するように見えたので、イベントを避けました。heightサイズ変更効果が実際に何かを行うために、その高さを値に設定する必要があるという奇妙な問題がイメージタグで見つかったため、プロパティも避けcontentHeightました（実際には幅を設定したかっただけです）。 . 私は使用height="999"して、画像が独自の縦横比を処理できるようにしました。

パート2

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 に答える
0

VBox で invalidateDisplayList を呼び出す、Resize コントロールの effectEnd イベントのイベント ハンドラーを作成してみてください。

<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 に答える