基于AS3.0的位圖置換圖圖像濾鏡應用研究

謝建華

摘 要：通過Flash ActionScript3.0的flash.filters包中各種濾鏡類可以實現對圖像的濾鏡處理，其中DisplacementMapFilter 類可實現對位圖的置換圖濾鏡效果，本文在研究置換圖工作原理和濾鏡工作原理的基礎上，應用AS3.0程序開發語言實現對圖像的置換左移和扭曲效果處理，是圖像處理的一種新嘗試，程序開發人員通過編寫代碼實現專業圖像處理軟件實現的功能，為圖像處理開辟了一條新的途徑和方式。

關鍵詞：AS3.0；置換圖；濾鏡；工作原理

中圖分類號：TP391 文獻標識碼：A 文章編號：2095-2163（2015）03-

Research on Displacement Map Filter Application of Bitmap based on AS3.0

XIE JianHua

（Guangzhou Panyu Polytechnic，Guangzhou 511483，China）

Abstract： The flash filters package contains a lots of filter classes， with which the image processing can be accomplished， Displacement Map Filter class can be used to achieve filter effects. The operational principle of displacemap and filter are presented， programmers can use AS3.0 to achieve some filter effects， such as ，bitmap shift left， bitmap distortion， and so on. This method is a new attempt for image processing. Programmers can achieve the same functions by programming as using the professional image tools， so it is a new way for image processing.

Key Words： ActionScript 3.0； DisplacementMap； Filter； Operational Principle

0 引 言

位圖是使用像素陣列來表示的圖像，每個像素的顏色信息可由RGB組合或者灰度值來分析和表示[1]。以往，一般用戶多是利用專業圖像編輯軟件Adobe Photoshop或 Adobe Fireworks實現對位圖圖像的應用濾鏡效果，而Flash ActionScript 3.0 擁有flash.filters 包，且包含著一系列位圖效果濾鏡類，因而允許開發人員以編程方式對位圖應用濾鏡并顯示對象，以達到雨圖形處理應用程序中許多效果相同的定制技術呈現。基于此，本文將運用Flash開發語言實現對位圖的置換圖濾鏡效果應用。

1 理論原理

1.1置換圖工作原理

置換圖決定了目標對象中像素移動的距離和方向如圖1所示，這是根據圖片中的灰度值來實現的。

圖1 置換圖制作原理

Fig. 1 Principle of replacement map

置換濾鏡基本算法可以簡單描述為：

F（x，y）=I（x+△x，y+△y） （1）

而且，△x=

其中，I為原圖，G為置換圖，F為置換結果，Kx為水平方向比例，xmax和xmin分別為選區外接矩形的邊界。%表示余數運算。

在此 ，給出置換濾鏡基本算法的實現要點概述如下：

（1）“置換”濾鏡使用置換圖中的顏色值（指定通道的灰度值）改變選區（像素的移動），其中0 是負向最大改變值，255 是正向最大改變值，灰度值 128 不產生置換。

（2）如果置換圖只有一個通道，圖像則沿著由水平比例和垂直比例所定義的對角線改變像素的移動[2]。如果置換圖有多個通道，第一個通道則會控制水平方向像素的置換，第二個通道將控制垂直方向像素的置換。

（3）當水平比例和垂直比例都設置為100% 時，最多置換128個像素（因為中間的灰色不生成置換）。

（4）使用名為置換圖的圖像確定如何扭曲選區的像素。

對于簡單的置換圖來說，亮色處的像素向左上方移動，當顏色為純白色時，移動距離最大，為128像素。中性色（50%灰色）處的像素保持原位置不變。暗色處的像素向右下方移動，當顏色為純黑色時，移動距離最大，為128像素。介于白色與黑色之間的顏色分別描述了使像素移動的相應距離。特別指出的是，這幅簡單的置換圖必須是灰度模式，如圖2所示。

圖2 簡單置換圖

Fig. 2 Simple replacement map

對于復雜的置換圖來說，像素的移動方向和距離將取決于紅色和綠色通道的亮度值。具體來說，在紅色通道中，白色處的像素將左移，黑色處的像素將右移；在綠色通道中，白色處的像素將上移，黑色處的像素將下移。而藍色通道則不起作用。移動的距離和簡單置換圖中原理相似。但仍需指出的是，復雜的置換圖必須是RGB模式，如圖3所示。

圖3 復雜置換圖

Fig.3 complex replacement map

1.2 濾鏡的工作原理

AS 3.0中，顯示對象過濾是通過將原始對象的副本緩存為透明位圖而展開其工作的。

將濾鏡應用于顯示對象后，只要對象中附帶有效的濾鏡列表，Adobe Flash Player 或 Adobe AIR 就會將該對象緩存為位圖。而后，此位圖將成為所有后續應用的濾鏡效果的原始圖像。

通常，每個顯示對象包含兩個位圖：一個包含原始未過濾的源顯示對象，另一個用于過濾后的最終圖像。呈現時使用最終圖像。只要顯示對象不發生更改，最終圖像就不需要更新[3]。

AS 3.0中的DisplacementMapFilter 類使用BitmapData對象（稱為置換圖圖像）的像素值在新對象上執行置換效果。一般情況下，置換圖圖像與將要應用濾鏡的實際顯示對象或 BitmapData實例均有一定不同。置換效果包括針對過濾后圖像中像素的置換，即讓這些像素離開各自原始位置一定距離。也就是，此濾鏡可用于產生移位、扭曲或斑點效果。

此濾鏡功能實現可使用以下公式[3-4]：

dstPixel[x， y] = srcPixel[x + （（componentX（x， y） - 128） * scaleX） / 256， y + （（componentY（x， y） - 128） *scaleY） / 256）（2）

其中，componentX（x， y）從mapBitmap屬性獲得（x-mapPoint.x ，y-mapPoint.y）處的 componentX 屬性顏色值。

濾鏡使用的映射圖像會進行縮放，以匹配舞臺縮放比例。當對象自身呈一定的比例時，卻不會進行縮放。濾鏡支持舞臺縮放。但不支持常規縮放、旋轉和傾斜。如果對象本身進行了縮放（如果將 scaleX 和 scaleY 屬性設置為除1.0以外的其它值），濾鏡效果將不執行縮放。只有用戶在舞臺上進行放大時，才會有縮放的發生和出現。

應用于給定像素的置換位置和置換量可由置換圖圖像的顏色值設計和確定。使用濾鏡時，除了指定置換圖圖像外，還要指定如下各值，以利于操控置換圖圖像中計算置換的具體方式：

（1）映射點。過濾圖像上的位置，在該點將應用置換濾鏡的左上角。如果只想對圖像的一部分應用濾鏡，可以使用此值。

（2）X 組件。影響像素的 x 位置的置換圖圖像的顏色通道。

（3）Y 組件。影響像素的 y 位置的置換圖圖像的顏色通道。

（4）X 縮放比例。指定 x 軸置換強度的乘數值。

（5）Y 縮放比例。指定 y 軸置換強度的乘數值。

（6）濾鏡模式：確定在移開像素后形成的空白區域中，Flash Player 或 AIR 應執行何種操作。在DisplacementMapFilterMode 類中定義為常量的選項可以顯示原始像素（濾鏡模式 IGNORE）、從圖像的另一側環繞像素（濾鏡模式 WRAP，為默認設置）、使用最近的移位像素（濾鏡模式 CLAMP）或用顏色填充空間（濾鏡模式COLOR）。

2 應用與分析

2.1 水平移位

在以下代碼中，將加載一個圖像，如圖4所示。完成加載后使圖像在舞臺上居中并對它應用置換圖濾鏡，使整個圖像中的像素向左水平移位，置換后效果如圖5所示。

// 加載圖像

var loader：Loader = new Loader（）；

loader.load（new URLRequest（"images/image.jpg"））；

this.addChild（loader）；

var mapImage：BitmapData；

var displacementMap：DisplacementMapFilter；

loader.contentLoaderInfo.addEventListener（Event.COMPLETE， setupStage）；

// 圖像加載完成調用該函數

function setupStage（event：Event）：void

{

//圖像居中

loader.x = （stage.stageWidth - loader.width） / 2；

loader.y = （stage.stageHeight - loader.height） / 2；

// 創建置換圖像

mapImage = new BitmapData（loader.width， loader.height， false， 0xFF0000）；

// 創建置換濾鏡

displacementMap = new DisplacementMapFilter（）；

displacementMap.mapBitmap = mapImage；

displacementMap.mapPoint = new Point（0， 0）；

displacementMap.componentX = BitmapDataChannel.RED；

displacementMap.scaleX = 250；

loader.filters = [displacementMap]；

}

用于定義置換的屬性有：

（1）置換圖位圖。置換位圖是由代碼創建的新的 BitmapData 實例。具體尺寸與加載的圖像的尺寸匹配（因此會將置換應用于整個圖像）。用純紅色像素填充此實例。

（2）映射點。將此值設置為點 （0， 0），使置換再次應用于整個圖像。

（3）X 組件。此值設置為常量 BitmapDataChannel.RED，表示置換圖位圖的紅色值將決定沿著 x 軸置換像素的程度（像素的移動程度）。

（4）X 縮放比例。此值設置為 250。由于全部置換量（與全紅的置換圖圖像的距離）僅使圖像置換很小的量（大約為一個像素的一半）。這就使得，如果將此值設置為 1，圖像只會水平移動 0.5個像素；而將此值設置為 250，圖像將移動大約 125個像素。

圖4 原始網格圖（image.jpg） 圖5 置換后左移效果圖

Fig.4 Original girds Fig.5 Result of left shift

這些設置可使過濾圖像的像素向左移動 250個像素。移動的方向（向左或向右）和移動量則取決于置換圖圖像中的像素的顏色值。由實施概念而言，Flash Player 或 AIR 會逐一處理過濾圖像的像素（至少處理將應用濾鏡的區域中的像素，在本例中指所有像素），并對每個像素執行以下操作：

（1）Flash Player在置換圖圖像中查找相應的像素。例如，當 Flash Player 或 AIR 計算過濾圖像左上角像素的置換量時，就會在置換圖圖像左上角中查找像素。

（2）Flash Player確定置換圖像素中指定顏色通道的值。在本例中，x組件顏色通道是紅色通道，因此Flash Player和AIR將查看置換圖圖像中該像素所在位置處的紅色通道的對應值。由于置換圖圖像是純紅色的，即使得像素的紅色通道為0xFF（即255）。該值將用作置換值。

（3）比較置換值和“中間”值（127，這是0和255之間的中間值）。如果置換值低于中間值，則像素正向移位（x置換向右；y置換向下）。而如果置換值高于中間值（如本示例），則像素負向移位（x置換向左；y置換向上）。為更精確起見，Flash Player和AIR 會從127中減去置換值，結果（正或負）即是應用的相對置換量。

（4）獲得相對置換量的應用結果后，Flash Player 通過確定相對置換值所表示的完全置換量的百分比來給出實際置換量。在本例中，全紅色意味著 100%置換。然后用 x 縮放比例值或 y 縮放比例值乘以該百分比，以確定將應用的置換像素數。具體來說就是，100% 乘以250將可確定置換量（大約為向左移動 125個像素）。

因為沒有為y分量和y縮放比例指定值，此處將使用默認值（不發生置換），這就是圖像在垂直方向不移位的原因。

在本示例中使用了默認濾鏡模式設置 WRAP，當像素向左移位時，將會利用移到圖像左邊緣以外的像素來填充右側空白區域。

2.2 扭曲涂抹效果

步驟1： 制作如圖6、7、8所示的三個元件。

Fig.6 Red circle Fig.7 blue circle

其中，紅圓線性填充紅色255-0；藍圓線性填充藍色255-0，再旋轉90度。

結果：上部分藍色255，下部分藍色0。背景圖為黃黑相間的斑狀矩形，其注冊點在左上角，命名為Background。

圖8 背景矩形元件

Fig.8 Background with a rectangle

步驟2：利用兩個圓創建一個影片剪輯（注意，注冊點在左上角，上面圖層的元件預設混合模式為add）。剪輯后效果如圖9所示。

圖9 影片剪輯

Fig.9 MovieClip

步驟3：再次繪制一個元件，如圖10所示。

圖10 帶圓的矩形元件

Fig.10 retangle with a circle

其中，矩形部分用#808080填充（三個分量都是128），大小與前面的背景矩形相同；而中間的灰圓大小與紅、綠圓相同，并進行放射性填充；三處的顏色均為808080，但alpha卻不一樣。具體地，左、中、右的alpha分別為0%、55%、100%

步驟4：將（2）、（3）步再合并為一個元件，效果如圖11所示。

圖11 合并產生的新元件

Fig.11 result of merge

其中，在圖層最上面是灰圓，中間是紅綠圓，最下是灰矩形。這樣，圓的邊緣部分即帶有羽化效果。將這個元件命名為Displacer。

步驟5：編寫代碼，測試得出結果[5-6]。

var channel1：Number = 1； //選紅色通道來計算X方向的偏移量

var channel2：Number = 4； //選藍色通道來計算X方向的偏移量

var xMultiplier ：Number= 30； //x方向的放大系數

var yMultiplier：Number = 30； // x方向的放大系數

var mode：String = "clamp"；

var offset：Point = new Point（0， 0）；

var bmp：BitmapData = new BitmapData（502， 302）；

bmp.draw（Displacer）；

var displacementMapFilter：DisplacementMapFilter = new DisplacementMapFilter（bmp， offset， channel1， channel2， xMultiplier， yMultiplier， mode）

Background.filters = [displacementMapFilter]；

執行代碼，效果如圖12所示。

圖12 最終扭曲涂抹效果圖

Fig.12 Final result of clamp mode

3結束語

通過AS3.0的flash.filters包，使得程序開發者利用編程即可實現與用戶使用專業的圖像處理軟件，如Photoshop一樣的圖片濾鏡處理效果，也就是利用BitmapData類和DisplacementMapFilter類可實現對位圖的置換圖濾鏡應用。程序設計人員通過對該類程序的開發實現了對位圖圖像的移位、扭曲或斑點效果，一并也完成了顯示對象的生動呈現，從而為圖像處理提供了一種新的操作模式及執行方式。本文僅以DisplacementMapFilter類為例，其程序開發方法完全可以拓展到flash.filters包中其他濾鏡類，以處理圖像的不同濾鏡效果。

參考文獻：

[1] 劉菲，孟祥增.Flash動畫的內容特征分析與圖像信息提取研究[J].現代教育技術，2009 ，19（12）：91-94.

[2] 趙亮，何振林.Photoshop“置換濾鏡”的探析[J].科技資訊.2006（22） ：90.

[3] 康彬，朱衛平.一種基于壓縮感知的圖像去馬賽克算法[J]，南京郵電大學學報（自然科學版），2014，34（4）：39-43.

[4] AGHAGOLZADEH M，MOGHADAM A A，KUMAR M，et al. Bayer and panchromatic color filter array demosaicing by sparse recovery[J]. SPIE Proceedings， 2011，78： 1- 11.

[5] 朱治國，繆亮，陳艷麗.Flash ActionScript 3.0 編程技術教程[M].北京： 清華大學出版社，2008.

[6]李天培，王文憑，孫少斌. 基于ActionScript 3.0的行走動作模擬[J]. 自動化技術與應用， 2010，29（08）：30-32.