그림을 자세히 보시려면 그림을 클릭하세요.문서에 첨부된 이미지는 축소하여 올렸습니다. 그림을 자세히 보시려면 그림 파일을 클릭하세요. 큰 화면으로 보실 수 있습니다. ^^

Bitmap Shape Graphic 클래스 및 컴포넌트를 이용하여 Image 컴포넌트에 임의의 위치와 색깔 및 크기로 박스를 계속 그리는 예제에 대한 설명이다.

소스 및 폼

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
		     creationComplete="CreateApp()" >
				
	<mx:Script>
	<![CDATA[

	private const TIMER_INTERVAL	:int = 1; // m sec 단위

	private var CanvasBitmapData	:BitmapData ;
	private var CanvasBitmap    	:Bitmap ;
	private var BoxShape		:Shape;
    private var tmTimer 		:Timer;

	private function CreateApp():void {
		
		CanvasBitmapData = new BitmapData(imgCanvas.width, 
						imgCanvas.height , 
						true, 
						0xFF000000 );
		CanvasBitmap     = new Bitmap(CanvasBitmapData);
		imgCanvas.addChild(CanvasBitmap);
		
		BoxShape = new Shape();
		
	        tmTimer = new Timer( TIMER_INTERVAL );
   	tmTimer.addEventListener(TimerEvent.TIMER, updateTimer);
    }

    private function updateTimer(evt:TimerEvent):void {
    	
    	var rb_color:int;
    	var rb_x:int;
    	var rb_y:int;
    	var rb_w:int;
    	var rb_h:int;
    	
		rb_color	= Math.round(Math.random() * 0xFFFFFF );
    	rb_x 	= Math.round(Math.random() * imgCanvas.width-10 );
    	rb_y 	= Math.round(Math.random() * imgCanvas.height-10 );
    	rb_w 	= Math.round(Math.random() * imgCanvas.width-rb_x);
    	rb_h 	= Math.round(Math.random() * imgCanvas.height-rb_y);

		BoxShape.graphics.clear(); 
		BoxShape.graphics.beginFill(rb_color);
		BoxShape.graphics.drawRect( rb_x, rb_y, rb_w,rb_h );
		BoxShape.graphics.endFill();
		
    	CanvasBitmapData.draw( BoxShape );
    }

	private function TimerEnableChange() : void {
		if( idTimerEnable.selected ) 	tmTimer.start();
		else				tmTimer.stop(); 
    }
		
	]]>
	</mx:Script>
	
	<mx:CheckBox id="idTimerEnable" label="박스 그리기"  selected="false" 
			change="TimerEnableChange()"  
			fontSize="16" fontWeight="bold" width="121" textAlign="right" 
			horizontalCenter="0" top="29"
			/>
	
	<mx:Image id="imgCanvas" 
		  horizontalCenter="0" width="308" height="306" top="65" scaleContent="false"/>

</mx:Application>

예제 실행

"박스 그리기" 체크박스를 체크해 보세요.