Question

我正在尝试构建一个图像编辑组件，为上传的图像添加标题。在此应用程序中，第一个用户从桌面上传多个图像。用户选择其中一个图像以向其添加文本。 ImageWithText组件

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         height="600"
         width="800"
         creationComplete="init()"
         >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private var _sourceByteArray:ByteArray;
            public function source(value:ByteArray):void
            {
                _sourceByteArray = value;
            }   

            protected function init():void
            {
                if(_sourceByteArray == null)
                    return;

                centerImage();
            }
            protected function centerImage():void
            {
                imageMeme.x = width/2 - imageMeme.width/2;
                imageMeme.y = height/2 - imageMeme.height/2
            }

        ]]>
    </fx:Script>
    <fx:Declarations>

    </fx:Declarations>
    <mx:Image id="imageMeme" verticalCenter="0" horizontalCenter="0"/>

</s:TitleWindow>

家长应用

private function showTextControls(event:MouseEvent):void
            {
                if(listOfSelectedImages.length == 0)
                {
                    Alert.show("Please select an image to edit.");
                    return;
                }
                var byteArrayCropImage:ByteArray  = getPreviewImageByteArray();
                imageWithText.source(byteArrayCropImage);
                imageWithText.addEventListener(FlexEvent.CREATION_COMPLETE, handleCreationComplete);

                PopUpManager.addPopUp(imageWithText,this, true);
                PopUpManager.centerPopUp(imageWithText);
}

它打开一个空白的标题窗口，上面只有文字。标题窗口中没有加载图像。

Answer 1

我没有用当前的方法追捕特定的问题，但我这样做的方法是将ByteArray设置为可绑定变量，然后链接Image源自MXML中的ByteArray：

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         height="600"
         width="800"
         creationComplete="init()"
         >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            [Bindable] // change 1/3
            private var _sourceByteArray:ByteArray;
            public function source(value:ByteArray):void
            {
                _sourceByteArray = value;
            }   

            protected function init():void
            {
                if(_sourceByteArray == null)
                    return;

                imageMeme.filters = new Array();
                // imageMeme.load(_sourceByteArray); // change 2/3
                centerImage();
            }
            protected function centerImage():void
            {
                imageMeme.x = width/2 - imageMeme.width/2;
                imageMeme.y = height/2 - imageMeme.height/2
            }

        ]]>
    </fx:Script>
    <fx:Declarations>

    </fx:Declarations>
    <mx:Image id="imageMeme" verticalCenter="0" horizontalCenter="0"
            source="{_sourceByteArray}"/> // change 3/3
    <mx:HBox id="box_Label">
        <s:Label id="labelOfImage" text="Blah Blah Blah"/>  
    </mx:HBox>

</s:TitleWindow>

Answer 2

creationComplete会触发一次，你确定它在传递源之前不会触发吗？

Flex：将bytearray设置为图像组件

2 个答案: