使用Flex的全屏背景图像
我想把一张图片加载到我的Flex应用程序的背景中。然而，我想知道一些事情，并有一些限制。
我想让它更像用CSS做的那样。请参阅此fullscreen background images with CSS示例。
非常重要的一点是，图像后面没有显示空白(背景颜色)，并且图像没有拉伸。这将意味着一些图像将被切断。这绝对是好的。实际上，上面链接页面上项目符号列表中的前五点都是我想要的。
我是Flex框架的新手，但有很强的AS3背景。因此，我可以使用actionscript，使用掩码、stage.width/height、stages调整大小事件和一些Math代码轻松完成此操作。但是我想知道做这个的"Flex“方式是什么？
我不想缩小答案的范围，但我会创建自己的组件，扩展canvas，放在所有其他内容的后面吗？还是要我设置应用程序的某些属性？不然呢？
谢谢。
回答 5
Stack Overflow用户
发布于 2010-02-05 12:35:16
可能有一百万种方法来剥这只猫的皮。一种方法是:在我们的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
Stack Overflow用户
发布于 2010-07-15 14:22:54
这是一个自定义组件，可以用图像填充任何矩形。如果矩形纵横比与图像不同，它不会拉伸图像，也不会显示空白，而是会裁剪图像的边缘。图像将被缩放。始终至少有一个维度将100%填充矩形，但另一个维度将被裁剪。
这是基于Flex的UIComponent、组件生命周期和图像。
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"/>Stack Overflow用户
发布于 2010-02-04 18:52:04
虽然这是一个纯粹的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;
}https://stackoverflow.com/questions/2198537
复制相似问题
腾讯云开发者
