VectorLab
unbenannt.svg

Grundlagen

1 / 9

Aufgabe

Hallo SVG!

Dateien und ByCS-Drive

Edge/Chrome: „Öffnen“ und „Speichern“ können direkt auf dieselbe SVG-Datei zugreifen. Liegt sie in einem synchronisierten ByCS-Drive-Ordner, wird sie vom Desktop-Client wieder synchronisiert.

Ohne File System Access API verwendet der Prototyp Datei-Upload bzw. Download als Rückfalllösung.

Vektorgrafik und Pixelgrafik vergleichen

Links siehst du die Vektorgrafik. Rechts wird dieselbe Zeichnung zuerst in eine Pixelgrafik umgewandelt und anschließend wieder auf die gleiche Größe vergrößert.

Vektorgrafik (SVG)

Beim Vergrößern werden die Formen neu berechnet.

Pixelgrafik (PNG, vergrößert)

Vergrößerte Pixelgrafik
Beobachtung: Je niedriger die Auflösung der Pixelgrafik ist, desto deutlicher verliert sie beim Vergrößern an Schärfe. Die SVG-Grafik bleibt dagegen scharf, weil sie aus mathematisch beschriebenen Formen besteht.

IV.2 · Klassen und Objekte in VectorLab

In IV.1 hast du Klassen und Objekte am Beispiel von Freunden und Tassen kennengelernt. Jetzt überträgst du das auf deine Zeichnungen: Jedes Rechteck ist ein Objekt der Klasse RECHTECK.

Klassenkarte: Was haben alle gemeinsam?Sie zeigt die Attribute, zum Beispiel Breite und Füllfarbe.
Objektkarte: Welche Werte hat dieses Objekt?Sie zeigt den Objektnamen und die aktuellen Attributwerte.
  1. Untersuche das vorhandene Rechteck. Wähle links das Pfeilwerkzeug und klicke auf das Rechteck. Lies rechts die Klassenkarte und die Objektkarte. Finde den Objektnamen und die Klasse hinter dem Doppelpunkt.
  2. Ändere seine Füllfarbe. Wähle oben bei „Füllung“ eine andere Farbe und klicke auf „Übernehmen“. Beobachte den Wert „Füllfarbe“ in der Objektkarte. Was bleibt in der Klassenkarte gleich?
  3. Zeichne ein zweites Rechteck. Wähle links das Rechteckwerkzeug und ziehe auf einer freien Stelle der Zeichenfläche. Wähle danach wieder den Pfeil und klicke abwechselnd auf beide Rechtecke. Vergleiche ihre Objektnamen, Klassen und Attributwerte.
  4. Zeichne eine Ellipse. Ziehe mit dem Ellipsenwerkzeug auf einer weiteren freien Stelle. Wähle die neue Form mit dem Pfeil aus. Vergleiche ihre Klassenkarte mit der eines Rechtecks. Welche Attribute unterscheiden sich?

Du bearbeitest die Zeichnung. Die Karten zeigen dir, was sich dabei ändert. Den Auftrag findest du jederzeit über „Auftrag IV.2“ wieder.

Informatik-Sicht freigeschaltet

Im normalen Zeichenmodus hast du VectorLab wie ein Vektorgrafikprogramm benutzt. Jetzt kannst du zusätzlich untersuchen, wie die gezeichneten Elemente beschrieben werden.

Die Klassenkarte zeigt, welche Attribute Objekte einer Klasse besitzen. Die Objektkarte zeigt die aktuellen Attributwerte des ausgewählten Objekts. Die Karten selbst verändern nichts.
✓
Geschafft!