Dank HTML5-Canvas und der dazugehörigen Möglichkeiten rund um die JavaScript-Methode „getContext(„2d“)“ kannst du nahezu uneingeschränkt im Browser zeichnen. Methoden wie „lineTo()“ und „arc()“ sind nur zwei einfache Beispiele, wie du Zeichnungen per JavaScript anlegst. Mit DrawerJs bringst du gleich ein ganzes Zeichenprogramm, das mit HTML5-Canvas realisiert wurde, in deinen Browser.
Zeichnen fast wie in Photoshop
DrawerJs ist eine JavaScript-Bibliothek, die ein umfangreiches Zeichenprogramm direkt in deinem Browser startet. Ähnlich wie in einer klassischen Anwendung, werden dir eine Zeichenfläche sowie verschiedene Werkzeugleisten dargestellt.
So wählst du aus den Zeichenwerkzeugen zum Beispiel das Freihandwerkzeug aus, mit dem du ganz individuell zeichnen kannst. Die Linien- und Pfeilwerkzeuge erlauben es dir, gerade Linien und Pfeile auf die Zeichenfläche zu bringen. Kreise und Rechtecke sind ebenso möglich, wie Polygone mit beliebig vielen Seiten.
Es gibt eine Optionenleiste, die zu jedem Werkzeug kontextbezogene Funktionen anzeigt. So kannst du zum Beispiel die Linienfarbe und -stärke einstellen, sowie die Füllfarbe und die Opazität.
Skalieren, drehen, verschieben und wegradieren
Alle auf der Zeichenfläche platzierten Formen können skaliert, gedreht und verschoben werden. Dazu wählst du die entsprechende Form aus und nutzt die verschiedenen Anfasser, um die Form anzupassen. Über das Kontextmenü verschiebst du Formen in den Vorder- oder Hintergrund.
Wie es sich für ein Zeichenprogramm gehört, darf ein Radiergummi nicht fehlen. Dieses radiert alles weg, was ihm in den Weg kommt. Anders als beispielsweise in Photoshop, kennt DrawerJs keine Ebenen, wenngleich die einzelnen Formen selbst einzeln bearbeitet werden können. Beim Radieren werden jedoch alle Formen berücksichtigt, über die du mit dem Radiergummi kommst.
Bilder einfügen
Du kannst nicht nur zeichnen, sondern auch Bilder einfügen. Dazu wählst du aus deinen lokalen Dateien eine Bilddatei aus, die anschließend in die Zeichenfläche im Browser eingefügt wird. Du kannst die Bilder skalieren, drehen und auf der Zeichenfläche verschieben.
Selbst das Beschneiden von eingefügten Bildern ist möglich. Außerdem lässt sich ein Bild als Hintergrund verwenden. Dieses wird dann entweder auf die gesamte Zeichenfläche skaliert oder so verkleinert, dass es in die Zeichenfläche passt. Dabei wird der Hintergrund entweder zentriert oder in einer Ecke platziert. Der Hintergrund bleibt im Übrigen vom Radiergummi verschont.
Text einfügen und bearbeiten
Auch an ein Textwerkzeug haben die Macher von DrawerJs gedacht. Damit platzierst du ein Textfeld an beliebiger Stelle auf der Leinwand. Anschließend gibst du den gewünschten Text ein und passt ihn über die Optionenleiste an.
So wählst du unter anderem die Schriftgröße und -farbe aus. Auch Formatierungen, wie fett und kursiv, sind möglich. In den Voreinstellungen gibt es eine kleine Auswahl an Schriften. Diese lässt sich aber nach Belieben anpassen und erweitern.
Das betrifft übrigens ebenso die Farbpalette. Die dort voreingestellten Farben veränderst und erweiterst du ganz nach Belieben. Optional nutzt du eine HTML5-Farbpalette.
Natürlich kannst du Texte beliebig auf der Zeichenfläche drehen, skalieren und verschieben.
Zeichnung im Bitmap-Format
Bei den HTML5-Canvas-Zeichnungen handelt es sich um reine Bitmaps. Sobald du mit der Maus die Zeichenfläche verlässt und woanders hinklickst, wird die Zeichnung ins PNG-Format konvertiert und als Data-URI im Browser dargestellt. Per Rechtsklick auf die Zeichnung kannst du diese zum Beispiel herunterladen.
Sobald du wieder in die Zeichenfläche klickst, kommst du wieder in den Bearbeitungsmodus und kannst weiter zeichnen.
DrawerJs in eigene Website einbauen
Die DrawerJs-Bibliothek lässt sich sehr individuell anpassen und in deine eigene Website einfügen. Dank der API hast du zahlreiche Möglichkeiten, wie die Zeichenfläche und die verschiedenen Werkzeugleisten dargestellt werden sollen.
Zunächst müssen verschiedene JavaScript- und CSS-Dateien eingebunden werden. Anschließend lädst du per JavaScript die Bibliothek und übergibst die verschiedenen Parameter, mit denen du die Bibliothek anpasst. Außerdem sind jQuery und Font Awesome notwendig, um DrawerJs zum Laufen zu bekommen.
$(document).ready(function () {
var drawer = new DrawerJs.Drawer(null, {
texts: customLocalization,
plugins: drawerPlugins,
defaultImageUrl: '/images/drawer.jpg'
}, 600, 600);
$('#canvas-editor').append(drawer.getHtml());
drawer.onInsert();
});
Im Beispiel wird eine neue Instanz von DrawerJs dem Element mit der ID „canvas-editor“ zugewiesen. Über die Variable „customLocalization“ übergibst du ein JSON-Literal mit den einzelnen Bezeichnungen unter anderem für die Werkzeuge. Du hast also die Möglichkeit, diese ins Deutsche zu übersetzen.
Über „drawerPlugins“ definierst du, welche Werkzeuge deine Zeichenanwendung haben soll. So legst du individuell fest, ob du zum Beispiel das Einfügen von Bildern oder das Ausführen im Vollbildmodus gestatten möchtest.
Im Vollbildmodus erinnert DrawerJs fast an ein gängiges Zeichenprogramm. Dir steht da der gesamte Bildschirm zur Verfügung und die verschiedenen Werkzeugleisten werden am Bildschirmrand dargestellt.
Werkzeugleiste und Zeichenfläche anpassen
Um deine Version von DrawerJs ganz individuell deinen Anforderungen anpassen zu können, erlaubt dir die API sogar, die Zeichen-Werkzeugleiste separat von der Zeichenfläche zu platzieren. Dazu übergibst du einfach die ID eines HTML-Elementes, in welchem die Werkzeugleiste dargestellt werden soll. Dabei entscheidest du, ob eine Werkzeugleiste immer an derselben Stelle stehen oder mitscrollen soll. Die Optionenleiste kann auch als Popup erscheinen, was gerade bei Mobilgeräten von Vorteil ist. Bei Bedarf schaltest du die kompletten Werkzeugleisten aus und steuerst die Werkzeuge direkt über die eigene API von DrawerJs.
toolbars: {
drawingTools: {
position: 'top',
positionType: 'outside',
customAnchorSelector: '#custom-toolbar-here'
}
}
Die hier gezeigte Konfiguration fügst du zu den anderen Konfigurationen im JSON-Literal des DrawerJs-Aufrufs ein.
Auch bezüglich der Zeichenfläche gibt es einige Konfigurationsmöglichkeiten. So definierst du zum Beispiel den Rahmen der Zeichenfläche und ob diese transparent sein soll.
drawer: {
borderCss: '1px dashed rgb(195, 194, 194)',
borderCssEditMode: '1px dashed rgb(195, 194, 194)',
backgroundCss: 'transparent'
}
Anwendung minimalisieren und verschieben
Optional fügst du eine „Minimalisieren“-Schaltfläche hinzu, welche die gesamte Anwendung innerhalb deines Browsers auf eine kleine Werkzeugleiste minimiert. Darüber kannst du die Anwendung wieder maximieren oder schließen.
Außerdem kannst du die gesamte Anwendung bei Bedarf innerhalb ihres Elternelementes verschiebbar machen. Über ein entsprechendes Werkzeug ziehst du die Zeichenfläche samt Werkzeugleisten an eine beliebige Position.
Zusammen mit dem ebenfalls optionalen transparenten Hintergrund erreichst du einen schönen Effekt, weil deine Zeichenfläche den jeweiligen Hintergrund deiner Website durchscheinen lässt. Der jeweilige Ausschnitt deiner Website dienst dann quasi als Zeichenfläche.
Zeichnungen individuell verwenden und bearbeiten
Je nach Anwendungsfall möchtest du die Zeichnungen, die Besucher deiner Website anlegen, weiter verwenden. Hier stellt dir die API von DrawerJs die Möglichkeit zur Verfügung, das JSON-Literal mit der Zeichnung an eine beliebige Funktion zu übergeben.
Über diese Funktion kannst du die Zeichendaten beispielsweise per Ajax versenden und in einer Datenbank speichern oder per E-Mail verschicken. Hierdurch bekommt das Tool einen echten Mehrwert.
Über die API entwickelst du zusätzlich eigene Funktionen, mit denen du zur Zeit Text mit ihrer Gestaltung in die Zeichenfläche einfügen kannst. Formen lassen sich per API derzeit noch nicht erstellen, was sich zukünftig aber ändern soll.
Kosten und Fazit
Pro Website kostet DrawerJs 199 Euro. Darin enthalten sind alle zukünftigen Updates – und zwar ohne zeitliche Einschränkung. Außerdem gibt es einen technischen E-Mail-Support und eine 30-tägige Geld-zurück-Garantie. Im September-Update wird es zudem eine Screenshot-Funktion geben, bei der du einen Screenshot deines Browsers oder Destops als Bild oder Hintergrund einfügen kannst.
Für 699 gibt es die Developer-Edition mit dem gesamten Quelltext. Diese Edition erlaubt es dir zudem, DrawerJs auf beliebig vielen Websites zu verwenden.
Außerdem kannst du DrawerJs ausgiebig auf der Website des Anbieters testen. Dort findest du einige Beispiel-Implementierungen. Derzeit werden auch Plug-ins für verschiedene gängige WYSIWYG-Editoren hergestellt. Den Anfang macht dabei „Imperavi Redactor V3“.
