0

私が作成しているフレックスプロジェクトでは、Webサイトの背景を変更して、クリックした画像に変更しようとしています。メインページの背景は次のように設定しました。

<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 に答える