Flash Player10에서 Drawing API에 추가된 가장 큰 특징중 하나는 바로 명령을 객체화 할 수 있다는 것입니다.  graphics 객체에서 임시적으로 호출하는 것이 아닌 객체에 한번 정의를 해놓으면 계속 유지되어 사용하고 싶을 때 바로 호출할 수 있습니다. 일종에 명령을 저장하는 저장소라고 생각하시면 되겠습니다. 명령을 저장한다는 의미는 매우 큰 의미를 가집니다. 객체간의 통신중 명령을 객체화해서 사용하는 방식을 커맨드 패턴이라고 부르는데 Drawing API에서도 이러한 객체 통신 방법을 쓰는 것입니다. 명령을 객체화하면 당연히 객체를 저장할 수 있고, 저장한 명령을 반복적으로 수행할 수 있습니다.  또한 이렇게 저장된 명령들을 조합해서 매크로화하여 사용할 수 있습니다. 그럼 구체적으로 알아보겠습니다.

IGraphicsData 인터페이스를 구현하는 GraphicsStroke, GraphicsPath, GraphicsBitmapFill, GraphicsEndFill, GraphicsGradientFill, GraphicsShaderFill, GraphicsSolidFill, GraphicsTriangleFill 클래스들이 추가 되었는데 이름을 보면 알 수 있듯이 기존 graphics 객체가 가지고 있는 메서드들을 객체화 시킨것입니다.

GraphicsStroke는 lineStyle(), GraphicsPath는 moveTo(), lineTo(), curveTo(), GraphicsBitmapFill는 beginBitmapFill, GraphicsEndFill는 endFill(), GraphicsGradientFill는 beginGradientFill(), GraphicsShaderFill는 beginShaderFill()메서드와 동일합니다.

먼저 GraphicsPath클래스를 살펴 보겠습니다. 생성시 commands, data, winding 이렇게 3개의 인자를 받습니다. 저 3가지는 속성으로도 있는데 중요한건 commands와 data입니다. 이름을 통해 유추할 수 있는데 commands 속성은 Vector.<int> 타입으로 되어있습니다. 여기에 lineTo(), moveTo(), curveTo()등의 명령을 저장하는 것입니다. 벡터의 타입이 int인 이유는 moveTo() = 1, lineTo() = 2, curveTo() = 3으로 표현되기 때문입니다. 다음 data는 commands에 해당하는 값을 저장합니다. 명령에 해당하는 값을 그냥 순서대로 쭉 넣어주면 됩니다.  이렇게 commands와 data를 설정하는 방법도 있지만 메서드를 통해서 설정할 수 도 있습니다. 오히려 이쪽이 더 편할 수는 있지만 계속 메서드를 호출해야하므로 반복작업때문에 오히려 귀찮을 수도있습니다.

칠하는 행위를 하나의 역할로 보고 여러가지 다양한 방법으로 칠하는 행위를 각각의 클래스로 만들어졌습니다. 그래서 lineGradientStyle(), lineBitmapStyle(), lineShaderStyle()메서드에 해당하는 클래스가 없는 것입니다. 선스타일(GraphicsStroke)에 칠하기(GraphicsBitmapFill, GraphicsGradientFill, GraphicsShaderFill, GraphicsSolidFill)를 설정하면 해당 칠하기 방법대로 선스타일이 지정되는 것입니다.

예를 들어 볼까요?

비트맵라인스타일을 만들고 싶어요!

→ GraphicsStroke와 GraphicsBitmapFill을 사용

그리고 당연히 개별적으로 GraphicsBitmapFill을 사용하면 비트맵 칠하기가 되는 것입니다.

이렇게 객체화된 명령을 graphics.drawGraphicsData() 메서드를 이용하여 그리게 됩니다. 인자로 graphicsData:Vector<IGarphicsData>를 받습니다.  이 벡터에 패스데이터와 칠하기데이터, 선스타일 데이터가 들어가는 것입니다.

그럼 실질적으로 어떻게 사용하는지 코드를 보며 알아보겠습니다.

package{
	import flash.display.GraphicsPath;
	import flash.display.GraphicsSolidFill;
	import flash.display.GraphicsStroke;
	import flash.display.IGraphicsData;
	import flash.display.Sprite;

	public class TestDrawingAPI extends Sprite{
		public function TestDrawingAPI(){
			var graphicsData:Vector.<IGraphicsData>, graphicsPath:GraphicsPath,
			lineStyle:GraphicsStroke, fill:GraphicsSolidFill,
			commands:Vector.<int>, data:Vector.<Number>;

			graphicsPath = new GraphicsPath;
			commands = Vector.<int>( [1, 2] );
			data = Vector.<Number>( [100, 100, 50, 50] );
			graphicsPath.commands = commands;
			graphicsPath.data = data;

			fill = new GraphicsSolidFill( 0xff0000 );
			lineStyle = new GraphicsStroke( 3 );
			lineStyle.fill = fill;

			graphicsData = Vector.<IGraphicsData>( [lineStyle, graphicsPath] );
			graphics.drawGraphicsData( graphicsData );
		}
	}
}

먼저 GraphicsPath클래스의 객체를 만들고, 객체에 할당할 명령과 데이터를 만들어 줍니다. 변수 commands에 1, 2를 차례로 넣습니다. moveTo와 lineTo명령을 할당한 것이죠. 다음 변수 data에는 값을 할당해줍니다 moveTo에서 100, 100을 사용하고 다음 lineTo에서는 50, 50을 사용합니다. 다음은 칠하기를 만들어줍니다 fill변수에 GraphicsSolidFill객체를 생성합니다. 그리고 선을 그리기 위해서 lineStyle변수에 GraphicsStroke객체를 생성한후 선에 칠하기를 할당해줍니다. 그리고 나서 마지막으로 graphicsData변수에 위에서 만든 lineStyle과 graphicsPath를 설정해주고 graphics.drawGraphicsData() 메서드를 실행해주면 선이 그려집니다. 아래는 컴파일 결과입니다.

DrawingAPI

아마 처음 접해보시는 분들은 사용하기가 매우 복잡하다고 느끼실것입니다. 단순히 메서드를 실행하던 수준에서 많은 객체들을 만들어야하기 때문인데 이렇게 쓰는 이유는 앞서 말씀드린것과 같이 명령을 객체화하면 재사용이 쉽다는 점에 있습니다.