Dokumentation (canvas.quaese.de)
 

Anwendungen - Reflexion (qpReflexion)

Um Grafiken und Bilder in HTML-Dokumenten aufzuwerten, werden sie häufig mit einer Reflexion versehen. Das Orginalbild wird dazu vertikal gespiegelt und nach unten ausgefadet. Um derartiges Verhalten zu realisieren, kann das <canvas>-Element verwendet werden. Um dem Internet Explorer gerecht zu werden, kann hier das gleiche durch die Verwendung der filter-Eigenschaft umgesetzt werden.

Update [05.08.2009]:

Wird ein Bild mit der CSS-Eigenschaft display: none ausgezeichnet, wird nur dessen Reflexion angezeigt.

Update [24.05.2009]:

Script läuft jetzt auch im IE 8 fehlerfrei

Demonstration

Die Bilder wurden wie oben beschrieben durch ein JavaScript zunächst vertikal gespiegelt und anschliessend ausgefadet.

Reflexion Reflexion Reflexion

Reflexion (Klasse qpReflexion)

Wird ein Reflexionsobjekt erstellt, so kann dies mit einem optionalen Argument erfolgen. Dieses kann Reflexionsparemeter enthalten, welche die Länge der Spiegelung, sowie deren Start- und Endtransparenz konfigurieren.

objReflexion = new qpReflexion([objAttr])

Parameter

objAttr (optional)

Es kann ein Objekt mit maximal drei Eigenschaften (len, start, end) übergeben werden:

objAttr = {len: wert1, start: wert2, end: wert3}
  • len - Länge der Reflexion (wert1 = 0.0 bis 1.0)
  • start - Transparenz am Anfang der Reflexion (wert2 = 0.0 bis 1.0)
  • end - Transparenz am Ende der Reflexion (wert3 = 0.0 bis 1.0)

Beispiel

Die Länge der Reflexion wird auf die Hälfte des Bildes (len: 0.5) festgelegt. Zu Beginn gibt es keine Transparenz (start: 1.0) und am Ende ist die Reflexion komplett transparenz (end: 0.0).

objReflexion = new qpReflexion({len: 0.5, start: 1.0, end: 0.0})

Reflexion einbinden

Um den obigen Effekt zu erreichen, sind nur wenige Schritte notwendig. Alle Bilder, die mit dem Reflexionseffekt versehen werden, werden durch andere Elemente ersetzt. In IEs sind das SPAN-Konstrukte, in Browsern, die das <canvas>-Element kennen, canvas-Container. Das hat zur Folge, dass bisherige CSS-Formatierungen eventuell nicht mehr greifen und angepasst werden müssen. Um eine Möglichkeit zur Verfügung zu stellen, werden die Elemente mit der CSS-Klasse refl-class ausgezeichnet.

1. Script einbinden

Zunächst muss das notwendige JavaScript eingebunden werden. In komprimierter Form hat das Script lediglich eine Grösse von 4kB.

<!--[if IE]>
  <script type="text/javascript" src="qp_reflexion.js"></script>
<![endif]-->

2. Bilder auszeichnen

Bilder, die mit dem Reflexions-Effekt behandelt werden sollen, müssen in der Ausgangskonfiguration mit dem Attribut rel und dem Wert reflexion ausgezeichnet werden.

<img src="bild.gif" rel="reflexion" />

3. Objekt instanziieren

Mit dem Instanziieren eine Reflexionsobjektes werden alle Bilder mit dem Reflexions-Effekt versehen, die mit dem in Punkt 2 beschriebenen Attribut ausgezeichnet wurden. Das Erstellen des Objekts muss erfolgen, wenn die Bilder geladen wurden. D.h. entweder im Dokument nach den Bildern die bearbeitet werden sollen oder im onload-Event.

window.onload = function(){
  objReflexion = new qpReflexion();
}

Manuelles Aufrufen

Das Script bietet auch die Möglichkeit, Bildelemente manuell mit dem Reflexionseffekt zu versehen. Hierfür steht die Methode Reflect zur Verfügung.

qpReflexion.Reflect(objArg)

Parameter

objArg

Dem Argument kann ein einzelnes Bildobjekt oder ein Array mit Bildobjekten übergeben werden.

Beispiel

// Einzelnes Bildobjekt
objReflexion.Reflect(document.getElementById('bild1_id'));

// Array aus Bildobjekten
objReflexion.Reflect([document.getElementById('bild2_id'),
                      document.getElementById('bild3_id')]);

Einzelnes Bildobjekt (Bild anklicken)

Reflexion

Array mit Bildobjekten [Klick!]

Reflexion Reflexion Reflexion

Reflexion konfigurieren

Das Script bietet weiterhin die Möglichkeit, die Reflexion zu konfigurieren. So kann festgelegt werden, welche Start- und Endtransparenz das Spiegelbild haben soll und wie weit es gehen soll.

qpReflexion.setAttributes(objAttr)

Parameter

objAttr

Es kann ein Objekt mit maximal drei Eigenschaften (len, start, end) übergeben werden:

objAttr = {len: wert1, start: wert2, end: wert3}
  • len - Länge der Reflexion (wert1 = 0.0 bis 1.0)
  • start - Transparenz am Anfang der Reflexion (wert2 = 0.0 bis 1.0)
  • end - Transparenz am Ende der Reflexion (wert3 = 0.0 bis 1.0)

Beispiel

Die Länge der Reflexion wird auf die Hälfte des Bildes (len: 0.5) festgelegt. Zu Beginn gibt es keine Transparenz (start: 1.0) und am Ende ist die Reflexion komplett transparenz (end: 0.0).

objReflexion.setAttributes({len: 0.5, start: 1.0, end: 0.0})

Attribute setzen (Bild anklicken)

Reflexion

Erweiterte Konfiguration

Die erweiterte Konfiguration wird nur erfahrenen Benutzern empfohlen, da hier direkter Eingriff in die Reflexions-Klasse nötig wird.

function qpReflexion(){
  this.IDName    = "reflexion";  // Name, der Bilder identifiziert, die reflektiert werden sollen
  this.AttrName  = "rel";        // Attribut, in dem Bilder identifiziert werden
  this.ReflWidth = 0.8;          // Wie weit soll Reflexion gehen 0.0 .. 1.0
  this.StartOpac = 0.7;          // Start-Transparenz (0.0 .. 1.0), 0=volle Transp., 1=keine Transp.
  this.EndOpac   = 0.0;          // End-Transparenz (0.0 .. 1.0), 0=volle Transp., 1=keine Transp.

  // Weitere Klassendefinitionen
};

Hier können neben den bereits beschriebenen Attributen (Länge, Start- und Endtransparenz) auch festgelegt werden, welches Attribut (this.AttrName) und welcher Wert (this.IDName) ausgewertet werden soll, um die Bilder zu identifizieren, die mit einer Reflexion versehen werden sollen. Voreingestellt sind hier rel und reflexion.

Vorhandene CSS-Eigenschaften

Die CSS-Eigenschaften, mit denen das Ausgangsbild ausgezeichnet ist, werden so weit wie möglich in das neue Element übernommen. Über die CSS-Klasse refl-class können verloren gegangene Eigenschaften wieder zugefügt werden.

Reflexion

Reflexion ohne Orginalbild

Das folgende Bild wurde mit der CSS-Eigenschaft display: none ausgezeichnet. Dieses Vorgehen hat zur Folge, dass nur die Reflexion angezeigt wird.

Getestete Browser

Die nachstehende Liste hat keinen Anspruch auf Vollständigkeit. Vielmehr handelt es sich um eine Aufzählung der Programme, in denen das Script erfolgreich getestet werden konnte. Sollte die Routine auch in nicht aufgelisteten Browsern laufen, können mir die Namen sowie die Versionsnummer über die E-Mail-Adresse im Impressum zugesandt werden.

  • Firefox 1.5+
  • Seamonkey
  • IE 5.5+
  • Opera 9+
  • Safari 3.0 (Win)

Download

 
Dokument zuletzt modifiziert: 19.02.2011, 15:04 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap