0

对于我正在制作的 flex 项目，我正在尝试将我的网站更改的背景更改为我单击的图像。我的主页中的背景设置如下：

<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="@Embed('assets/background.png')" borderAlpha="0">

        <s:layout>
            <s:VerticalLayout horizontalAlign="center"/>
        </s:layout>


    <mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>

    <s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>

    <mx:ViewStack id="content">

        <mx:HBox id="home"
                 label="Home">
            <component:home/>
        </mx:HBox>

        <mx:HBox id="bio"
                 label="Bio">
            <component:bio/>
        </mx:HBox>

        <mx:HBox id="portfolio"
                 label="Portfolio">
            <component:portfolio/>
        </mx:HBox>

        <mx:HBox id="contact"
                 label="Contact">
            <component:contact/>
        </mx:HBox>

    </mx:ViewStack>     

    </s:BorderContainer>

现在从我的组件内部，我正在尝试设置您单击的图像的背景。

<fx:Script>
    <![CDATA[               
        import mx.core.Application;


    public function changeBackground(event:MouseEvent):void
    {
        Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
    }
    ]]>

</fx:Script>

当您单击图像时，我会调用此函数。

<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>

但它不起作用。所以我想知道这应该怎么做？

谢谢你，托马斯

4

1 回答 1

1

您可以使用 BitmapFill 并首先声明所有背景。此外，请确保您的 changeBackground 函数在您的主应用程序中是公开的，因为它将从组件中调用。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:component="component.*">

    <fx:Script>
        <![CDATA[

            public function changeBackground(bitmapFillObj:BitmapFill):void
            {
                backgroundContainer.backgroundFill = bitmapFillObj;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:BitmapFill id="_bg1" source="@Embed('assets/bg1.jpg')"/>
        <s:BitmapFill id="_bg2" source="@Embed('assets/bg2.jpg')"/>
    </fx:Declarations>

    <s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="@Embed('assets/bg1.jpg')" borderAlpha="0">

        <component:home/>

    </s:BorderContainer>

</s:WindowedApplication>

现在你的组件

<fx:Script>
    <![CDATA[
        import mx.core.FlexGlobals;
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:layout>
    <s:HorizontalLayout/>
</s:layout>

<s:Button label="click to show bg 1" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg1)"/>

<s:Button label="click to show bg 2" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg2)"/>

您只需要使代码适应您的项目，点击您的图像而不是按钮。祝你好运！

于 2011-11-30T15:50:00.667 回答