我想将图片加载到我的Flex应用程序的背景中。但是,我想知道一些事情,并且有一些限制。
我希望它与CSS完成的方式非常相似。请参阅fullscreen background images with CSS的此示例。
非常重要的是,图像后面没有显示空白(背景色),并且图像未被拉伸。这意味着一些图像会被切断。这绝对是好的。实际上,上面链接页面上项目符号列表中的前五个点正是我所追求的。
我是Flex框架的新手,但具有强大的AS3背景。所以我可以使用mask,stage.width / height,阶段RESIZE事件和一些Math来轻松地使用actionscript。但我想知道这样做的“Flex”方式是什么?
我不想缩小答案,但是我会创建自己的组件,扩展画布,我把所有其他内容放在后面吗?或者我设置应用程序的一些属性?或者是什么?
感谢。
答案 0 :(得分:2)
这是一个自定义组件,可以用图像填充任何矩形。如果矩形纵横比与图像不同,它将不会拉伸图像,也不会显示白色空间,而是会剪切图像的边缘。图像将缩放。始终至少有一个维度将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"/>
答案 1 :(得分:1)
虽然这是一个纯粹的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;
}
答案 2 :(得分:1)
出于某种原因,您无法在Flex中轻松完成此操作。你可以使用Degrafa(http://www.degrafa.org/)的CSSSkin来做,但我确定。
答案 3 :(得分:1)
可能有一百万种方法可以给这只猫上皮。一种方法:在我们的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)添加一个响应调整大小事件的侦听器并设置绑定宽度&amp;高度变量或 3)在画布图像上试验CSS并看看我能做什么
注意:要创建一个可绑定的变量,你可以按照
的方式写一些内容[Bindable]
var imageWidth:int;
或
使用<mx:Binding>
标记
我希望这一切都有所帮助,或者至少指出你的帮助方向! -kg
答案 4 :(得分:0)
你试过吗
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="@Embed(source='something.jpg')"
backgroundAttachment="fixed" ...
这应该将图像something.jpg放到背景中而不需要调整大小。 那些“背景”属性是样式,所以你可以把它们放到css。