blocks|key|2482882|text|虽然这是一个纯粹的as3解决方案，它可能会让你在正确的方向上，这是从它的点0,0缩放图像，但不会很难改变它从中心缩放。代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2482883|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;
}|code-block|syntax|javascript|2482884|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Although this is a pure as3 solution it may get you in the right direction, this scales the image from it's point 0,0 , but wouldn't be hard to change it to scale from the center. Here is the code:

<pre><code>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) &gt; (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;
}
</code></pre>

blocks|key|802744|text|由于某些原因，您不能在Flex中特别容易地做到这一点。不过，我相信你可以使用Degrafa+(http://www.degrafa.org/)的CSSSkin来做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|802745|entityMap|0|LINK|mutability|MUTABLE|url|http://www.degrafa.org/^0|1B|N|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

For some reason you can't do this particularly easily in Flex. You could use the CSSSkin from Degrafa (<a href="http://www.degrafa.org/" rel="nofollow noreferrer">http://www.degrafa.org/</a>) to do it though, I'm sure.

blocks|key|2482993|text|可能有一百万种方法来剥这只猫的皮。一种方法是:在我们的flex应用程序中，我们在主容器后面有一个画布，如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2482994|<mx:Canvas+id="bgImg"+width="1280"+height="800"+backgroundImage="assets/background.jpg"+/>
<containers:FlashContainer+id="mainContainer">

</containers:FlashContainer>|code-block|syntax|javascript|2482995|如果你喜欢，你可以将值绑定到宽度和高度，并关闭滚动条(这样，如果图像比窗口大，滚动条就不会弹出)。大致是这样的：|2482996|<mx:Canvas+id="bgImg"+width="{someVariable}"+height="{someOtherVariable}"+backgroundImage="assets/background.jpg"+horizontalScrollPolicy="off"+verticalScrollPolicy="off"+/>|2482997|您还可以将"styleName“属性与样式表结合使用，并更改其他属性。如下所示：|2482998|<mx:Style+source="/mainStyle.css"/>
<mx:Canvas+id="bgImg"+styleName="bgStyle"+width="{someVariableOrCalculationOrFunctionCall}"+height="{someOtherVariableOrCalculationOrFunctionCall}"+backgroundImage="assets/background.jpg"+horizontalScrollPolicy="off"+verticalScrollPolicy="off"+/>|2482999|其中mainStyle.css是一个样式表，其目标如下：|2483000|.bgStyle
{
++++styleName1:+styleValue1;
++++styleName2:+styleValue2;
++++styleName3:+styleValue3;
}|2483001|原谅我，我不知道什么风格可以从我的头顶开始，但它们很容易查找。|2483002|在我们的应用程序中，窗口大小是固定的，并且我们的背景永远不需要改变大小。但如果真的发生了我要么|2483003|1)将画布的宽度/高度绑定到一个简单的计算中，或者2)添加一个监听器来响应调整大小事件并设置绑定的宽度和高度变量，或者3)在画布图像上试验CSS，看看我能做些什么|2483004|注意:要创建一个可绑定的变量，需要编写如下代码|2483005|[Bindable]
var+imageWidth:int;|2483006|或|2483007|使用<mx:Binding>标记|offset|length|style|CODE|2483008|我希望所有这些都对你有所帮助，或者至少给你指明了帮助的方向！-kg|2483009|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|2|C|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1G|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|1Q|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1S|8|@$16|1T|17|1U|18|19]]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|1V|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|1D|$]]

There are probably one million ways to skin this cat. One approach: in our flex application, we have a canvas behind our primary container as in

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

If you like, you can bind values to the width and height and turn off the scroll bars (so they don't pop up if the image is bigger than the window. Something along the lines of:

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

You could also play around with the "styleName" property, in conjunction with a Style Sheet and change other properties. As in:

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

Where mainStyle.css is a Style Sheet with a target along the lines of:

<pre><code>.bgStyle
{
 styleName1: styleValue1;
 styleName2: styleValue2;
 styleName3: styleValue3;
}
</code></pre>

Forgive me, I don't know what styles can be set off the top of my head but they're easy to look up. 

In our application, the window size is fixed and our background never needs to change size. But if it did, I would either 

1) bind the canvas width/height to a simple calculation or
2) add a listener that responds to resize events and sets the bound width &amp; height variables or
3) experiment with CSS on the canvas image and see what I can do

Note: to create a bindable variable you write something along the lines of

<pre><code>[Bindable]
var imageWidth:int;
</code></pre>

or

Use the <code>&lt;mx:Binding&gt;</code> tag

I hope all this helps or, at least, points you in the direction of help!
-kg

blocks|key|2483053|text|这是一个自定义组件，可以用图像填充任何矩形。如果矩形纵横比与图像不同，它不会拉伸图像，也不会显示空白，而是会裁剪图像的边缘。图像将被缩放。始终至少有一个维度将100%25填充矩形，但另一个维度将被裁剪。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2483054|这是基于Flex的UIComponent、组件生命周期和图像。|2483055|ClippedImage.as|2483056|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);
++++}
}
}|code-block|syntax|javascript|2483057|然后，您只需在您的应用程序中为该组件设置一个mxml标记，如下所示：|2483058|<components:ClippedImage+id="background"+width="100%25"+height="100%25"
+++++++++++++++++++++++++source="assets/images/winery.jpg"/>|2483059|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Here's a custom component that will fill any rectangle with an image. It will not stretch the image if the rectangle aspect ratio is not the same as the image, nor will it show white space, but rather it will clip the edges of the image. The image will be scaled. Always at least one dimension will be 100% filling the rectangle, but the other dimension will be clipped.

This is based on Flex's UIComponent, component life-cycle, and Image.

<h2>ClippedImage.as</h2>

<pre><code>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 &lt; 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);
 }
}
}
</code></pre>

Then, in your app you just set an mxml tag for this component as follows:

<pre><code>&lt;components:ClippedImage id="background" width="100%" height="100%"
 source="assets/images/winery.jpg"/&gt;
</code></pre>

blocks|key|802777|text|你试过了吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|802778|<mx:Application+xmlns:mx="http://www.adobe.com/2006/mxml"
++++backgroundImage="@Embed(source='something.jpg')"
++++backgroundAttachment="fixed"+...|code-block|syntax|javascript|802779|这应该会在不调整大小的情况下将图像something.jpg放到背景中。这些“背景”属性是样式，所以你可以把它们放到css中。|802780|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Have you tried

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

This should place image something.jpg to background without resizing.
And those "background" properties are styles, so you can put them to css.

I want to load an image into the background of my Flex app. However, I am wondering about a few things, and have a few contraints.

I want it to be much like the way it's done with CSS. See this example of <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow noreferrer">fullscreen background images with CSS</a>.

It is very important that there is no white-space (background colour) showing behind the image, and that the image is not stretched. This would mean some of the image would be cut off. This is absolutly fine. Actually, the first five points in the bulleted list on the linked page above are all exactly what I am after.

I am relitivly new to the Flex framework, but have a strong AS3 background. So I can do this easily with actionscript using a mask, stage.width/height, the stages RESIZE event, and a little bit of Math. But I am wondering what would be the "Flex" way of doing this?

I don't want to narrow the answers, but would I create my own component, that extends canvas, that I put behind all my other content? Or to I set some property of the application? Or what?

Thanks.

Fullscreen background image with Flex

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想把一张图片加载到我的Flex应用程序的背景中。然而，我想知道一些事情，并有一些限制。我想让它更像用CSS做的那样。请参阅此示例。非常重要的一点是，图像后面没有显示空白(背景颜色)，并且图像没有拉伸。这将意味着一些图像将被切断。这绝对是好的。实际上，上面链接页面上项目符号列表中的前五点都是我想要的。我是Flex框架的...

问使用Flex的全屏背景图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Flex的全屏背景图像EN