1

我一直在尝试让 FXG 在我的 Flex 应用程序中工作，它可以正常工作并且渲染得很好，但我想要完成的是一种画廊，其中包含有关数据库中图像的数据。以前可以用<s:Image source=/path/{variable_name}>，现在要导入FXG文件，不能用<s:Image>了。在这里我可以显示一个静态 FXG 图像：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fxg="assets.fxg.*"
        tabBarVisible="false" title="{data.name}">

    <fxg:megapicture001 x="118" y="27" width="338" height="519"/>

    <s:Label x="78" y="43" text="{data.name}"/>

    <s:navigationContent>
        <s:Button icon="@Embed('assets/home.png')" click="navigator.popView()"/>
    </s:navigationContent>

</s:View>

试图做<fxg:{data.picturename} />爆炸。

4

1 回答 1

1

您不能单独导入和使用 FXG 元素，因为它们不是显示对象。我的想法是将它们包装在 UIComponent 容器中。这个类可能最终会成为Flextras 移动组件集的一部分，在我们明年年初的某个时候的下一次更新中最有可能：

package com.dotcomit.utils
{
    import flash.display.DisplayObject;
    import flash.display.Sprite;

    import mx.core.UIComponent;

    public class FXGImage extends UIComponent
    {
        public function FXGImage(source:Class = null)
        {
            if(source){
                this.source = source;
            }
            super();
        }

        // this will tell us the class we want to use for the display
        // most likely an fxgClass
        private var _source : Class;
        protected var sourceChanged :Boolean = true;

        public function get source():Class
        {
            return _source;
        }

        public function set source(value:Class):void
        {
            _source = value;
            sourceChanged = true;
            this.commitProperties();
        }

        public var imageInstance : DisplayObject;

        // if you want to offset the position of the X and Y values in the 
        public var XOffset :int = 0;
        public var YOffset :int = 0;

        // if you want to offset the position of the X and Y values in the 
        public var heightOffset :int = 0;
        public var widthOffset :int = 0;


        override protected function createChildren():void{
            super.createChildren();
            if(this.sourceChanged){
                if(this.imageInstance){
                    this.removeChild(this.imageInstance);
                    this.imageInstance = null;
                }

                if(this.source){
                    this.imageInstance = new source();
                    this.imageInstance.x = 0 + XOffset;
                    this.imageInstance.y = 0 + YOffset;
                    this.addChild(this.imageInstance);
                }
                this.sourceChanged = false;

            }
        }

        override protected function commitProperties():void{
            super.commitProperties();
            if(this.sourceChanged){
                // if the source changed re-created it; which is done in createChildren();
                this.createChildren();
            }
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(unscaledHeight != 0){
                this.imageInstance.height = unscaledHeight + this.heightOffset;
            }
            if(unscaledWidth != 0){
                this.imageInstance.width = unscaledWidth + this.widthOffset;
            }
        }

    }
}

你可以像这样使用它：

<utils:FXGImage id="fxgImage" source="assets.images.mainMenu.MainMenuBackground" height="100%" width="100%" />
于 2011-11-23T04:26:11.423 回答