Filtro de mapa de deslocamentoFlash Player 9 e posterior, Adobe AIR 1.0 e posterior A classe DisplacementMapFilter usa valores de pixel de um objeto BitmapData (conhecido como a imagem do mapa de deslocamento) para realizar um efeito de deslocamento em um novo objeto. A imagem do mapa de deslocamento normalmente é diferente do objeto de exibição ou da ocorrência de BitmapData real no qual o filtro está sendo aplicado. Um efeito de deslocamento envolve a movimentação de pixels nas imagem filtrada - em outras palavras, deslocá-los do local original para alguma posição. Esse filtro pode ser usado para criar um efeito alterado, distorcido ou matizado. O local e a quantidade de deslocamento aplicados em um determinado pixel são especificados pelo valor de cor da imagem do mapa de deslocamento. Ao trabalhar com o filtro, além de especificar a imagem do mapa, você especifica os seguintes valores para controlar como o deslocamento é calculado a partir da imagem do mapa:
Para entender o funcionamento do filtro do mapa de deslocamento, considere um exemplo simples. No código a seguir, uma imagem é carregada e, em seguida, centralizada no palco. Um filtro de mapa de deslocamento é aplicado, fazendo com que os pixels da imagem inteira mudem horizontalmente para a esquerda. 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);
As propriedades usadas para definir o deslocamento são as seguintes:
Essas configurações fazem com que os pixels da imagem filtrada sejam deslocados 250 pixels para a esquerda. A direção (esquerda ou direita) e o valor do deslocamento baseiam-se no valor de cor dos pixels da imagem do mapa. Conceitualmente, o filtro percorre cada pixel da imagem filtrada (pelo menos os pixels da região onde o filtro é aplicado que, nesse caso, são todos os pixels) e faz o seguinte com cada pixel:
Como nenhum valor foi especificado para o componente e a escala y, os padrões (que não provocam nenhum deslocamento) foram usados; é por esse motivo que a imagem não é alterada na vertical. A configuração padrão do modo de filtro, WRAP, é usada no exemplo, de modo que os pixels se movem para a esquerda e o espaço vazio à direita é preenchido pelos pixels que se deslocaram da margem esquerda da imagem. Você pode experimentar esse valor para ver os diferentes efeitos. Por exemplo, se você adicionar a linha a seguir à parte do código onde as propriedades de deslocamento estão sendo definidas (antes da linha loader.filters = [displacementMap]), a imagem parecerá ter sido manchada ao longo do palco: displacementMap.mode = DisplacementMapFilterMode.CLAMP; Em exemplos mais complexos, a listagem a seguir usa um filtro de mapa de deslocamento para criar um efeito de lupa em uma imagem: 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);
Primeiro, o código gera dois círculos de gradiente, que são combinados para formar a imagem do mapa de deslocamento. O círculo vermelho cria o deslocamento do eixo x (xyFilter.componentX = BitmapDataChannel.RED) e o círculo azul cria o deslocamento do eixo y (xyFilter.componentY = BitmapDataChannel.BLUE). Para ajudar você a entender como se parece a imagem do mapa de deslocamento, o código adiciona os círculos originais, bem como o círculo combinado que serve como a imagem do mapa, à parte inferior da tela.  Em seguida, o código carrega uma imagem e, à medida que o mouse se move, aplica o filtro de deslocamento na parte da imagem que está embaixo do mouse. Os círculos de gradiente usados como a imagem do mapa de deslocamento fazem com que a região deslocada se distancie do ponteiro. Observe que as regiões de cinza da imagem do mapa não provocam nenhum deslocamento. A cor de cinza é 0x7F7F7F. Os canais azul e vermelho dessa sombra de cinza correspondem exatamente à sombra central desses canais de cor, de modo que não há nenhum deslocamento em uma área de cinza da imagem do mapa. Do mesmo modo, não há nenhum deslocamento no centro do círculo. Embora a cor não seja cinza, os canais azul e vermelho dessa cor são idênticos aos canais azul e vermelho do cinza médio e, como azul e vermelho são as cores que provocam o deslocamento, não ocorre nenhum deslocamento aqui.
|
|
