CanvasPaint ist ein minimales TypeScript Projekt, das einen stark vereinfachten grafischen Editor mittels HTML5 Canvas bereitstellt. Es ist zum Einstieg in TypeScript ohne weitere Komplikationen gedacht und hat daher (außer TypeScript selbst) keine Abhängigkeiten.
Eine GUI-Bibliothek, Aufteilung in mehrere Dateien, ein Buildsystem, Backend, Tests und aufwendigeres Styling wird es erst in der zweiten Übung geben.
- Node.js 8.9 installieren
npm installin diesem Verzeichnis ausführen
npm run buildkompiliert einmalig die TypeScript-Datei in eine JavaScript-Dateinpm run watchkompiliert automatisch bei jeder Änderung und ist zum Entwickeln gedacht- Die Anwendung lässt sich direkt ohne Server in einem Browser anzeigen (canvas.html öffnen)
- Es ist eine rudimentäre Fehleranzeige enhalten, damit JavaScript-Fehler zur Laufzeit nicht unentdeckt bleiben
- Empfehlung: Immer die Entwicklungswerkzeuge des Browser geöffnet haben (mittels F12 bei den meisten).
- Tip: Chrome zeigt in der Konsole die originalen Zeilennummern der TypeScript-Dateien in Stack Traces an. Ansonsten sieht man nur die Zeilennummern innerhalb der generierten JavaScript-Dateien.
Zu Beginn der Übung kann CanvasPaint noch nicht viel und das standardmäßig aktive Zeichenwerkzeug tut gar nichts.
Man kann aber bereits auf einen schwarzen Stift wechseln, mit dem durch Klicken und gedrückt Halten im Zeichenbereich schwarze Linien gezeichnet werden können.
Ein weiteres Zeichenwerkzeug soll in der Liste auswählbar sein, mit dem sich rote Linien zeichen lassen, etwa als neue
Klasse RedPen.
Ein weiteres Zeichenwerkzeug soll in der Liste auswählbar sein, mit dem sich blaue Linien zeichen lassen, etwa als neue
Klasse BluePen.
Die vier jetzt vorhandenen Tool-Klassen sollen möglichst kompakt sein und keinen duplizierten Code enthalten.
Tip: TypeScript hat eine besonders kompakte Syntax für viele gängige Aufgaben, etwa das Setzen von Attributen einer Klasse im Konstruktor:
class Demo1 {
constructor(private rating: number) {
}
}
// ist äquivalent zu
class Demo2 {
private rating: number;
constructor(rating: number) {
this.rating = rating;
}
}
Ein weiteres Zeichenwerkzeug soll in der Liste auswählbar sein, mit dem schwarze Geraden gezeichnet werden können sollen. Es ist hierbei völlig ausreichen, wenn die Linie erst beim Loslassen der Maustaste gezeichnet wird.
Hintergrund:
Das HTML5 <canvas>-Element entspricht einem einzigen großen Puffer, indem die Farbwerte der Pixel direkt gesetzt
werden. Gesetzte Werte können nicht trivial wieder rückgängig gemacht werden. Es gäbe allerdings Strategien wie sich
so eine Vorschaufunktion trotzdem umsetzen ließe.
Ein weiteres Zeichenwerkzeug soll in der Liste auswählbar sein, mit dem sich Bereiche der Grafik auf weiß zurück setzen lassen.
Empfehlung: Ein rechteckiger Radierer ist einfacher als ein kreisförmiger.
- TypeScript Deep Dive (freies Buch über TypeScript)
- Dokumentation zum CanvasRenderingContext2D
- Code Completion der IDE 😊