Flex全屏背景圖片

Question

我想將圖像加載到Flex應用程序的背景中。 但是，我想知道一些事情，並且有一些矛盾之處。

我希望它非常類似於CSS的處理方式。 請參見使用CSS的全屏背景圖像示例。

圖像后面沒有空白（背景色），並且圖像沒有拉長非常重要。 這意味着某些圖像將被剪切掉。 絕對很好。 實際上，上面鏈接頁面上的項目符號列表中的前五點正是我所追求的。

我是Flex框架的新手，但是具有很強的AS3背景。 因此，我可以通過使用掩碼，stage.width / height，stage RESIZE事件以及一點點數學的動作腳本輕松完成此操作。 但是我想知道這樣做的“彈性”方法是什么？

我不想縮小答案，但是我會創建我自己的組件，以擴展畫布，並在所有其他內容之后添加嗎？ 還是要我設置應用程序的某些屬性？ 要不然是啥？

謝謝。

Answer 1

這是一個自定義組件，它將用圖像填充任何矩形。 如果矩形的縱橫比與圖像不同，它將不會拉伸圖像，也不會顯示空白，而是會裁剪圖像的邊緣。 圖像將被縮放。 始終至少一個尺寸將100％填充矩形，但另一尺寸將被裁剪。

這基於Flex的UIComponent，組件生命周期和Image。

ClippedImage.as

package com.preston.www.view.background.components {
import flash.events.Event;
import flash.geom.Rectangle;

import mx.controls.Image;
import mx.core.UIComponent;

//--------------------------------------
//  Events
//--------------------------------------

[Event(name="complete", type="flash.events.Event")]

public class ClippedImage extends UIComponent {

    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------

    public function ClippedImage() {
        image = new Image();
        image.addEventListener(Event.COMPLETE,image_completeHandler);
        addChild(image);
    }

    //--------------------------------------------------------------------------
    //
    //  Variables
    //
    //--------------------------------------------------------------------------

    private var image:Image;

    //--------------------------------------------------------------------------
    //
    //  Properties
    //
    //--------------------------------------------------------------------------

    //----------------------------------
    //  source
    //----------------------------------

    public function get source():Object {
        return image.source;
    }

    public function set source(value:Object):void {
        image.source = value;
    }

    //--------------------------------------------------------------------------
    //
    //  Overridden methods
    //
    //--------------------------------------------------------------------------

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var imageMeasuredWidth:Number = image.measuredWidth;
        var imageMeasuredHeight:Number = image.measuredHeight;
        var imageAspectRatio:Number = imageMeasuredWidth / imageMeasuredHeight;

        var imageWidth:Number;
        var imageHeight:Number;

        // try setting image according to width first
        imageWidth = unscaledWidth;
        imageHeight = imageWidth / imageAspectRatio;

        // if a gap exists vertically, set image according to height
        if (imageHeight < unscaledHeight) {
            imageHeight = unscaledHeight;
            imageWidth = imageAspectRatio * imageHeight;
        }

        image.setLayoutBoundsSize(imageWidth, imageHeight);

        // set image x and y
        var imagex:Number = (unscaledWidth - imageWidth) / 2;
        var imagey:Number = (unscaledHeight - imageHeight) / 2;

        image.setLayoutBoundsPosition(imagex, imagey);

        scrollRect = new Rectangle(0, 0, unscaledWidth, unscaledHeight);
    }

    //--------------------------------------------------------------------------
    //
    //  Event handlers
    //
    //--------------------------------------------------------------------------

    private function image_completeHandler(event:Event):void {
        dispatchEvent(event);
    }
}
}

然后，在您的應用程序中，只需為此組件設置一個mxml標記，如下所示：

<components:ClippedImage id="background" width="100%" height="100%"
                         source="assets/images/winery.jpg"/>

Answer 2

盡管這是一個純as3解決方案，但它可能會向正確的方向發展，但它會從0,0點縮放圖像，但是從中心縮放它並不難。 這是代碼：

stage.align = "TL";
stage.scaleMode = "noScale";
// store original image size
var imgW:Number = img.width;
var imgH:Number = img.height;
// stage dimensions
var sW:Number = stage.stageWidth;
var sH:Number = stage.stageHeight;

resizer(null);
stage.addEventListener(Event.RESIZE, resizer);

private function resizer(e:Event):void
{
    // current stage dimension
    sW = stage.stageWidth;
    sH = stage.stageHeight;
    // check for proportions to make the resize based on right axis
    if ((sW / imgW) > (sH / imgH)) {
        img.width = sW;
        img.height = imgH * (img.width / imgW);
    } else {
        img.height = sH;
        img.width = imgW * (img.height / imgH);
    }
    // here you may want to deal with resize from center
    img.x = 0;
    img.y = 0;
}

Answer 3

由於某些原因，在Flex中您不能特別輕松地執行此操作。 我敢肯定，您可以使用Degrafa的CSSSkin（ http://www.degrafa.org/ ）來完成此操作。

Answer 4

可能有一百萬種方法可以給這只貓剝皮。 一種方法：在Flex應用程序中，我們在主容器后面有一個畫布，如下所示：

<mx:Canvas id="bgImg" width="1280" height="800" backgroundImage="assets/background.jpg" />
<containers:FlashContainer id="mainContainer">
<!-- HBoxs, VBoxes and loads of other components -->
</containers:FlashContainer>

如果願意，可以將值綁定到寬度和高度，然后關閉滾動條（因此，如果圖像大於窗口，則滾動條不會彈出。類似於以下內容：

<mx:Canvas id="bgImg" width="{someVariable}" height="{someOtherVariable}" backgroundImage="assets/background.jpg" horizontalScrollPolicy="off" verticalScrollPolicy="off" />

您也可以將“ styleName”屬性與樣式表一起使用，並更改其他屬性。 如：

<mx:Style source="/mainStyle.css"/>
<mx:Canvas id="bgImg" styleName="bgStyle" width="{someVariableOrCalculationOrFunctionCall}" height="{someOtherVariableOrCalculationOrFunctionCall}" backgroundImage="assets/background.jpg" horizontalScrollPolicy="off" verticalScrollPolicy="off" />

其中mainStyle.css是一個樣式表，其中包含以下內容的目標：

.bgStyle
{
    styleName1: styleValue1;
    styleName2: styleValue2;
    styleName3: styleValue3;
}

原諒我，我不知道哪種樣式可以擺在我的頭頂，但它們很容易查找。

在我們的應用程序中，窗口大小是固定的，我們的背景永遠不需要更改大小。 但是，如果這樣做，我要么

1）將畫布的寬度/高度綁定到一個簡單的計算中，或2）添加一個偵聽器，以響應調整大小事件並設置綁定的寬度和高度變量，或3）在畫布圖像上嘗試CSS，看看我能做什么

注意：要創建可綁定變量，請按照

[Bindable]
var imageWidth:int;

要么

使用<mx:Binding>標記

希望所有這些對您有所幫助，或者至少會為您指明幫助的方向！ -公斤

Answer 5

你有沒有嘗試過

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundImage="@Embed(source='something.jpg')"
    backgroundAttachment="fixed" ...

這應該在不調整大小的情況下將something.jpg圖像放置到背景中。 而且這些“背景”屬性是樣式，因此您可以將它們放在css中。