2011-10-12 74 views
0

我想將圖像動態加載到圖像控件,然後將其添加到精靈並將精靈添加到UIComponent。flex 4 - 圖像沒有添加到UIComponenet

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
      applicationComplete="init()"> 
<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
<fx:int id = "_rows" /> 
<fx:int id = "_cols" />  

</fx:Declarations> 
<s:layout> 
    <s:VerticalLayout> 

    </s:VerticalLayout> 

</s:layout> 
<fx:Script> 
    <![CDATA[ 
     import as3isolib.geom.Pt; 
     import as3isolib.utils.IsoDrawingUtil; 

     import mx.controls.Alert; 
     import mx.core.IVisualElement; 

     private var sprite:Sprite; 
     [Binable] 
     private var imgUrl:String = "http://localhost/greenrev/images//marketitems/menu_houses.png"; 
     //[Bindable] 
//   private var _rows:int = 1; 
//   //[Bindable] 
//   private var _cols:int = 1; 
     private var _cellSize:int=40; 

     private function init(){ 

      sprite = new Sprite(); 
      //Alert.show(sprite.numChildren.toString()); 
      imgContainer.addChild(sprite); 
      //Alert.show(sprite.numChildren.toString()); 

      loadImage(imgUrl); 

     } 

     private function loadImage(url:String):void{ 

      //img.source = url; 
      img.load(url); 

     } 

     private function loadingComplete(event:Event):void{ 

      if (sprite.numChildren>0){ 
       sprite.removeChildAt(0); 
      } 

      sprite = new Sprite(); 
      sprite.addChild(img); 
      sprite.cacheAsBitmap = true; 
      sprite.graphics.clear(); 
      sprite.graphics.beginFill(0xffff00, 0.3); 
      _rows = int(rows.text); 
      _cols = int(cols.text); 
      Alert.show(_rows.toString() + "," + _cols.toString()); 
      IsoDrawingUtil.drawIsoRectangle(sprite.graphics,new Pt(0,0),_cellSize * _rows,_cellSize * _cols); 
      sprite.graphics.endFill(); 

      if (imgContainer.numChildren>0){ 
       imgContainer.removeChildAt(0); 
      } 

      imgContainer.addChild(sprite); 
//    imgContainer.addChild(img); 
      //Alert.show("loading complete"); 

     } 

     private function loadingFail(event:IOErrorEvent):void{ 

      Alert.show(event.text); 

     } 

    ]]> 
</fx:Script> 
<s:BorderContainer id="main" verticalCenter="-244" horizontalCenter="-422" width="80%" height="90%"> 
    <s:layout> 
     <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"> 

     </s:VerticalLayout> 
    </s:layout> 
    <s:BorderContainer> 
     <mx:UIComponent id="imgContainer"> 

     </mx:UIComponent> 
    </s:BorderContainer> 

    <s:BorderContainer> 
     <s:layout> 
      <s:HorizontalLayout> 

      </s:HorizontalLayout> 
     </s:layout> 
     <s:VGroup> 
      <s:TextInput id="rows" minWidth="100" text = "{_rows}"/> 
      <s:TextInput id = "cols" minWidth="100" text = "{_cols}"/> 
      <s:TextInput id = "txtImgUrl" minWidth="400" text="{imgUrl}"/> 
      <s:Button label="Refresh" click="loadImage(imgUrl)"/> 

     </s:VGroup> 


    </s:BorderContainer> 

</s:BorderContainer> 

<mx:Image id="img" complete="loadingComplete(event)" visible="true" ioError="loadingFail(event)"> 

</mx:Image> 

</s:Application> 

我不知道爲什麼圖像沒有顯示。就像你所看到的,我試圖在COMPLETE事件發生後添加圖像。請幫助

回答

1

更改URL爲「http://horses-bg.net/wp-content/uploads/2009/11/2752_beloved-horses.jpg」和圖像出現。 我也註釋掉IsoDrawingUtil.drawIsoRectangle(..)因爲我沒有你正在使用的庫。 這個問題可能是您的網址或在IsoDrawingutil件事:]

希望這有助於

祝你好運!

火焰

+0

嗯,它只是佈局問題,但它仍然困惑我。 lib Blaze沒問題。令我驚訝的是,圖像被遮擋在第二個邊界容器後面。儘管我已經將圖像控件添加到第一個邊框容器內的UIComponent。 –