Öteleme eşlemesi filtresi

DisplacementMapFilter sınıfı, yeni bir nesnede öteleme efekti oluşturmak için BitmapData nesnesindeki (öteleme eşlemesi görüntüsü olarak bilinir) piksel değerlerini kullanır. Öteleme eşlemesi görüntüsü genellikle gerçek görüntüleme nesnesinden veya filtrenin uygulandığı BitmapData örneğinden farklıdır. Öteleme efekti, filtre uygulanan görüntüdeki piksellerin ötelenmesi, başka bir deyişle, orijinal konumundan farklı bir yere kaydırılmasıyla oluşturulur. Bu filtre, kaydırılmış, çarpıtılmış veya lekelenmiş efekti oluşturmak için kullanılabilir.

Belirli bir piksele uygulanan ötelemenin konumu ve miktarı, öteleme eşlemesi görüntüsünün renk değeriyle belirlenir. Filtreyle çalışırken, eşleme görüntüsünü belirtmenin yanı sıra, eşleme görüntüsünden ötelemenin nasıl hesaplandığını denetlemek için şu değerleri de belirtirsiniz:

• Eşleme noktası: Filtre uygulanan görüntüdeki, öteleme filtresinin sol üst köşesinin uygulanacağı konum. Filtreyi yalnızca görüntünün bir bölümüne uygulamak istiyorsanız bunu kullanabilirsiniz.

• X bileşeni: Eşleme görüntüsünün hangi renk kanalı piksellerin x konumunu etkiler.

• Y bileşeni: Eşleme görüntüsünün hangi renk kanalı piksellerin y konumunu etkiler.

• X ölçeği: x ekseni ötelemesinin ne kadar güçlü olduğunu belirten bir çarpan değeri.

• Y ölçeği: y ekseni ötelemesinin ne kadar güçlü olduğunu belirten bir çarpan değeri.

• Filtre modu: Kaydırılan piksellerin oluşturduğu boşluklarda ne yapılacağını belirler. DisplacementMapFilterMode sınıfında sabitler olarak tanımlanan seçenekler şunlardır: orijinal pikselleri görüntüleme ( IGNORE filtre modu), pikselleri görüntünün diğer tarafından doğru sarma ( WRAP filtre modu, varsayılandır), en yakındaki kaydırılmış pikseli kullanma ( CLAMP filtre modu) veya boşlukları bir renkle doldurma ( COLOR filtre modu).

Öteleme eşlemesi filtresinin nasıl çalıştığını anlamak için, temel bir örneği dikkate alın. Aşağıdaki kodda, bir görüntü yüklenir ve yükleme sona erdiğinde görüntü Sahne Alanı'nda ortalanır, görüntüye bir öteleme eşlemesi filtresi uygulanarak görüntünün tamamındaki piksellerin yatay olarak sağa kayması sağlanır.

import flash.display.BitmapData; 
import flash.display.Loader; 
import flash.events.MouseEvent; 
import flash.filters.DisplacementMapFilter; 
import flash.geom.Point; 
import flash.net.URLRequest; 
 
// Load an image onto the Stage. 
var loader:Loader = new Loader(); 
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image3.jpg"); 
loader.load(url); 
this.addChild(loader); 
 
var mapImage:BitmapData; 
var displacementMap:DisplacementMapFilter; 
 
// This function is called when the image finishes loading. 
function setupStage(event:Event):void  
{ 
    // Center the loaded image on the Stage. 
    loader.x = (stage.stageWidth - loader.width) / 2;  
    loader.y = (stage.stageHeight - loader.height) / 2; 
     
    // Create the displacement map image. 
    mapImage = new BitmapData(loader.width, loader.height, false, 0xFF0000); 
     
    // Create the displacement filter. 
    displacementMap = new DisplacementMapFilter(); 
    displacementMap.mapBitmap = mapImage; 
    displacementMap.mapPoint = new Point(0, 0); 
    displacementMap.componentX = BitmapDataChannel.RED; 
    displacementMap.scaleX = 250; 
    loader.filters = [displacementMap]; 
} 
 
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setupStage);

Ötelemeyi tanımlamak için kullanılan özellikler şunlardır:

• Eşleme bitmap'i: Öteleme bitmap'i, kod tarafından oluşturulan yeni bir BitmapData örneğidir. Boyutları, yüklenen görüntünün boyutlarıyla eşleşir. (Böylece görüntünün tamamına öteleme uygulanır.) Düz kırmızı piksellerle doldurulur.

• Eşleme noktası: Bu değer 0, 0 noktasına ayarlanarak tekrar ötelemenin görüntünün tamamına uygulanması sağlanır.

• X bileşeni: Bu değer BitmapDataChannel.RED sabitine ayarlanır, başka bir deyişle, eşleme bitmap'inin kırmızı değeri, x ekseni boyunca piksellerin ne kadar öteleneceğini (ne kadar hareket edeceğini) belirler.

• X ölçeği: Bu değer 250 değerine ayarlanır. Tam öteleme miktarı (tamamen kırmızı olan eşleme görüntüsünden), görüntüyü yalnızca küçük bir miktar öteler (yaklaşık yarım piksel), bu nedenle, bu değer 1 değerine ayarlansaydı, görüntü yatay olarak yalnızca 0,5 piksel kaydırılırdı. Değer 250 olarak ayarlandığında görüntü yaklaşık 125 piksel kaydırılır.

Bu ayarlar, filtre uygulanan görüntünün piksellerinin 250 piksel sola kaydırılmasını sağlar. Kaydırma yönü (sol veya sağ) ve miktarı, eşleme görüntüsündeki piksellerin renk değerini esas alır. Kavramsal olarak, filtre uygulanmış görüntünün piksellerinde birer birer ilerler (en azından filtrenin uygulandığı bölgedeki piksellerde, bu durumda tüm piksellerde) ve her piksel için şunu yapar:

1. Eşleme görüntüsünde karşılık gelen pikseli bulur. Örneğin, filtre uygulanan görüntünün sol üst köşesindeki piksel için öteleme miktarını hesaplarken, eşleme görüntüsünün sol üst köşesindeki piksele bakar.

2. Eşleme pikselinde, belirtilen renk kanalının değerini belirler. Bu durumda, x bileşeni renk kanalı kırmızı kanalıdır, bu nedenle filtre söz konusu pikselde eşleme görüntüsünün kırmızı kanalının değerinin ne olduğuna bakar. Eşleme görüntüsü düz kırmızı olduğundan, pikselin kırmızı kanalı 0xFF veya 255 olur. Bu, öteleme değeri olarak kullanılır.

3. Öteleme değerini, "orta" değer (0 ile 255 aralığının ortasında yer alan 127) ile karşılaştırır. Öteleme değeri orta değerden düşükse, piksel pozitif yönde (x ötelemesi için sağa; y ötelemesi için aşağı) kaydırılır. Diğer yandan, öteleme değeri orta değerden yüksekse (bu örnekte olduğu gibi), piksel negatif yönde (x ötelemesi için sola; y ötelemesi için yukarı) kaydırılır. Daha net olmak gerekirse, filtre öteleme değerini 127'den çıkarır ve sonuç (pozitif veya negatif), uygulanan göreceli öteleme miktarıdır.

4. Son olarak, göreceli öteleme değerinin tam ötelemenin yüzde kaçını temsil ettiğini belirleyerek gerçek öteleme miktarını belirler. Bu durumda, tam kırmızı, %100 öteleme anlamına gelir. Daha sonra uygulanacak ötelemenin piksel sayısını belirlemek için bu yüzde, x ölçeği veya y ölçeği değeriyle çarpılır. Bu örnekte, 250 çarpanının %100'ü, öteleme miktarını belirler ve bu yaklaşık 125 piksel sola anlamına gelir.

y bileşeni ve y ölçeği için herhangi bir değer belirtilmediğinden, varsayılanlar (ötelemeye neden olmayan) kullanılmıştır—görüntünün dikey yönde kaydırılmamasının nedeni budur.

Örnekte, varsayılan filtre modu ayarı olan WRAP kullanılmıştır, böylece pikseller sola kaydırıldıkça, sağdaki boşluk, görüntünün sol kenarından kaydırılan piksellerle doldurulur. Farklı efektleri görmek için bu değerle denemeler yapabilirsiniz. Örneğin, öteleme özelliklerinin ayarlandığı kod kısmına ( loader.filters = [displacementMap] satırından önce) aşağıdaki satırı eklerseniz, görüntünün Sahne Alanı boyunca lekelenmiş gibi görünmesi sağlanır:

displacementMap.mode = DisplacementMapFilterMode.CLAMP;

Daha karmaşık bir örnek için, aşağıdaki liste, görüntüde büyüteç efekti oluşturmak üzere bir öteleme eşlemesi filtresi kullanır:

import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.display.BitmapDataChannel; 
import flash.display.GradientType; 
import flash.display.Loader; 
import flash.display.Shape; 
import flash.events.MouseEvent; 
import flash.filters.DisplacementMapFilter; 
import flash.filters.DisplacementMapFilterMode; 
import flash.geom.Matrix; 
import flash.geom.Point; 
import flash.net.URLRequest; 
 
// Create the gradient circles that will together form the  
// displacement map image 
var radius:uint = 50; 
 
var type:String = GradientType.LINEAR; 
var redColors:Array = [0xFF0000, 0x000000]; 
var blueColors:Array = [0x0000FF, 0x000000]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var xMatrix:Matrix = new Matrix(); 
xMatrix.createGradientBox(radius * 2, radius * 2); 
var yMatrix:Matrix = new Matrix(); 
yMatrix.createGradientBox(radius * 2, radius * 2, Math.PI / 2); 
 
var xCircle:Shape = new Shape(); 
xCircle.graphics.lineStyle(0, 0, 0); 
xCircle.graphics.beginGradientFill(type, redColors, alphas, ratios, xMatrix); 
xCircle.graphics.drawCircle(radius, radius, radius); 
 
var yCircle:Shape = new Shape(); 
yCircle.graphics.lineStyle(0, 0, 0); 
yCircle.graphics.beginGradientFill(type, blueColors, alphas, ratios, yMatrix); 
yCircle.graphics.drawCircle(radius, radius, radius); 
 
// Position the circles at the bottom of the screen, for reference. 
this.addChild(xCircle); 
xCircle.y = stage.stageHeight - xCircle.height; 
this.addChild(yCircle); 
yCircle.y = stage.stageHeight - yCircle.height; 
yCircle.x = 200; 
 
// 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); 
 
// Create the map image by combining the two gradient circles. 
var map:BitmapData = new BitmapData(xCircle.width, xCircle.height, false, 0x7F7F7F); 
map.draw(xCircle); 
var yMap:BitmapData = new BitmapData(yCircle.width, yCircle.height, false, 0x7F7F7F); 
yMap.draw(yCircle); 
map.copyChannel(yMap, yMap.rect, new Point(0, 0), BitmapDataChannel.BLUE, BitmapDataChannel.BLUE); 
yMap.dispose(); 
 
// Display the map image on the Stage, for reference. 
var mapBitmap:Bitmap = new Bitmap(map); 
this.addChild(mapBitmap); 
mapBitmap.x = 400; 
mapBitmap.y = stage.stageHeight - mapBitmap.height; 
 
// This function creates the displacement map filter at the mouse location. 
function magnify():void 
{ 
    // Position the filter. 
    var filterX:Number = (loader.mouseX) - (map.width / 2); 
    var filterY:Number = (loader.mouseY) - (map.height / 2); 
    var pt:Point = new Point(filterX, filterY); 
    var xyFilter:DisplacementMapFilter = new DisplacementMapFilter(); 
    xyFilter.mapBitmap = map; 
    xyFilter.mapPoint = pt; 
    // The red in the map image will control x displacement. 
    xyFilter.componentX = BitmapDataChannel.RED; 
    // The blue in the map image will control y displacement. 
    xyFilter.componentY = BitmapDataChannel.BLUE; 
    xyFilter.scaleX = 35; 
    xyFilter.scaleY = 35; 
    xyFilter.mode = DisplacementMapFilterMode.IGNORE; 
    loader.filters = [xyFilter]; 
} 
 
// This function is called when the mouse moves. If the mouse is 
// over the loaded image, it applies the filter. 
function moveMagnifier(event:MouseEvent):void 
{ 
    if (loader.hitTestPoint(loader.mouseX, loader.mouseY)) 
    { 
        magnify(); 
    } 
} 
loader.addEventListener(MouseEvent.MOUSE_MOVE, moveMagnifier);

Kod ilk önce iki degrade daire oluşturur ve daha sonra öteleme eşlemesi görüntüsünü oluşturmak için bu iki daire birleştirilir. Kırmızı daire, x ekseni ötelemesini ( xyFilter.componentX = BitmapDataChannel.RED ) ve mavi daire de y ekseni ötelemesini ( xyFilter.componentY = BitmapDataChannel.BLUE ) oluşturur. Öteleme eşlemesi görüntüsünün nasıl göründüğünü anlamanıza yardımcı olmak için, kod, ekranın en altına, eşleme görüntüsü görevi gören birleştirilmiş dairenin yanı sıra orijinal daireleri de ekler.

Daha sonra kod bir görüntü yükler ve fare hareket ettikçe, farenin altındaki görüntü kısmına öteleme filtresini uygular. Öteleme eşlemesi görüntüsü olarak kullanılan degrade daireler, ötelenen bölgenin işaretçiden uzağa yayılmasını sağlar. Öteleme eşlemesi görüntüsünün gri bölgelerinin herhangi bir ötelemeye neden olmadığına dikkat edin. 0x7F7F7F , gri renktir. Bu gri gölgesinin mavi ve kırmızı kanalları, bu renk kanallarının orta gölgesiyle tam olarak eşleşir, bu nedenle eşleme görüntüsünün gri alanında herhangi bir öteleme olmaz. Aynı şekilde, dairenin de ortasında öteleme olmaz. Buradaki renk gri olmasa da, bu rengin mavi kanalı ve kırmızı kanalı, orta grinin mavi kanalı ve kırmızı kanalıyla aynıdır ve ötelemeye neden olan renkler mavi ve kırmızı olduğundan, burada herhangi bir öteleme gerçekleşmez.

Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.