Question

对于我正在制作的我的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)"/>

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

谢谢你，托马斯

Answer 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)"/>

您只需要将代码调整到项目中，点击图片而不是按钮。祝你好运！

从内部组件设置bordercontainer backgroundimage

1 个答案: