Der primitive Filter feComponentTransfer
legt für jeden Bildpunkt einer einzelnen Fabe oder des Alphakanals einen
neuen Wert fest. Dieser neue Wert wird für jeden Farbkanal und für den
Alphakanal durch eine festgelegte
mathematische Funktion
berechnet. Auf diese Weise sind Veränderungen der Helligkeit, des Kontrast
oder der Farbbalance eines Input-Bildes möglich.
feComponentTransfer ist ein Container-Element.
Um den Bildpunkten aus jedem Farbkanal und dem Alphakanal einen
neuen Wert zuzuordnen, müssen Sie die Kind-Elemente von
feComponentTransfer verwenden:
Dabei müssen Sie nicht alle Kind-Elemente verwenden. Wenn Sie z.B. den Alphakanal
nicht verändern wollen, brauchen Sie das Element feFuncA nicht.
Jedem dieser Kind-Elemente sind die Attribute der
Attributgruppe component_transfer_function_attributes
zugeordnet. Diese Attribute werden im folgenden erläutert.
type
Voreinstellung: keine.
Mit diesem Attribut legen Sie die Funktion fest, die
bei Berechnung des neuen Farbwertes angewendet wird. Der
für type verwendete Wert legt die Anwendbarkeit
der weiteren Attribute fest. Nachfolgend ein Liste der
möglichen Werte, ihrer Bedeutung
und der daraufhin anzuwendenden Attribute.
-
identity -
übernimmt exakt den alten Wert des Bildpunkts.
-
table -
wendet als Funktion eine Tabellenfunktion (lineare Interpolation) an, deren Werte
durch das Attribut tableValues bestimmt werden müssen.
Dieser Wert eignet sich gut für Farbveränderungen.
-
discrete -
wendet eine Treppenfunktion (step function) an, deren
Werte ebenfalls durch das Attribut tableValues
bestimmt werden müssen.
Dieser Wert eignet sich für Farbveränderungen.
-
linear -
wendet eine lineare Funktion an, deren Steigung durch
das Attribut slope und das
Attribut intercept bestimmt werden muß.
Dieser Wert eignet sich gut für Veränderungen der Helligkeit.
-
gamma -
wendet eine Exponentialfunktion an, die
durch die Attribute amplitude,
exponent und offset
bestimmt werden muß.
Dieser Wert eignet sich gut für Kontrasteinstellungen.
tableValues
Voreinstellung: leer.
Zu verwenden bei den Funktionstypen table und
discrete.
Dieses Attribut akzeptiert als Wert eine durch Leerzeichen und/oder
getrennt Liste von Zahlen, wie z.B. 0 1 0 0, die
als Tabellenwerte für die mathematische Funktion verwendet werden.
Eine leere Liste bewirkt eine identische Ausgabe des Bildpunkts.
slope
Voreinstellung: 1.
Zu verwenden beim Funktionstyp linear.
Durch dieses Attribut legen Sie die Steigung bzw. einen Faktor für
die lineare Funktion fest. Als Wert ist eine Zahl zu verwenden.
intercept
Voreinstellung: 0.
Zu verwenden beim Funktionstyp linear.
Durch dieses Attribut legen Sie eine Verschiebungwert bzw. einen Summanden für
die lineare Funktion fest. Als Wert ist eine Zahl zu verwenden.
amplitude
Voreinstellung: 1.
Zu verwenden beim Funktionstyp gamma.
Durch dieses Attribut bestimmen Sie die Wellenlänge bzw. einen Faktor für
die Exponentialfunktion (gamma function). Als Wert ist eine Zahl zu verwenden.
exponent
Voreinstellung: 1.
Zu verwenden beim Funktionstyp gamma.
Durch dieses Attribut bestimmen Sie den Exponenten für
die Exponentialfunktion (gamma function). Als Wert ist eine Zahl zu verwenden.
offset
Voreinstellung: 0.
Zu verwenden beim Funktionstyp gamma.
Durch dieses Attribut bestimmen Sie eine Verschiebungswert bzw. einen Summanden für
die Exponentialfunktion (gamma function). Als Wert ist eine Zahl zu verwenden.
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 feComponentTransfer</title>
<desc>
Beispiele für die Verwendung von feComponentTransfer
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:16px;
font-weight:bold;}
]]>
</style>
<linearGradient id="verlauf"
x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="gray" />
<stop offset="1" stop-color="yellow" />
</linearGradient>
<symbol id="smilie">
<desc>ein lachendes Smilie</desc>
<circle id="gesicht" cx="20" cy="20" r="15"
fill="url(#verlauf)" 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>
<!-- 5 Filter mit feComponentTransfer -->
<filter id="f1">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 1 0 0" />
<feFuncG type="table" tableValues="0 1 1 0" />
<feFuncB type="table" tableValues="0 0 1 1" />
</feComponentTransfer>
</filter>
<filter id="f2">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="1 1 0 0" />
<feFuncG type="discrete" tableValues="0 1 1 0" />
<feFuncB type="discrete" tableValues="0 0 1 1" />
</feComponentTransfer>
</filter>
<filter id="f3">
<feComponentTransfer>
<feFuncR type="linear" slope=".3" intercept="0" />
<feFuncG type="linear" slope=".3" intercept="0" />
<feFuncB type="linear" slope=".3" intercept="0" />
</feComponentTransfer>
</filter>
<filter id="f4">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="0" />
<feFuncG type="linear" slope="2" intercept="0" />
<feFuncB type="linear" slope="2" intercept="0" />
<feFuncA type="linear" slope="1" intercept=".1" />
</feComponentTransfer>
</filter>
<filter id="f5">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="3" offset="0" />
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0" />
<feFuncB type="gamma" amplitude="2" exponent="3" offset="0" />
</feComponentTransfer>
</filter>
<filter id="f6">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="6" exponent="3" offset="0" />
<feFuncG type="gamma" amplitude="6" exponent="3" offset="0" />
<feFuncB type="gamma" amplitude="6" exponent="3" offset="0" />
</feComponentTransfer>
</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">feComponentTransfer</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Die obige Grafik zeigt Beispiele der verschiedenen
Funktionsarten von feComponentTransfer,
außer für identity, da bei Verwendung dieses
Wertes für das Attribut type innerhalb
der einzelnen Kind-Elemente, eine identische Ausgabe erzeugt wird.
Da die Effekte dieses primitiven Filters besser an einem Farbverlauf demonstriert
werden können, ist das smilie
in diesem Beispiel mit einem solchen gefüllt.
Der Filter f1 verwendet für die Farbkanäle R, G und B den Funktionstyp
table als Wert für type,
daher wird den jeweiligen Kind-Elementen außerdem
das Attribut tableValues mit eine Liste von Zahlwerten zugeordnet.
Die Farbbalance wird verändert.
Der Filter f2 verwendet für die Farbkanäle R, G und B den Funktionstyp
discrete als Wert für type,
daher wird den jeweiligen Kind-Elementen außerdem
das Attribut tableValues mit einer Liste von Zahlwerten zugeordnet.
Die Farbbalance wird stufenweise verändert. Die Farbübergänge gehen verloren.
Der Filter f3 verwendet für die Farbkanäle R, G und B den Funktionstyp
linear als Wert für type,
daher werden den jeweiligen Kind-Elementen außerdem
die Attribute scope und intercept
zugeordnet.
Die Helligkeit des Bildes wird nach dunkler verändert.
Der Filter f4 verwendet für die Farbkanäle R, G, B und
den Alphakanl
ebenfalls den Funktionstyp
linear als Wert für type. Auch
in diesem Fall werden
den jeweiligen Kind-Elementen außerdem
die Attribute scope und intercept
zugeordnet.
Die Helligkeit des Bildes wird nach heller verändert.
Durch Einbeziehung des Alphakanals wird ein hellgrauer Hintergrund erzeugt.
Die Filter f5
und f6 verwenden
für die Farbkanäle R, G und B den Funktionstyp
gamma als Wert für type,
daher werden den jeweiligen Kind-Elementen außerdem
die Attribute amplitude, exponent
und offset zugeordnet.
Der Kontrast des Bildes wird verändert.
Die Leuchtkraft nimmt zu.
Durch verschiedenste Attributwerte innerhalb des primitiven Filters
feComponentTransfer bzw. seiner Kind-Elemente
können für alle durch type bestimmten Funktionsarten
die verblüffensten Resultate erzielt werden.
Test it! :-)
|