Dokumentation (canvas.quaese.de)

Anwendungen - Multiline für <canvas> (jQuery PlugIn)

Das <canvas>-Element stellt gemäß HTML5-Spezifikation ein Text-Modul zur Verfügung. Aktuelle Browser unterstützen das mittlerweile nativ. Für Internet Explorer vor Version 9 und sonstige ältere Browser steht das Script canvas.text zur Verfügung, das die Funktionalität nachbildet.

Bedauerlicher Weise stellt das Modul lediglich die Funktionalität für einzeilige Texte zur Verfügung. Mehrzeilige Inhalte bleiben außen vor und müssen selbst implementiert werden.

Mit dem hier vorgestellten jQuery-PlugIn dieses Manko behoben. Neben der Multiline-Funktionalität werden einige zusätzliche Features wie Textausrichtung oder Drehung um unterschiedliche Rotationspunkte integriert.

Download

Soll die Funktionalität auch im Internet Explorer vor Version 9 verfügbar gemacht werden, muss das explorercanvas-Script eingebunden werden. Dieses steht unter nachstendem Link zum Download bereit.

explorercanvas.js

Zudem ist für einige Browser das bereits erwähnte canvas.text-Script notwendig.

canvas.text

Beispiel

Das Beispiel zeigt das Verhalten, das mit dem mulitline-PlugIn erreicht werden kann. Im linken Dialogfeld können unterschiedliche Inhalte/Optionen gewählt werden. Mit der Anwenden-Schaltfläche werden sie in das <canvas>-Element gezeichnet.

Mehrzeiliger Text:

Hallo Welt hier ist eine zweite Zeile und eine dritte.

Drehung (in °):

°, um

Ausrichtung:

Position:

x: y:

Quellcode-Beispiel

$('#canvas_id')
  .canvas()
    .fillStyle('#000')
    .multiline({
      x: 10,
      y: 10,
      phi: 0,
      text: "qpCanvas.multiline\njQuery PlugIn\n(by Quaese)",
      font: "24px Lobster",
      align: 'center',
      delimiter: "\n",
      rp: 'c',
      style: 'fillText'
    })

Schreibt einen zentrierten dreizeiligen Text ohne Drehung an die Koordinaten (0, 0) des <canvas>-Elements.

Integration in die Seite

Um korrekt zu funktionieren, müssen diverse Vorbereitungen getroffen werden. Diese werden nun beschrieben.

HTML

Zur Anzeige wird das HTML5-Element <canvas> verwendet. Dieses muss entweder bereits im Dokument existieren

<canvas id="canvas_id"></canvas>

oder muss mittels JavaScript eingefügt werden.

$('<canvas />').appendTo('body'); // Beispiel für jQuery

CSS

Um unterschiedliche Schriftfamilien zu unterstützen, werden diese mit Hilfe von CSS3 und @facefont eingefügt. Manche Browser wie Internet Explorer vor Version 9 unterstützen das native Text-Modul nicht und müssen deshalb mit einem speziellen Font-File bedacht werden (siehe externes JavaScript). Weitere Informationen hierfür finden sich auf der Projektseite zu canvas.text. Zum Erstellen der Font-Files noch zwei Links:

Externes JavaScript

Als nächstes im head-Bereich des Dokuments neben dem jQuery-Framework das benötigte Multiline-PlugIn als externe JS eingebunden. Damit stehen das neue Objekt und dessen Funktionalität zur Verfügung.

Soll der Internet Explorer unterstützt werden, wird an dieser Stelle außerdem explorercanvas eingebunden.

Soll zudem das Text-Modul für den Internet Explorer verfügbar sein, wird es ebenfalls eingebunden.

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
  <script type="text/javascript" src="canvas.text.js"></script>
  <script type="text/javascript" src="lobster_regular.js"></script>
<![endif]-->
<script src="qp_multiline.canvas.jquery.js" type="text/javascript"></script>

Inline-JavaScript

Im onload-Event des Dokuments, sequentiell nach dem <canvas>-Element oder nachdem das <canvas>-Element programmatisch eingefügt wurde, können die gewünschten Methoden verwendet werden.

$(canvas_element).canvas().multiline(optionen);

Optionen

Die multiline-Methode unterstützt die nachstehenden Optionen:

x

Horizontale Koordinate, an der der Text beginnen soll.

Datentyp: integer, default: 0
y

Vertikale Koordinate, an der der Text beginnen soll.

Datentyp: integer, default: 0
style

Bestimmt die Methode, die zum Zeichnen des Textes verwendet werden soll. Zur Verfügung stehen fillText (gefüllter Text) und strokeText (Umrißlinien des Textes).

Datentyp: string, default: fillText
font

Bestimmt die Verwendete Schriftart und dessen Grösse. Die angabe erfolgt über eine CSS-gültige Zeichenkette.

Datentyp: string, default: 12px Arial
phi

Drehwinkel in Grad

Datentyp: float, default: 0
rp

Lage des Drehpunkts
Zur Verfügung stehen nw (oben links), n (oben mitte), ne (oben rechts), w (mitte links), c (mitte), e (mitte rechts), sw (unten links), s (unten mitte), se (unten rechts)

Datentyp: string, default: c
delimiter

Zeichenkette, die das Ende einer Zeile repräsentiert.

Datentyp: string, default: \n
align

Dient zur Steuerung der horizontalen Textausrichtung (mögliche Werte: left, center, right).

Datentyp: string, default: left

Methoden und Eigenschaften

Das PlugIn stellt zudem zahlreiche native Methoden (z.B. save, fillRect, clearRect) und Eigenschaften (z.B. fillStyle, strokeStyle) des <canvas>-Elements zur Verfügung.

Dabei sind die Eigenschaften als getter und setter implementiert, so dass das Setzen und Auslesen eines Wertes über die gleiche Funktionalität erfolgt.

$(canvas_element).canvas().fillStyle('#f00'); // setzt den Wert (setter)
$(canvas_element).canvas().fillStyle();       // liest den aktuellen Wert aus (getter)

Optionen für das canvas-PlugIn

Derzeit werden keine Optionen für das canvas-PlugIn unterstützt. Geplant sind jedoch Breite, Höhe, CSS-Formatierung und weitere Konfigurationsmöglichkeiten.

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

IE 6+
Firefox 2+
Opera 9+
Mozilla 1.5+
Safari (Win) 3+
Google Chrome