HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Die Zeichenfunktionen von Canvas sind durchaus umfangreich und erlauben das Erstellen komplexer Formen und Animationen. Allerdings ist eine Kombination mehrerer Methoden notwendig, um beispielsweise eine Form zu erstellen, zu drehen und mit einer Farbe zu füllen. Die JavaScript-Bibliothek „Fabric.js“ vereinfacht die Möglichkeiten von Canvas und stellt Funktionen bereit, die gerade für komplexe Form- und Animationserstellungen Arbeitserleichterungen bringen. Außerdem sind Animationen und Interaktionen schnell eingerichtet und angewendet.

fabricjs

Fabric.js: Statt mehrerer Methoden nur eine

Ist „Fabric.js“ im Headbereich des HTML-Dokumentes eingebunden und ein „<canvas>“-Element angelegt, können wir schnell eine erste Form zeichnen. Zunächst erstellen wir ein neues „Fabric.js“-Objekt und weisen es einem „<canvas>“-Element zu – im Beispiel dem Element mit der ID „fabricjs“. Per „fabric.Canvas()“ lassen sich auch grundsätzliche Einstellungen für das „<canvas>“-Element vornehmen. So ist es möglich, die Hintergrundfarbe der Zeichenfläche zu bestimmen.

var leinwand = new fabric.Canvas("fabricjs", {
  backgroundColor: "seashell"
});

Anschließend können unterschiedliche Formen wie Rechtecke, Kreise, Polygone sowie Texte gezeichnet und gestaltet werden.

var rechteck = new fabric.Rect({
  left: 75,
  top: 25,
  fill: "saddlebrown",
  stroke: "yellowgreen",
  strokeWidth: 3,
  width: 100,
  height: 200,
  angle: 20,
  shadow: "black 3px 3px 6px"
});

Im Beispiel definieren wir per „fabric.Rect()“ ein Rechteck. Alle Angaben wie Position, Größe, Farbe, Rahmen, Drehung und Schatten übergeben wir dabei als Parameter. Mit den klassischen Zeichenfunktionen von Canvas wären mehrere Methoden notwendig, um eine Form in dieser Art zu definieren.

Angaben für Farben und Schatten deklarieren wir, wie es von CSS bekannt ist. Entsprechend sind auch Farbangaben als Hexadezimalwert oder als „rgb()“ beziehungsweise „rgba()“ möglich.

fabricjs_beispiel1
Auf die Leinwand gezeichnetes Rechteck

Auch das spätere Ändern einzelner Eigenschaften ist per „set()“ möglich.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
rechteck.set({
  angle: -20,
});

Im Beispiel wird der Winkel des Rechtecks nachträglich verändert. Als letzte Methode sorgt „add()“ dafür, dass die Form auf die Leinwand gezeichnet wird.

leinwand.add(rechteck);

Drag & Drop & mehr: Formen sind standardmäßig interaktiv

Alle per „fabric.Canvas()“ angelegten Formen sind standardmäßig interaktiv. Das heißt, sie lassen sich mit der Maus anfassen und verschieben, skalieren sowie drehen. Klickt man eine Form an, erscheinen automatisch entsprechende Anfasser, über welche die unterschiedlichen Funktionen per Maus ausgeführt werden können.

Das Aussehen der Anfasser kann einfach per „set()“ verändert werden.

rechteck.set({
  borderColor: "royalblue",
  cornerColor: "midnightblue",
  cornerSize: 10
});

Will man explizit keine Interaktionen mit den Formen erlauben, besteht die Möglichkeit, die Methode „fabric.StaticCanvas()“ einzusetzen. Dadurch erhält man statische Formen, bei denen keine Interaktion möglich ist.

var leinwand = new fabric.StaticCanvas("fabricjs");

Dank eigener Events kann beispielsweise programmlogisch auf die Veränderung einer Form reagiert werden.

rechteck.on("modified", function() {
  rechteck.set({
    fill: "red"
  })
});

Im Beispiel weisen wir dem Rechteck das Event „modified“ zu. Es wird immer dann ausgelöst, wenn die Form bewegt, gedreht oder skaliert wird. Es gibt auch Events, die nur auf bestimmte Veränderungen reagieren – zum Beispiel „rotating“, „scaling“ und „moving“, die bei Drehung, Skalierung oder Verschiebung reagieren.

fabricjs_beispiel2
Rechteck mit Anfassern zum Verschieben, Skalieren und Drehen

Auch klassische Events wie „moving“ und „mouseup“ kennt „Fabrics.js“. Mit der Methode „get()“ ist es zudem möglich, Werte für Eigenschaften einer Form abzufragen. Das ist vor allem dann interessant, wenn eine Forme wie beschrieben verändert wurde.

rechteck.on("rotating", function() {
 wert = rechteck.get("angle");
});

Im Beispiel wird bei jeder Drehung des Rechtecks per „get()“ der aktuelle Winkel abgefragt.

Animationen im Handumdrehen

Die „animate()“-Methode von „Fabric.js“ erlaubt es, Formen sehr einfach in Bewegung zu bringen. Dazu wird die zu ändernde Eigenschaft angegeben sowie optional einige Parameter, welche Dauer und Art der Animation definieren.

rechteck.animate("angle", 45, {
  onChange: leinwand.renderAll.bind(leinwand),
  duration: 1000,
  easing: fabric.util.ease.easeInElastic
});

Im Beispiel drehen wir per „animate()“ das Rechteck auf 45 Grad. Obligatorisch ist der erste Parameter „onChange“. Er sorgt dafür, dass die Form während der Animation auch regelmäßig auf die Leinwand gezeichnet wird. Ohne diese Angabe wird die Animation nicht ausgeführt. Die Parameter „duration“ und „easing“ sind optional. Darüber wird die Länge und die Art der Animation geregelt. „Fabric.js“ besitzt eigene Easingfunktionen, mit denen unterschiedliche Bewegungsabläufe möglich sind.

Statt einen absoluten Wert – im Beispiel der Winkel – für die Animation anzugeben, sind auch relative Werte erlaubt. So kann eine Form statt auf 45 Grad auch um 45 Grad gedreht werden.

rechteck.animate("angle", "+=45", {
  …
});

Im Beispiel drehen wir die Animation um 45 Grad. Wichtig ist, dass relative Angaben immer in Anführungszeichen stehen.

Freihandzeichnen auf der Leinwand

Mit dem einfachen Parameter „isDrawingMode“ wird das Freihandzeichnen für die Leinwand eingeschaltet. Der Benutzer kann mit der Maus einfach selbst etwas auf die Leinwand zeichnen.

var leinwand = new fabric.Canvas("fabricjs", {
  isDrawingMode: 1
});

Das Aussehen des Pinsels, mit dem der Nutzer auf die Leinwand zeichnet, ist dabei einstellbar.

leinwand.freeDrawingBrush.color = "purple"
leinwand.freeDrawingBrush.width = 10

Im Beispiel werden Farbe und Dicke des Pinsels mit der Eigenschaft „freeDrawingBrush“ angepasst.

Großer Funktionsumfang und multiple Browserunterstützung

Die hier vorgestellten Möglichkeiten stellen nur einen kleinen Teil des großen Funktionsumfangs von „Fabric.js“ dar. Es gibt zahlreiche weitere Features wie beispielsweise einen SVG-Parser, der SVG-Grafiken lädt und auf die Leinwand zeichnet. Auch das Umwandeln in eine SVG-Grafik ist möglich. Die Unterstützung mobiler Geräte durch Gestensteuerung ist ebenfalls implementiert.

Eine umfangreiche Dokumentation mit zahlreichen Demos machen den Einstig in die Bibliothek sehr einfach. Dank einiger Benchmarks und Tests kann jeder für seinen Browser selbst prüfen, welche Funktionen unterstützt werden und wie schnell „Fabric.js“ im Browser läuft.

„Fabric.js“ funktioniert in allen aktuellen Browsern. Der Internet Explorer wird uneingeschränkt ab Version 9 unterstützt. Die Versionen 6 bis 8 werden nur teilweise unterstützt. Um das zu erreichen, wird „excanvas“ eingesetzt, eine JavaScript-Bibliothek, die HTML5-Canvas für ältere Versionen des Internet Explorers nachbildet. So kann zumindest ein Teil des Funktionsumfangs auch in älteren Versionen des Browsers Verwendung finden.

Die Bibliothek steht unter der MIT-Lizenz zum kostenlosen Download bereit. „Fabric.js“ kann frei für persönliche und kommerzielle Projekte genutzt werden.

(dpe)

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.

Hinterlasse einen Kommentar

3 Kommentare auf "HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] […]

DC
Gast

Nice!


Best regards

Silvan
Gast

Hi, mein Gott, wenn wir das Tool früher gekannt hätten, wären wir um Wochen schneller gewesen. Wir haben ein selbst gebautes Tool für die Darstellung von Möbeln auf einem Grundriss programmiert. Das macht im Endeffekt das Gleiche, wie das oben beschriebene Script, nur war es eben harte Arbeit UND musste auch noch auf dem IE8 laufen 🙁
Großes Kompliment an den Autor, wir überlegen sogar gerade, unser Script gegen das neue zu ersetzen…

wpDiscuz