迴旋濾鏡

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

ConvolutionFilter 類別可應用在廣泛的 BitmapData 物件或顯示物件的影像變形作業中,例如模糊化、邊緣偵測、銳利化、浮雕與斜角處理等。

在概念上,迴旋濾鏡會依序檢查來源影像中的每個像素,並依據該像素及其周圍像素的值,來決定該像素的最後顏色。被指定為數值陣列的矩陣,將指出每個特定的相鄰像素值影響最後結果值的程度。

以最常見的 3 x 3 矩陣類型做為考量範例。此矩陣包含 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 倍之多。

雖然這個矩陣的效果並不明顯,還是可以使用其它的矩陣數值來建立不同的效果。下列是一些透過 3 x 3 矩陣來產生不同效果的標準矩陣數值組合:

  • 基本模糊 (除數為 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)。