|
Der primitive Filter feDisplacementMap
verwendet Bildpunkte eines zweiten Input-Bildes um
ein erstes Input-Bild räumlich zu verschieben.
Das zweite Input-Bild wird durch das Attribut in2
bestimmt. Dabei kann dieses Attribut den gleichen Wert wie
das Attribut in annehmen.
Wenn Sie nichts anderes festlegen, arbeitet der Filter
standardmäßig mit den Alphawerten des zweiten Input-Bildes.
Durch die Attribute xChannelSelector
und yChannelSelector
können Sie aber auch dafür sorgen, dass die Werte der Farbkanäle für
die Verschiebung entlang der x- bwz. y-Achse verwendet werden. Daher sind
die akzeptierten Werte für dieses Attribut:
A (der voreingestellte Wert Alpha),
R (rot), G (grün)
und B (blau).
Den Verschiebungsfaktor legen Sie durch das Attribut
scale fest.
Voreingestellter Wert für scale ist 0.
Beachten Sie: Beim Wert 0 hat die Filteroperation keinen Effekt
auf die Grafik. Weisen Sie diesem Attribut daher immer einen numerischen
Wert ungleich 0 zu.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Der primitive Filter feDisplacementMap</title>
<desc>
Beispiele für die Verwendung von feDisplacementMap
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:16px;
font-weight:bold;}
]]>
</style>
<symbol id="smilie">
<desc>ein lachendes Smilie</desc>
<circle id="gesicht" cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<circle id="auge-links" cx="15" cy="15" r="2"
fill="black" stroke="black" />
<circle id="auge-rechts" cx="25" cy="15" r="2"
fill="black" stroke="black" />
<line id="nase" x1="20" y1="18" x2="20" y2="23"
stroke="black" stroke-width="2" />
<path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</symbol>
<!-- 6 Filter mit feDisplacementMap -->
<filter id="f1">
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
scale="1" />
</filter>
<filter id="f2">
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
scale="2" />
</filter>
<filter id="f3">
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
xChannelSelector="R" yChannelSelector="A" scale="1.3" />
</filter>
<filter id="f4">
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
xChannelSelector="B" yChannelSelector="R" scale="2" />
</filter>
<!-- zusätzlich mit feTurbulence -->
<filter id="f5">
<feTurbulence baseFrequency=".5" type="fractalNoise" result="out1" />
<feDisplacementMap in="SourceGraphic" in2="out1"
scale="5" />
</filter>
<filter id="f6">
<feTurbulence baseFrequency=".5" type="turbulence" result="out1" />
<feDisplacementMap in="SourceGraphic" in2="out1"
scale="5" />
</filter>
</defs>
<!-- die Instanzen des Symbols "smilie" -->
<use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
<use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
filter="url(#f1)" />
<use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
filter="url(#f2)" />
<use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
filter="url(#f3)" />
<use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
filter="url(#f4)" />
<use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
filter="url(#f5)" />
<use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
filter="url(#f6)" />
<!-- Text und Hilfslinien -->
<text x="145" y="130">feDisplacementMap</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Die ersten beiden Filter f1 und f2
des obigen Beispiels verwenden SourceGraphic
für beide Input-Bilder des primitiven Filters
feDisplacementMap. Da die Attribute
xChannelSelector
und/oder yChannelSelector nicht gesetzt sind, werden
die Alphawerte des zweiten Input-Bildes SourceGraphic zur
Berechnung der räumlichen Verschiebung verwendet. Man hätte also ebenso
den Wert SourceAlpha für das Attribut in2
verwenden können.
Die Filter f1 und f2
unterscheiden sich lediglich durch
einen unterschiedlichen Skalierungsfaktor.
Bei den Filteren f3 und f4 werden die
Farbkanäle für die Verschiebungswerte
durch die Verwendung der Attribute
xChannelSelector und yChannelSelector
verändert.
In den letzten beiden Filtern f5 und
f6 wird
als zweites Input-Bild der Output des primitiven Filters
feTurbulence verwendet.
Dieser primitive Filter erzeugt entweder ein Fraktal
oder eine Turbulenz und füllt dann die Region des referenzierenden Elements
komplett mit dem Output-Bild auf. Der nachfolgende primitive Filter
feDisplacementMap verwendet dann die Alphawerte dieses Outputs um
eine Verschiebung zu berechnen. Das so erzeugte Bild, d.h. der Output
von DisplacementMap wird dann am Bildschirm dargestellt.
| 
