그래디언트 선 및 채우기 만들기

flash.display.Graphics 클래스의 beginGradientFill() 및 lineGradientStyle() 메서드를 사용하면 모양에 사용할 그래디언트를 정의할 수 있습니다. 그래디언트를 정의하는 경우 행렬을 이러한 메서드의 매개 변수 중 하나로 제공합니다.

행렬을 정의하는 가장 쉬운 방법은 Matrix 클래스의 createGradientBox() 메서드를 사용하여 그래디언트 정의에 사용되는 행렬을 만드는 것입니다. createGradientBox() 메서드에 전달되는 매개 변수를 사용하여 그래디언트의 크기, 회전 및 위치를 정의합니다. createGradientBox() 메서드는 다음과 같은 매개 변수를 사용합니다.

• 그래디언트 상자 폭: 그래디언트가 펼쳐지는 폭(단위: 픽셀)

• 그래디언트 상자 높이: 그래디언트가 펼쳐지는 높이(단위: 픽셀)

• 그래디언트 상자 회전: 그래디언트에 적용될 회전(단위: 라디안)

• 수평 이동: 그래디언트가 수평으로 이동되는 정도(단위: 픽셀)

• 수직 이동: 그래디언트가 수직으로 이동되는 정도(단위: 픽셀)

예를 들어 다음과 같은 특성을 갖는 그래디언트를 검토하십시오.

• GradientType.LINEAR

• ratios 배열이 [0, 255]로 설정된 녹색과 파랑의 두 색상

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB

다음 예제에서는 createGradientBox() 메서드의 rotation 매개 변수만 다르고 다른 모든 설정은 동일한 그래디언트를 보여 줍니다.

width = 100; height = 100; rotation = 0; tx = 0; ty = 0;
width = 100; height = 100; rotation = Math.PI/4; // 45° tx = 0; ty = 0;
width = 100; height = 100; rotation = Math.PI/2; // 90° tx = 0; ty = 0;

다음 예제에서는 녹색에서 파란색으로 바뀌는 선형 그래디언트 효과를 보여 줍니다. 이 때 createGradientBox() 메서드의 rotation, tx 및 ty 매개 변수만 다르고 다른 모든 설정은 동일합니다.

width = 50; height = 100; rotation = 0; tx = 0; ty = 0;
width = 50; height = 100; rotation = 0 tx = 50; ty = 0;
width = 100; height = 50; rotation = Math.PI/2; // 90° tx = 0; ty = 0;
width = 100; height = 50; rotation = Math.PI/2; // 90° tx = 0; ty = 50;

다음 예제와 같이 createGradientBox() 메서드의 width, height, tx 및 ty 매개 변수는 방사형 그래디언트 채우기의 크기와 위치에도 영향을 줍니다.

width = 50; height = 100; rotation = 0; tx = 25; ty = 0;

다음 코드는 마지막에 보여 준 방사형 그래디언트를 만듭니다.

import flash.display.Shape; 
import flash.display.GradientType; 
import flash.geom.Matrix; 
 
var type:String = GradientType.RADIAL; 
var colors:Array = [0x00FF00, 0x000088]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var spreadMethod:String = SpreadMethod.PAD; 
var interp:String = InterpolationMethod.LINEAR_RGB; 
var focalPtRatio:Number = 0; 
 
var matrix:Matrix = new Matrix(); 
var boxWidth:Number = 50; 
var boxHeight:Number = 100; 
var boxRotation:Number = Math.PI/2; // 90° 
var tx:Number = 25; 
var ty:Number = 0; 
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
 
var square:Shape = new Shape; 
square.graphics.beginGradientFill(type,  
                            colors, 
                            alphas, 
                            ratios,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

그래디언트 채우기의 폭과 높이는 Graphics 객체로 그린 폭이나 높이가 아닌 그래디언트 행렬의 폭과 높이에 따라 결정됩니다. Graphics 객체를 사용하여 그리면 그래디언트 행렬의 해당 좌표에 존재하는 객체가 그려집니다. Graphics 객체의 shape 메서드 중 하나(예: drawRect())를 사용하더라도 그려지는 모양의 크기까지 그래디언트를 확장할 수는 없습니다. 그래디언트의 크기는 그래디언트 행렬 자체에 지정해야 합니다.

다음을 통해 그래디언트 행렬의 차원과 드로잉 자체의 차원 간에 존재하는 시각적 차이를 확인할 수 있습니다.

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

이 코드는 빨강, 녹색, 파랑이 똑같이 배분된 동일한 채우기 스타일을 사용하여 세 가지 그래디언트를 그립니다. 그래디언트는 픽셀 폭이 각각 50, 100, 150인 drawRect() 메서드를 사용하여 그려집니다. beginGradientFill() 메서드에 지정된 그래디언트 행렬은 100픽셀의 폭을 사용하여 만들어집니다. 즉, 첫 번째 그래디언트에는 그래디언트 스펙트럼의 반만 포함되고, 두 번째 그래디언트에는 스펙트럼 전체가 포함되며, 세 번째 그래디언트에는 스펙트럼 전체를 포함하면서 추가적으로 50픽셀의 파랑이 오른쪽으로 확장됩니다.

lineGradientStyle() 메서드는 그래디언트를 정의하는 것 외에는 beginGradientFill()과 유사하게 동작하지만 그리기 전에 lineStyle() 메서드를 사용하여 획 두께를 지정해야 합니다. 다음 코드는 빨강, 녹색 및 파랑 그래디언트 획을 가진 상자를 그립니다.

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

Matrix 클래스에 대한 자세한 내용은 Matrix 객체 사용을 참조하십시오.