Vektororientierte Grafikbearbeitung
Stefan K. Baur4. Semester
Medien und DesignProf. Dr. Burkhard Freitag
Betreuer: Dipl.-Inf. Christian Süß
Vektororientierte Grafikbearbeitung
• Was sind Vektorgrafiken und wofür?Was sind Vektorgrafiken und wofür?
Gliederung: Proseminar
• Grundlagen: Vektorrechnung Vektorrechnung
• Vektororientierte GrafikelementeVektororientierte Grafikelemente
• Vektororientierte GrafikformateVektororientierte Grafikformate
• Präsentation: Pseudo-Code -> FreeHand Pseudo-Code -> FreeHand
Vektororientierte GrafikbearbeitungWas sind Vektorgrafiken?
SymbolSymbol-Charakter! Pfeile und Buttons im Web...
Vektorgrafiken entstehen immer aus Vorschriften
Aus konkreten Befehlen und Objekten
SchemaSchema-Charakter! Pläne für Häuser oder Anlagen! UML-Modellierung...
Vektororientierte Grafik = Objektorientierte GrafikVektororientierte Grafik = Objektorientierte Grafik
Vektororientierte GrafikbearbeitungWofür eigentlich Vektorgrafik?
Vektorisierung: Rasterformat -> VektorformatRasterformat -> Vektorformat
• leichter automatischautomatisch erstellt werden
Vektor-Grafiken in Abhängigkeit der Uhrzeit oder Datum
Vektor-Grafiken können leichter korrigiert werden
• können leichter manuellmanuell bearbeitet werden
Skizzen können leichter nachbearbeitet werden
Vektororientierte GrafikbearbeitungKomprimierungsmöglichkeit
RastergrafikenRastergrafikenspeichern für jedes ihrer Pixel einen
Farbwert ab.
VektorgrafikenVektorgrafikenspeichern ihre
Objektinformationen ab.
RastergrafikRastergrafik VektorgrafikVektorgrafikKonvertierung
Im Normalfall erlangt man eine kleinere Datei!
Lösung: Vektorisierung
Vektororientierte GrafikbearbeitungVektorisierung
Pixelgrafik Vektorgrafik
Vektororientierte GrafikbearbeitungGegenüberstellung
RasterformatRasterformat VektorformatVektorformat
Qualitätsverlust bei Skalierung(z.B. vergrößern)
Photoqualitätleicht realiserbar
Bildgröße hat keinen Einflußauf die Speichergröße
Beliebig skalierbarohne Verlußt der Qualität
Photoqualitätkaum realiserbar
DimensionsabhängigerSpeicherbedarf
Grundlage fürPräsentationsprogramme
Vektororientierte GrafikbearbeitungGliederung: Vektorrechnung
• Multiplikation mit einer Matrix
• Vektoraddition
• Multiplikation mit einem Skalar
• Betrag eines Vektors
• Skalarmultiplikation
• Vektor-Abbildung (allg.)
• Das Kreuzprodukt (2D, 3D)
Vektororientierte GrafikbearbeitungBetrag eines Vektors
• Abstandsberechnung zweier Bildpunkte oder Objekte
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
2 22
21
2
1 aaa
aa
a
a
1a2a
Vektororientierte GrafikbearbeitungVektoraddition
• Translation eines Bildpunktes oder Objekts
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
22
11
2
1
2
1
ba
ba
b
b
a
aba
ba
b
a
A
B
Vektororientierte GrafikbearbeitungMultiplikation mit einem Skalar
• Vergrößern oder Verkleinern eines Grafikobjekts
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
2
1
2
1
a
a
a
aa
a
a
Vektororientierte GrafikbearbeitungSkalarmultiplikation
• Grundlage für die Multiplikation mit einer Matrix
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
• Bestimmung des Winkels zwischen zwei Vektoren
cos2211
2
1
2
1 bababab
b
a
aba
b
a
ba
ba
1cos
Vektororientierte GrafikbearbeitungMultiplikation mit einer Matrix
• Grundlage für lineare Abbildungen in V²
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
222121
212111
2
1
22
21
2
1
12
11
2
1
2221
1211
xmxm
xmxm
x
x
m
mx
x
m
m
x
x
mm
mmxM
Vektororientierte GrafikbearbeitungVektor-Abbildung (allg.)
txMy
Beispiele:Beispiele:
• Translation
10
01M
• Drehung
)cos()sin(
)sin()cos(MxMy
txy
• Spiegelung
)cos()sin(
)sin()cos(MxMy
• Streckungsabbildung txMky
Vektororientierte GrafikbearbeitungDas Kreuzprodukt
• Grundlage für 3D-Grafik, die Normale zu Vektoren
Verwendungszweck:Verwendungszweck:
Realisierung:Realisierung:
• Hier Fläche eines Parallelogramms
2121
1313
3232
3
2
1
3
2
1
abba
abba
abba
b
b
b
a
a
a
ba
ba
Vektororientierte GrafikbearbeitungGliederung: VO - Grafikelemente
• KurvenKurven
Strecken bzw. GeradenPolygonRechteckeEllipsen
• PrimitivePrimitive
BezierCasteljauBernstein
Vektororientierte GrafikbearbeitungStrecke bzw. Gerade
Beschreibungsform:Beschreibungsform:
Eine Strecke definiert man am Besten mit zwei Vektoren
a
b ba
O
Eine Gerade definiert man am Besten als Abbildung
a
b
O
abkx
Vektororientierte GrafikbearbeitungPolygon
Verkettung von n - Strecken
Beschreibungsform:Beschreibungsform:
O
Strecke n
Strecke 1
Strecke 2
...
Nachteil:Nachteil:
Speicherintensiv für große Polygone
Vektororientierte GrafikbearbeitungRechteck
Beschreibungsform:Beschreibungsform:
1. Als Spezialform des Polygons
O
2. Eine Spezialform eines Paralellogrammsmit zwei Vektoren
Vektororientierte GrafikbearbeitungEllipse
Beschreibungsform:Beschreibungsform:
2. Darstellung mit einer Funktion
1. Als Spezialform des Polygonsmit sehr kleinen Strecken,aber auch sehr vielen Strecken
O
122
21 b
x
a
x1x
2x
a
b
Vektororientierte GrafikbearbeitungBezier
Wie kann man nun beliebige Formenbeliebige Formen beschreiben?
Mit Polygonen!Mit Polygonen!
Mit Funktionen!Mit Funktionen!
Nach Bezier funktioniert das sehr gut!Nach Bezier funktioniert das sehr gut!
Vektororientierte GrafikbearbeitungBezier
Das Prinzip von Bezier:Das Prinzip von Bezier:
Verwende das Prinzip der PolygonePrinzip der Polygone
im Zusammenhang mit Funktionenmit Funktionen,
so dass die Kurve Gummiband-Charakter hat.
Vektororientierte GrafikbearbeitungCasteljau
Realisierung von Bezier-Kurven:Realisierung von Bezier-Kurven:
Rekursive LösungRekursive Lösung
Casteljau hüllthüllt die resultierende Kurvemit einem PolygonPolygon ein.
Vektororientierte GrafikbearbeitungBernstein
Realisierung von Bezier-Kurven:Realisierung von Bezier-Kurven:
Iterative LösungIterative Lösung
Die Punkte des Polygons sind die LeitpunkteLeitpunkte,mit denen man die Zugkraft auf den nächsten
Punkt der Kurve mittels GewichtsfunktionGewichtsfunktionberechnen kann.
Vektororientierte GrafikbearbeitungPseudo-Code
Vektororientierte GrafikbearbeitungGliederung: Grafikformate
• Das Format: epseps
• Das Format: pdfpdf
• Das Format: psps
• Das Format: svgsvg
Vektororientierte GrafikbearbeitungDas Format: ps
PS = PPostSScript = Seitenbeschreibungssprache
Basissatz von PrimitivenBeschränkt skalierbare Fonts (10pt u. 12pt)
Ermöglicht modulare Programmierung
Erweiterung von Level-1-PostscriptBessere Speicherverwaltung für den InterpreterHöhere Anzahl von PrimitivenBeliebig skalierbare Fontskomplettes Farbkonzept (geräte- bzw. geräteunabhängig)
Level-1-PostscriptLevel-1-Postscript (80er Jahre)
Level-2-PostscriptLevel-2-Postscript (heute)
Vektororientierte GrafikbearbeitungDas Format: eps
EPS = EEncapsulated PPostSScript
Restriktion von Postscript:Restriktion von Postscript:
Stellt nur ein Bild darBeginnen mit einem Kommentar
z.B. Autor und Version
Das EPS-Bild kann von AnwendungsprogrammenAnwendungsprogrammen gelesen werden,
die kein Postscript beherschen!
Vorteil:Vorteil:
Vektororientierte GrafikbearbeitungDas Format: pdf
PDF = PPortable DDocument FFile
Sehr viel von Level-2-PostscriptLevel-2-Postscript übernommen
Zeichnet sich durch bessere Komprimierungbessere Komprimierung aus
Vorteil:Vorteil:
Vektororientierte GrafikbearbeitungDas Format: svg
SVG = SScalable VVector GGraphics
SVG-Grafiken wurden für das Internet Internet konzepiert
Besonders für XML
Vektororientierte GrafikbearbeitungPraxis
Praxis
FreeHandFreeHand
Pseudo-CodePseudo-Code+
Top Related