회선 필터

Flash Player 9 이상, Adobe AIR 1.0 이상

ConvolutionFilter 클래스를 사용하면 BitmapData 객체 또는 표시 객체에 흐리게 하기, 가장자리 감지, 선명하게 하기, 엠보싱, 경사 등의 다양한 이미지 변형을 적용할 수 있습니다.

회선 필터는 개념적으로 소스 이미지의 각 픽셀을 하나씩 거쳐가면서 각 픽셀 및 그 주변 픽셀의 값을 사용하여 해당 픽셀의 최종 색상을 결정합니다. 숫자 값 배열로 지정되는 행렬은 인접한 각 특정 픽셀 값이 최종 결과 값에 영향을 미치는 정도를 나타냅니다.

가장 일반적으로 사용되는 3x3 행렬을 예로 들어 보겠습니다. 아래 행렬에는 9개의 값이 있습니다.

N    N    N 
N    P    N 
N    N    N

특정 픽셀에 회선 필터를 적용하는 경우에는 픽셀 자체의 색상 값(이 예제에서는 "P")과 함께 주변 픽셀 값(이 예제에서 "N"으로 레이블 표시)을 검토합니다. 그러나 행렬의 값을 설정하여 각 픽셀이 결과 이미지에 영향을 미치는 우선 순위를 지정하십시오.

예를 들어 회선 필터를 사용하여 적용된 다음 행렬은 이미지를 원래 모습 그대로 유지합니다.

0    0    0 
0    1    0 
0    0    0

이미지가 변경되지 않는 것은 원래 픽셀 값에 최종 픽셀 색상을 결정하는 상대 강도가 1인 반면, 주변 픽셀 값의 상대 강도는 0으로 해당 색상이 최종 이미지에 반영되지 않기 때문입니다.

마찬가지로 다음 행렬은 이미지의 픽셀을 왼쪽으로 한 픽셀씩 이동하게 합니다.

0    0    0 
0    0    1 
0    0    0

이 경우 픽셀 자체는 최종 이미지의 해당 위치에 표시된 최종 픽셀 값에 영향을 미치지 않고, 오른쪽 픽셀 값만 해당 픽셀의 최종 값을 결정하는 데 사용됩니다.

ActionScript에서는 행렬의 행과 열 수를 지정하는 두 개의 속성과 값이 포함된 Array 인스턴스의 조합으로 행렬을 만들 수 있습니다. 다음 예제에서는 이미지를 로드하고 이미지 로딩이 끝나면 앞에서 설명한 행렬을 사용하여 해당 이미지에 회선 필터를 적용합니다.

// Load an image onto the Stage. 
var loader:Loader = new Loader(); 
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg"); 
loader.load(url); 
this.addChild(loader); 
 
function applyFilter(event:MouseEvent):void 
{ 
    // Create the convolution matrix. 
    var matrix:Array = [0, 0, 0, 
                                     0, 0, 1, 
                                     0, 0, 0]; 
     
    var convolution:ConvolutionFilter = new ConvolutionFilter(); 
    convolution.matrixX = 3; 
    convolution.matrixY = 3; 
    convolution.matrix = matrix; 
    convolution.divisor = 1; 
     
    loader.filters = [convolution]; 
} 
 
loader.addEventListener(MouseEvent.CLICK, applyFilter);

이 코드에서는 행렬에 1 또는 0 이외의 다른 값을 사용했기 때문에 명확하지 않은 부분이 있습니다. 예를 들어 오른쪽에 1이 아닌 8이 있는 동일한 행렬은 동일한 액션을 수행합니다(왼쪽으로 픽셀 이동). 그러나 이미지의 색상에 영향을 미쳐 해당 이미지를 8배 밝게 만듭니다. 이는 최종 픽셀 색상이 해당 행렬 값에 원본 픽셀 값을 곱하고 이 두 값을 더한 다음 필터의 divisor 속성 값으로 나누어서 계산되기 때문입니다. 예제 코드에서 divisor 속성은 1로 설정됩니다. 일반적으로 원본 이미지와 동일한 색상 밝기를 유지하려는 경우 제수를 행렬 값의 합과 동일하게 해야 합니다. 따라서 행렬 값 합계가 8이고 제수가 1인 행렬의 결과 이미지는 원래 이미지보다 8배 가량 밝게 됩니다.

이 행렬의 효과는 그다지 두드러지지 않지만 다른 행렬 값을 사용하여 다양한 효과를 연출할 수 있습니다. 다음은 3x3 행렬을 통해 연출할 수 있는 여러 다양한 효과의 표준이 되는 몇 가지 행렬 값 집합입니다.

기본 흐림(제수 5):
```
     0 1 0 
     1 1 1 
     0 1 0
```

선명 효과(제수 1):

     0, -1, 0 
    -1, 5, -1 
     0, -1, 0

가장자리 감지(제수 1):

     0, -1, 0 
    -1, 4, -1 
     0, -1, 0

엠보싱 효과(제수 1):
```
    -2, -1, 0 
    -1, 1, 1 
     0, 1, 2
```
대부분의 이러한 효과에서 제수는 1입니다. 이것은 양의 행렬 값에 음의 행렬 값을 추가하면 1(가장자리 감지의 경우 0이지만 divisor 속성 값은 0이 될 수 없음)이 되기 때문입니다.