IslaVisual
Ultima revisión 04/11/2012
SVG Filters: Uso de feDisplacementMap (Mapas de desplazamiento)
Este efecto es un poco diferente de los demás en el sentido de que convierte los valores de color de los píxeles de una imagen en distorsiones geométricas de otra.
La primitiva feDisplacmentMap utiliza los canales de entrada in (SourceGraphic por defecto) e in2, y utiliza un canal especificado (R, G, B, o A) de in2 que sirven como valores de desplazamiento que determinan la dirección y la distancia de cada píxel en la que se moverán por los ejex X,Y.
Dicho de otra manera, utiliza los valores de píxeles de la imagen referenciada por in2 para desplazar espacialmente la imagen referenciada por in. Esta transformación se realiza mediante:
P'(x,y) <- P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
| Variable | Descripción |
|---|---|
| Es la imagen de entrada referenciada por in. | |
| Es la imagen destino referenciada por in2. | |
| Son los valores de los componentes definidos por el xChannelSelector y ChannelSelector. | |
| Es la unidad vectorial a medio camino entre el vector unitario del ojo (lo que decíamos antes de que se supone que estamos en el infinito en todas direcciones) e y el vector unitario de la luz. E=(0,0,1) que es una constante. H = (L + E) / Norm(L+E) dónde L es el vector unitario de la luz. |
|
| Son los componentes RGB de la luz, una función de x e y en el caso de la luz del punto. |
El mapa de desplazamiento se define la inversa de la cartografía realizada.
Los cálculos que usan los valores de los píxeles de in2 se realizan utilizando los valores no premultiplicados de color. Si la imagen de in2 se compone de valores de color premultiplicados, se convierten automáticamente en los no premultiplicados antes de realizar esta operación.
Este filtro puede tener un efecto no localizado arbitrario en la entrada que podría requerir un almacenamiento en búfer sustancial en la canalización de procesamiento. Dicho almacenamiento puede determinarse por la escala que representa el rango máximo de desplazamiento en X o Y.
Al aplicar este filtro, la ubicación de píxel de origen a menudo se encuentra entre varios píxeles de origen. En este caso, se recomienda que los visores de alta calidad apliquen una interpolente de los píxeles circundantes, por ejemplo bilineal o bicúbica, en lugar de simplemente seleccionar el píxel más cercano de origen. Dependiendo de la velocidad de los interpolentes disponibles, esta opción puede verse afectada por la configuración establecida en la propiedad image-rendering.
La propiedad color-interpolation-filters sólo se aplica a la imagen referenciada por in2 y no se aplica a la imagen original.
Ejemplo:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- SIN DEFINICIONES NI FILTROS -->
<!-- IMAGEN ORIGINAL -->
</defs>
<image id="feDisplacementMap_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href='../../img/svg-filters/butterfly_th.jpg' />
</svg>
De todos los operadores e in, probablemente son más útiles.
| Atributo | Definición |
|---|---|
| Es un número. Es el factor de escala de desplazamiento. La cantidad se expresa en el sistema de coordenadas establecido por primitiveUnits dentro del elemento filter. Su valor por defecto es 0. Cuando es 0, esta operación no tiene efecto sobre la imagen de origen. | |
| Indica el canal de in2 a utilizar para desplazar los píxeles de in a lo largo del eje x. Sus valores pueden ser R, G, B o A. | |
| Indica el canal de in2 a utilizar para desplazar los píxeles de in a lo largo del eje y. Sus valores pueden ser R, G, B o A. | |
| Son las imágenes de entrada. Se utilizan para desplazar los píxeles de desde in hasta in2. Pueden tomar los valores SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint y una referencia de filtro primitiva definida por el usuario. | |
| Son el ancho y alto de la zona dónde se aplicará el filtro de primitiva |
