선 및 곡선 그리기

Shape, Sprite 또는 MovieClip 인스턴스의 graphics 속성을 사용하여 그리려면 드로잉에 사용할 스타일(선 크기 및 색상, 채우기 색상)을 먼저 정의해야 합니다. Adobe® Flash® Professional 또는 다른 드로잉 응용 프로그램의 드로잉 도구를 사용할 때와 마찬가지로, ActionScript를 사용하여 그릴 때는 획이나 채우기 색상을 사용할 수도 있고 사용하지 않을 수도 있습니다. 획 모양은 lineStyle() 또는 lineGradientStyle() 메서드를 사용하여 지정하고, 실선을 만들려면 lineStyle() 메서드를 사용합니다. 이 메서드를 호출할 때 가장 일반적으로 지정하는 값은 처음 세 개의 매개 변수인 선 두께, 색상 및 알파입니다. 예를 들어 다음 코드 행은 myShape 라는 Shape가 2픽셀 두께, 빨강(0x990000) 및 불투명도 75%의 선을 그리도록 지시합니다.

myShape.graphics.lineStyle(2, 0x990000, .75);

알파 매개 변수의 기본값은 1.0(100%)이며, 완전히 불투명한 선을 원하는 경우 이 매개 변수를 해제할 수 있습니다. lineStyle() 메서드는 또한 픽셀 힌트 및 크기 조절 모드를 위한 두 개의 추가 매개 변수를 사용합니다. 이러한 매개 변수 사용에 대한 자세한 내용은 Adobe Flash Platform용 ActionScript 3.0 참조 설명서 에서 Graphics.lineStyle() 메서드에 대한 설명을 참조하십시오.

그래디언트 선을 만들려면 lineGradientStyle() 메서드를 사용합니다. 이 메서드에 대해서는 그래디언트 선 및 채우기 만들기 에 설명되어 있습니다.

채워진 모양을 만들려면 드로잉을 시작하기 전에 beginFill() , beginGradientFill() , beginBitmapFill() 또는 beginShaderFill() 메서드를 호출합니다. 그 중에서 가장 기본적인 beginFill() 메서드는 채우기 색상과 채우기 색상에 대한 알파 값(선택 사항)이라는 두 개의 매개 변수를 사용합니다. 예를 들어 녹색으로 채워진 모양을 그리는 경우 다음과 같은 코드를 사용할 수 있습니다( myShape 라는 객체에서 그린다고 가정).

myShape.graphics.beginFill(0x00FF00);

채우기 메서드를 호출하면 이전의 모든 채우기가 암시적으로 종료된 후 새 메서드가 시작됩니다. 획 스타일을 지정하는 메서드를 호출하면 이전 획이 대체되지만, 이전에 지정한 채우기는 바뀌지 않으며 그 반대의 경우도 마찬가지입니다.

선 스타일 및 채우기 속성을 지정했으면 다음 단계는 드로잉 시작점을 지정하는 것입니다. Graphics 인스턴스에는 종이 위의 펜촉과 같은 드로잉 포인트가 있습니다. 드로잉 포인트가 있는 위치가 다음 드로잉 액션이 시작되는 지점이 됩니다. 처음에 Graphics 객체는 드로잉 포인트 0에서 시작하는데, 0은 드로잉이 수행되는 객체의 좌표 공간에서의 시작점입니다. 다른 포인트에서 그리기를 시작하려면 moveTo() 메서드를 먼저 호출한 다음 드로잉 메서드 중 하나를 호출하십시오. 이 과정은 종이에서 펜을 들어 다른 위치로 옮기는 것에 견줄 수 있습니다.

드로잉 포인트를 지정했으면 드로잉 메서드인 lineTo() (직선 그리기용) 및 curveTo() (곡선 그리기용)를 연속적으로 호출하여 그리기를 수행하십시오.

그리기 과정에서 채우기 색상을 지정한 경우 endFill() 메서드를 호출하여 채우기를 종료할 수 있습니다. 닫힌 모양 그리기가 아닌 경우(즉, endFill() 을 호출했을 때 드로잉 포인트가 모양의 시작점에 있지 않은 경우), endFill() 메서드를 호출하면 Flash 런타임이 현재 드로잉 포인트에서 가장 최근의 moveTo() 호출에 지정된 위치까지 직선을 그려 모양을 자동으로 닫습니다. 채우기를 시작했는데 endFill() 을 호출하지 않은 경우, beginFill() (또는 다른 채우기 메서드 중 하나)을 호출하면 현재 채우기가 종료되고 새로운 채우기가 시작됩니다.

lineTo() 메서드를 호출하면 Graphics 객체는 현재 드로잉 포인트에서 메서드 호출에서 두 개의 매개 변수로 지정한 좌표까지 지정한 선 스타일을 사용하여 직선을 그립니다. 예를 들어 다음 코드 행은 드로잉 포인트를 100, 100 좌표에 두고 200, 200 좌표까지 선을 그립니다.

myShape.graphics.moveTo(100, 100); 
myShape.graphics.lineTo(200, 200);

다음 예제에서는 높이가 100픽셀인 빨강과 녹색 삼각형을 그립니다.

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
 
this.addChild(triangle);

curveTo() 메서드는 2차 베지어 곡선을 그립니다. 이 곡선은 두 개의 포인트(앵커 포인트)를 연결하는 호를 그리며 이 호는 세 번째 포인트(제어 포인트) 방향으로 구부러집니다. Graphics 객체는 현재 드로잉 위치를 첫 번째 앵커 포인트로 사용합니다. curveTo() 메서드를 호출하면 4개의 매개 변수(제어 포인트의 x, y 좌표와 두 번째 앵커 포인트의 x, y 좌표)가 전달됩니다. 예를 들어 다음 코드는 100, 100 포인트에서 시작하여 200, 200 포인트에서 끝나는 곡선을 그립니다. 제어 포인트가 175, 125이므로 오른쪽으로 이동하여 아래로 향하는 곡선이 만들어집니다.

myShape.graphics.moveTo(100, 100); 
myShape.graphics.curveTo(175, 125, 200, 200);

다음 예제에서는 폭 및 높이가 100픽셀인 빨강과 녹색 원형 객체를 그립니다. 2차 베지어 수식의 특성상 완벽한 원이 되지는 않습니다.

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
 
this.addChild(roundObject);