带flex的全屏背景图像

大概有一百万种方法可以剥这只猫的皮。一种方法:在我们的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> 标签

我希望所有这些都能帮助你,或者至少为你指明帮助的方向! -kg

这是一个自定义组件,可以用图像填充任何矩形。如果矩形宽高比与图像不同,则不会拉伸图像,也不会显示空白,而是剪切图像的边缘。图像将被缩放。始终至少有一个维度将100%填充矩形,但另一个维度将被剪裁。

这是基于flex的uicomponent、组件生命周期和图像。

剪贴画

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

虽然这是一个纯的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;
}

由于某些原因,在flex中您不能特别容易地做到这一点。你可以用德格拉法的CSSSKIN( http://www.degrafa.org/ )不过,我敢肯定。

你试过了吗?

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

这应该将image something.jpg放到背景中而不调整大小。 这些“背景”属性是样式,所以您可以将它们放到CSS中。