我想将图像加载到我的 Flex 应用程序的背景中。但是，我想知道一些事情，并且有一些限制。
我希望它与使用 CSS 完成的方式非常相似。请参阅此fullscreen background images with CSS 示例。
非常重要的是图像后面没有显示空白（背景颜色），并且图像没有被拉伸。这将意味着一些图像将被切断。这绝对没问题。实际上，上面链接页面的项目符号列表中的前五点正是我所追求的。
我是 Flex 框架的新手，但有很强的 AS3 背景。所以我可以通过使用掩码、stage.width/height、stages RESIZE 事件和一点点数学的 actionscript 轻松地做到这一点。但我想知道这样做的“Flex”方式是什么？
我不想缩小答案范围，但我会创建自己的组件，扩展画布，放在所有其他内容后面吗？或者我设置应用程序的一些属性？还是什么？
谢谢。
【问题讨论】：
标签： apache-flex flash actionscript-3
你试过了吗
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="@Embed(source='something.jpg')"
backgroundAttachment="fixed" ...
这应该将图片 something.jpg 放置到背景而不调整大小。 而那些“背景”属性就是样式，所以你可以把它们放到 css 中。
【讨论】：
这是一个自定义组件，它将用图像填充任何矩形。如果矩形纵横比与图像不同，它不会拉伸图像，也不会显示空白，而是会剪切图像的边缘。图像将被缩放。始终至少有一个维度将 100% 填充矩形，但另一个维度将被剪裁。
这是基于 Flex 的 UIComponent、组件生命周期和 Image。
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"/>
【讨论】：
大概有一百万种方法可以剥这只猫的皮。一种方法：在我们的 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> 标签
我希望这一切对您有所帮助，或者至少可以为您指明帮助的方向！ -公斤
【讨论】：
由于某种原因，您在 Flex 中不能特别容易地做到这一点。不过，我敢肯定，您可以使用 Degrafa (http://www.degrafa.org/) 的 CSSSkin 来做到这一点。
【讨论】：
虽然这是一个纯 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;
}
【讨论】：