<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[  
		    import mx.controls.Image;  
 
		    private var _image : Image = null;  
 
		    public function setTileImage( image : Image ) : void  
		    {  
		        this._image = image;  
		        this.invalidateDisplayList();  
		    }
 
		    public function setBackground(source:String) : void  
		    {  
		        // 1. for crossdomain images, we need to create a LoaderContext object and set its checkPolicyFile to true.  
		        var loaderContext : LoaderContext = new LoaderContext ();  
		        loaderContext.checkPolicyFile = true;  
 
		        // 2. assign that loaderContext object to an Image object  
		        var image : Image =  new Image();  
		        image.loaderContext =  loaderContext;  
 
		        // 3. set source and load  
		        image.source = source;  
		        image.addEventListener( Event.COMPLETE, onImageLoaded  );  
		        image.load();
 
 
		    }  
 
		    private function onImageLoaded( event : Event ) : void  
		    {  
		        var image : Image = Image( event.currentTarget );  
 
		        // 1. set as tile image background  
		        this.setTileImage( image );  
		    }
 
 
		    override protected function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void  
		    {  
		        super.updateDisplayList(unscaledWidth, unscaledHeight );  
 
		        if ( _image != null )  
		        {  
		            var bitmap : Bitmap = Bitmap( _image.content );  
		            var bitmapData : BitmapData = new BitmapData( bitmap.width, bitmap.height );  
		            bitmapData.draw( bitmap );        
 
		            graphics.clear();  
		            graphics.beginBitmapFill( bitmapData );  
		            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);  
		            graphics.endFill();  
		        } 
		    }
		]]>  
	</mx:Script> 
</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="14" xmlns:images="images.*">
 
	<mx:Script>
		<![CDATA[
			private function clickHandler():void{
				this.tc.setBackground(this.textInput.text);
			}
		]]>
	</mx:Script>
 
	<mx:Label text="可自行更換圖片 TileCanvas 的使用範例"/>
	<mx:HBox width="600" horizontalAlign="center">
		<mx:Label text="圖片 HTTP 路徑 : "/>
		<mx:TextInput id="textInput" width="322"/>
		<mx:Button label="送出" click="clickHandler()"/>
	</mx:HBox>
 
	<!-- 自訂定義的 tileCanvas -->
	<images:tileCanvas id="tc" width="600" height="300" borderStyle="solid" borderThickness="2" borderColor="#B26C28"/>
</mx:Application>