Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Redaktion Dr. Web 10. August 2017

JavaScript: Mit DrawerJs einfach im Browser zeichnen

Dank HTML5-Canvas und der dazu­ge­hö­ri­gen Möglichkeiten rund um die JavaScript-Methode „getContext(“2d”)“ kannst du nahe­zu unein­ge­schränkt im Browser zeich­nen. Methoden wie „lineTo()“ und „arc()“ sind nur zwei ein­fa­che Beispiele, wie du Zeichnungen per JavaScript anlegst. Mit DrawerJs bringst du gleich ein gan­zes Zeichenprogramm, das mit HTML5-Canvas rea­li­siert wur­de, in dei­nen Browser.

Zeichnen fast wie in Photoshop

DrawerJs ist eine JavaScript-Bibliothek, die ein umfang­rei­ches Zeichenprogramm direkt in dei­nem Browser star­tet. Ähnlich wie in einer klas­si­schen Anwendung, wer­den dir eine Zeichenfläche sowie ver­schie­de­ne Werkzeugleisten dar­ge­stellt.

So wählst du aus den Zeichenwerkzeugen zum Beispiel das Freihandwerkzeug aus, mit dem du ganz indi­vi­du­ell zeich­nen kannst. Die Linien- und Pfeilwerkzeuge erlau­ben es dir, gera­de Linien und Pfeile auf die Zeichenfläche zu brin­gen. Kreise und Rechtecke sind eben­so mög­lich, wie Polygone mit belie­big vie­len Seiten.

Es gibt eine Optionenleiste, die zu jedem Werkzeug kon­text­be­zo­ge­ne Funktionen anzeigt. So kannst du zum Beispiel die Linienfarbe und -stär­ke ein­stel­len, sowie die Füllfarbe und die Opazität.

Skalieren, drehen, verschieben und wegradieren

Alle auf der Zeichenfläche plat­zier­ten Formen kön­nen ska­liert, gedreht und ver­scho­ben wer­den. Dazu wählst du die ent­spre­chen­de Form aus und nutzt die ver­schie­de­nen Anfasser, um die Form anzu­pas­sen. Über das Kontextmenü ver­schiebst du Formen in den Vorder- oder Hintergrund.

Wie es sich für ein Zeichenprogramm gehört, darf ein Radiergummi nicht feh­len. Dieses radiert alles weg, was ihm in den Weg kommt. Anders als bei­spiels­wei­se in Photoshop, kennt DrawerJs kei­ne Ebenen, wenn­gleich die ein­zel­nen Formen selbst ein­zeln bear­bei­tet wer­den kön­nen. Beim Radieren wer­den jedoch alle Formen berück­sich­tigt, über die du mit dem Radiergummi kommst.

Bilder einfügen

Du kannst nicht nur zeich­nen, son­dern auch Bilder ein­fü­gen. Dazu wählst du aus dei­nen loka­len Dateien eine Bilddatei aus, die anschlie­ßend in die Zeichenfläche im Browser ein­ge­fügt wird. Du kannst die Bilder ska­lie­ren, dre­hen und auf der Zeichenfläche ver­schie­ben.

Selbst das Beschneiden von ein­ge­füg­ten Bildern ist mög­lich. Außerdem lässt sich ein Bild als Hintergrund ver­wen­den. Dieses wird dann ent­we­der auf die gesam­te Zeichenfläche ska­liert oder so ver­klei­nert, dass es in die Zeichenfläche passt. Dabei wird der Hintergrund ent­we­der zen­triert oder in einer Ecke plat­ziert. Der Hintergrund bleibt im Übrigen vom Radiergummi ver­schont.

Text einfügen und bearbeiten

Auch an ein Textwerkzeug haben die Macher von DrawerJs gedacht. Damit plat­zierst du ein Textfeld an belie­bi­ger Stelle auf der Leinwand. Anschließend gibst du den gewünsch­ten Text ein und passt ihn über die Optionenleiste an.

So wählst du unter ande­rem die Schriftgröße und -far­be aus. Auch Formatierungen, wie fett und kur­siv, sind mög­lich. In den Voreinstellungen gibt es eine klei­ne Auswahl an Schriften. Diese lässt sich aber nach Belieben anpas­sen und erwei­tern.

Das betrifft übri­gens eben­so die Farbpalette. Die dort vor­ein­ge­stell­ten Farben ver­än­derst und erwei­terst du ganz nach Belieben. Optional nutzt du eine HTML5-Farbpalette.

Natürlich kannst du Texte belie­big auf der Zeichenfläche dre­hen, ska­lie­ren und ver­schie­ben.

Zeichnung im Bitmap-Format

Bei den HTML5-Canvas-Zeichnungen han­delt es sich um rei­ne Bitmaps. Sobald du mit der Maus die Zeichenfläche ver­lässt und woan­ders hinklickst, wird die Zeichnung ins PNG-Format kon­ver­tiert und als Data-URI im Browser dar­ge­stellt. Per Rechtsklick auf die Zeichnung kannst du die­se zum Beispiel her­un­ter­la­den.

Sobald du wie­der in die Zeichenfläche klickst, kommst du wie­der in den Bearbeitungsmodus und kannst wei­ter zeich­nen.

DrawerJs in eigene Website einbauen

Die DrawerJs-Bibliothek lässt sich sehr indi­vi­du­ell anpas­sen und in dei­ne eige­ne Website ein­fü­gen. Dank der API hast du zahl­rei­che Möglichkeiten, wie die Zeichenfläche und die ver­schie­de­nen Werkzeugleisten dar­ge­stellt wer­den sol­len.

Zunächst müs­sen ver­schie­de­ne JavaScript- und CSS-Dateien ein­ge­bun­den wer­den. Anschließend lädst du per JavaScript die Bibliothek und über­gibst die ver­schie­de­nen Parameter, mit denen du die Bibliothek anpasst. Außerdem sind jQuery und Font Awesome not­wen­dig, um DrawerJs zum Laufen zu bekom­men.

$(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 „can­vas-edi­tor“ zuge­wie­sen. Über die Variable „customLocalization“ über­gibst du ein JSON-Literal mit den ein­zel­nen Bezeichnungen unter ande­rem für die Werkzeuge. Du hast also die Möglichkeit, die­se ins Deutsche zu über­set­zen.

Über „drawerPlugins“ defi­nierst du, wel­che Werkzeuge dei­ne Zeichenanwendung haben soll. So legst du indi­vi­du­ell fest, ob du zum Beispiel das Einfügen von Bildern oder das Ausführen im Vollbildmodus gestat­ten möch­test.

Im Vollbildmodus erin­nert DrawerJs fast an ein gän­gi­ges Zeichenprogramm. Dir steht da der gesam­te Bildschirm zur Verfügung und die ver­schie­de­nen Werkzeugleisten wer­den am Bildschirmrand dar­ge­stellt.

Werkzeugleiste und Zeichenfläche anpassen

Um dei­ne Version von DrawerJs ganz indi­vi­du­ell dei­nen Anforderungen anpas­sen zu kön­nen, erlaubt dir die API sogar, die Zeichen-Werkzeugleiste sepa­rat von der Zeichenfläche zu plat­zie­ren. Dazu über­gibst du ein­fach die ID eines HTML-Elementes, in wel­chem die Werkzeugleiste dar­ge­stellt wer­den soll. Dabei ent­schei­dest du, ob eine Werkzeugleiste immer an der­sel­ben Stelle ste­hen oder mit­scrol­len soll. Die Optionenleiste kann auch als Popup erschei­nen, was gera­de bei Mobilgeräten von Vorteil ist. Bei Bedarf schal­test du die kom­plet­ten Werkzeugleisten aus und steu­erst die Werkzeuge direkt über die eige­ne API von DrawerJs.

toolbars: {
 	drawingTools: {
     position: 'top', 
 	  positionType: 'outside',
 	  customAnchorSelector: '#custom-toolbar-here'
 	}
}

Die hier gezeig­te Konfiguration fügst du zu den ande­ren Konfigurationen im JSON-Literal des DrawerJs-Aufrufs ein.

Auch bezüg­lich der Zeichenfläche gibt es eini­ge Konfigurationsmöglichkeiten. So defi­nierst du zum Beispiel den Rahmen der Zeichenfläche und ob die­se trans­pa­rent 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 hin­zu, wel­che die gesam­te Anwendung inner­halb dei­nes Browsers auf eine klei­ne Werkzeugleiste mini­miert. Darüber kannst du die Anwendung wie­der maxi­mie­ren oder schlie­ßen.

Außerdem kannst du die gesam­te Anwendung bei Bedarf inner­halb ihres Elternelementes ver­schieb­bar machen. Über ein ent­spre­chen­des Werkzeug ziehst du die Zeichenfläche samt Werkzeugleisten an eine belie­bi­ge Position.

Zusammen mit dem eben­falls optio­na­len trans­pa­ren­ten Hintergrund erreichst du einen schö­nen Effekt, weil dei­ne Zeichenfläche den jewei­li­gen Hintergrund dei­ner Website durch­schei­nen lässt. Der jewei­li­ge Ausschnitt dei­ner Website dienst dann qua­si als Zeichenfläche.

Zeichnungen individuell verwenden und bearbeiten

Je nach Anwendungsfall möch­test du die Zeichnungen, die Besucher dei­ner Website anle­gen, wei­ter ver­wen­den. Hier stellt dir die API von DrawerJs die Möglichkeit zur Verfügung, das JSON-Literal mit der Zeichnung an eine belie­bi­ge Funktion zu über­ge­ben.

Über die­se Funktion kannst du die Zeichendaten bei­spiels­wei­se per Ajax ver­sen­den und in einer Datenbank spei­chern oder per E-Mail ver­schi­cken. Hierdurch bekommt das Tool einen ech­ten Mehrwert.

Über die API ent­wi­ckelst du zusätz­lich eige­ne Funktionen, mit denen du zur Zeit Text mit ihrer Gestaltung in die Zeichenfläche ein­fü­gen kannst. Formen las­sen sich per API der­zeit noch nicht erstel­len, was sich zukünf­tig aber ändern soll.

Kosten und Fazit

Pro Website kos­tet DrawerJs 199 Euro. Darin ent­hal­ten sind alle zukünf­ti­gen Updates – und zwar ohne zeit­li­che Einschränkung. Außerdem gibt es einen tech­ni­schen E-Mail-Support und eine 30-tägi­ge Geld-zurück-Garantie. Im September-Update wird es zudem eine Screenshot-Funktion geben, bei der du einen Screenshot dei­nes Browsers oder Destops als Bild oder Hintergrund ein­fü­gen kannst.

Für 699 gibt es die Developer-Edition mit dem gesam­ten Quelltext. Diese Edition erlaubt es dir zudem, DrawerJs auf belie­big vie­len Websites zu ver­wen­den.

Außerdem kannst du DrawerJs aus­gie­big auf der Website des Anbieters tes­ten. Dort fin­dest du eini­ge Beispiel-Implementierungen. Derzeit wer­den auch Plug-ins für ver­schie­de­ne gän­gi­ge WYSIWYG-Editoren her­ge­stellt. Den Anfang macht dabei „Imperavi Redactor V3“.

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

2 Kommentare

  1. Hallo,
    inter­es­sant wuss­te gar­nicht das es sowas gibt.
    Gibt es auch Open Source bzw. alter­na­ti­ven?
    Ich habe nichts gefun­den was ähn­li­ches bie­tet.
    Danke

Schreibe einen Kommentar zu Prokov Antworten abbrechen

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