Kategorien
HTML/CSS JavaScript & jQuery Webdesign

So gehts: Kreismarkierungen mit Traceit.js und jQuery

Bei klassischen Präsentationen auf Whiteboards oder Flipcharts werden wichtige Schlagworte gerne mal eingekreist, um sie hervorzuheben. Mit dem jQuery-Plugin „traceit.js“ lässt sich diese Möglichkeit der Hervorhebung und Markierung auf Webprojekte übertragen. Ohne großen Aufwand werden beliebige HTML-Elemente mit einem Kreis umzingelt, der an von Hand gezeichnete Einkreisungen erinnert. Vor allem bei Tutorials lassen sich mit „traceit.js“ sehr einfach und effektiv Bereiche auszeichnen, auf die man aufmerksam machen möchte.

traceitjs-teaser_DE

 Traceit.js einbinden und einsetzen

Um „traceit.js“ einzusetzen, muss neben jQuery auch die JavaScript-Bibliothek „Raphaël“ eingebunden sein, da das Plug-in für die Kreise die SVG-Zeichenmethoden von „Raphaël“ verwendet. Alternativ steht auch eine kombinierte JavaScript-Datei zur Verfügung, die sowohl das Plug-in als auch die „Raphaël“-Bibliothek beinhaltet.

traceit

Sind die JavaScript-Dateien eingebunden, kann ein beliebiger Inhalt wie folgt eingekreist werden.

<p><span id="schlagwort">Schlagworte</span> sollten immer auffallen.</p>

Im Beispiel soll der Inhalt eines „<span>“-Elementes mit einer Einkreisung versehen werden. Dazu wird eine ID vergeben, die „traceit.js“ übergeben wird, um das Plug-in darauf anzuwenden.

$("#schlagwort").trace();

traceitjs-standard
Standard-Einkreisung

Das Plug-in sorgt dafür, dass der Inhalt entsprechend seiner Größe eingekreist wird. Dabei sind die Einkreisungen nicht auf Textelemente beschränkt. Auch auf Bilder lässt sich „traceit.js“ anwenden. Problematisch wird es lediglich, wenn mehrere Wörter eingekreist werden sollen und diese sich über mehrere Zeilen erstrecken. Ansonsten berechnet das Plug-in sehr zuverlässig die Größe des einzukreisenden Elementes.

Aussehen der Umkreisung anpassen

Standardmäßig werden Elemente mit einer grünen, dünnen Linie versehen. Per „traceOpt“ lässt sich das Aussehen der Linie jedoch individuell anpassen. Neben Linienfarbe und -stärke kann auch eine Füllfarbe angegeben werden.

$("#schlagwort").trace({
  traceOpt {
    "stroke": "red";
    "stroke-width": 5,
    "stroke-opacity": 0.5,
    "fill": "yellow",
    "fill-opacity": 0.25,
    "z-index": -1,
    "stroke-linecap": "round"
  }
});

Im Beispiel wird eine fünf Pixel starke rote Linie gezeichnet. Diese hat eine 50-prozentige Opazität. Gefüllt wird der Kreis mit einer gelben Fläche mit einer 25-prozentigen Opazität. Auch die Position der Linie kann per „z-index“ definiert werden. Für die Darstellung der Linie können alle CSS-Eigenschaften verwendet werden, die das SVG-Format kennt. So kann man zum Beispiel per „stroke-linecap“ die Linien mit abgerundeten Anfangs- und Endpunkten versehen. Das macht die Umkreisung noch etwas realistischer.

traceitjs-individuell
Individuelle Einkreisung

Standardmäßig wird die Linie über das jeweilige Element gelegt. Im Beispiel wird sie dahinter platziert. Von Hand gezeichnete Kreise liegen logischerweise immer über den Inhalten. Hier und da kann es aufgrund der Lesbarkeit – vor allem bei Texten – sinnvoll sein, den Kreis hinter den Inhalt zu zeichnen. Vor allem bleibt der Inhalt dann auch auswählbar.

Da „traceit.js“ handgezeichnete Kreise nachahmt, stimmen Anfangs- und Endpunkt des Kreises beziehungsweise der Ellipse nicht überein. Mit der Option „traceCanvasPadding“ kann man die Differenz zwischen den beiden Punkten angeben. Bei einem Wert von 0 wird quasi eine perfekte Ellipse gezeichnet. Bei Werten darüber wird die Ellipse nicht geschlossen. Per „redrawSpeed“ wird die Geschwindigkeit der Kreiszeichnung angegeben. Für eine realistische Darstellung sollte man „traceCanvasPadding“ und „redrawSpeed“ immer gemeinsam ändern. Denn je schneller man mit der Hand etwas einkreist, desto höher ist meist der Abstand zwischen Anfangs- und Endpunkt des Kreises beziehungsweise der Ellipse.

Umkreisung als SVG-Element gezeichnet

Die Umkreisung selbst wird – wie bereits erwähnt –  als SVG-Element per „Raphaël“ realisiert. Dazu wird ein SVG-Element innerhalb eines „<div>“-Containers platziert. Dieser Container erhält eine ID bestehend aus der ID des zu umkreisenden Elementes – im Beispiel „schlagworte“ – gefolgt von der Zeichenkette „_wrap“. Per „traceDivPref“ kann man auch die Benennung dieses Containers ändern. Das kann sinnvoll sein, wenn die generierten IDs bereits anderweitig vergeben sind.

Die Positionierung der Umkreisung erfolgt per Stylesheets über den „<div>“-Container. Da dieser über die ID erreichbar ist, können Position und Aussehen der Umkreisung auch individuell über CSS noch geändert werden. So ist das SVG-Element standardmäßig so per Inline-CSS ausgezeichnet, dass überstehende Inhalte ausgeblendet werden („overflow: hidden“). Das führt teilweise dazu, dass das Ende der Linie nicht immer dargestellt wird, da es aus der Zeichenfläche ragt. Per Stylesheets lässt sich dies überschreiben.

#schlagwort_wrap svg {
  overflow: visible !important;
}

So erreicht man, dass die gezeichnete Ellipse immer komplett sichtbar ist.

Verhalten für die Umkreisung definieren

Um eine Einkreisung wieder verschwinden zu lassen, genügt ein Klick darauf. Dann wird diese dezent ausgeblendet. Alternativ kann man die Linienzeichnung auch per „trigger()“-Methode ausblenden.

$("#schlagwort").trigger("hide.trace");

„traceit.js“ stellt zudem drei Callbacks zur Verfügung. Diese ermöglichen es, eine Funktion auszuführen, wenn die Animation abgeschlossen ist („onEndTrace“), wenn ein Klick auf die Einkreisung erfolgt („onClick“) oder wenn diese ausgeblendet wurde („onHide“).

$("#schlagwort").trace({
  onEndTrace: function() {
    alert("Umkreisung abgeschlossen.");
  }
});

Im Beispiel wird ein Alert ausgegeben, sobald die Einkreisung gezeichnet wurde.

Fazit

„traceit.js“ ist schnell eingebunden und angewendet. Gerade wenn es darum geht, die Aufmerksamkeit auf ein bestimmtes Element zu lenken, hat man mit dem Plug-in eine einfache Möglichkeit, dies dezent und ansprechend zu tun.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Eine Antwort auf „So gehts: Kreismarkierungen mit Traceit.js und jQuery“

Schöner Artikel! Habs gleichmal in meine Übersichtsliste aufgenommen. Ich kann mir vorstellen, dass es sich für „How-To“-Erklärungen optimal eignet. Über ein Klick wird ein leicht dunkler Layer über die Website gezogen und die wichtigen Eingabefelder per traceit markiert und erklärt. Sollte ich in der Zukunft Bedarf haben, werde ich es definitiv so ausprobieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.