Poznámky z 1. přednášky z UPG
This commit is contained in:
parent
75fb764751
commit
3b9685362e
|
|
@ -0,0 +1,246 @@
|
|||
# Základní 2D vektorová grafika
|
||||
|
||||
## Bitmapová a vektorová grafika
|
||||
|
||||
**Bitmapová (rastrová) grafika**
|
||||
- obrázek je složen z 2D matice pixelů
|
||||
- pixel = picture element = obrazový element
|
||||
- pixel nese informaci o barvě (může se měnit v čase - video)
|
||||
- podporováno většinou zařízení
|
||||
- vysoké nároky na velikost úložiště
|
||||
|
||||
**Vektorová (objektově orientovaná) grafika**
|
||||
- obrázek je složen z matematicky definovaných objektů
|
||||
- úsečka, kružnice, křivka, ...
|
||||
- objekty popsány různými vlastnostmi
|
||||
- umístění, poloměr, barva
|
||||
- podporováno minimem zařízení
|
||||
- plotter, řezací plotter, CNC stroje, ...
|
||||
- typicky nutná konverze na bitmapovou grafiku
|
||||
- nároky na velikost úložiště závisí na obsahu
|
||||
+ lze vykreslit v libovolné velikosti
|
||||
+ snadná úprava, s objekty lze pracovat nezávisle
|
||||
|
||||
## Programování aplikací s grafickým výstupem
|
||||
|
||||
Úkolem je zobrazit vektorovou, bitmapovou či smíšenou grafiku na daném zařízení.
|
||||
|
||||
- **přímé řešení**:
|
||||
- použít funkcionalitu poskytovanou ovladačem zařízení
|
||||
- problémy:
|
||||
- některá zařízení umí zpracovat jen bitmapovou grafiku (vektorovou je potřeba konvertovat)
|
||||
- rozhraní ovladačů pro různé typy zařízení se mohou lišit
|
||||
- různé souřadnicové systémy
|
||||
+ **nepřímé řešení**
|
||||
+ abstraktní grafický kontext (také device context či canvas)
|
||||
+ poskytuje jednotný přístup k libovolnému zařízení
|
||||
+ programátor o vytvoření požádá OS
|
||||
+ prostřednictvím API OS
|
||||
+ prostřednictvím nějaké dostupné knihovny (AWT, Swing, Qt, ...)
|
||||
|
||||
### Grafický kontext
|
||||
|
||||
**Obsahuje**
|
||||
- identifikátor poskytnutý OS
|
||||
- Windows: HDC
|
||||
- vlastní souřadnicový systém (logický systém, user space)
|
||||
- nastavenou tzv. Window - Viewport transformaci
|
||||
- mapování na oblast v souřadném systému zařízení
|
||||
- zahrnuje posun a změnu měřítka
|
||||
- stav
|
||||
- aktuálně zvolené pero (obrysy) a štětec (výplň)
|
||||
- aktuální poloha peta
|
||||
- ořezová oblast
|
||||
- ...
|
||||
- funkce pro zobrazení smířené grafiky
|
||||
|
||||
Bývá zapouzdřen v grafických knihovnách (jako třída).
|
||||
|
||||
### Aplikace
|
||||
|
||||
- základem okno, obsluhováno operačním systémem
|
||||
- programátor o vytvoření žádá OS
|
||||
- pomocí API OS nebo dostupné knihovny
|
||||
|
||||
**Okno**
|
||||
- pozice na obrazovce
|
||||
- šířka a výška
|
||||
- název
|
||||
- další atributy (typ, průhlednost)
|
||||
- identifikátor
|
||||
- grafický kontext pro obrazovku
|
||||
|
||||
**Rámeček** (ohraničení)
|
||||
- non-client area
|
||||
- vykreslován systémem nebo knihovnou
|
||||
|
||||
**Klientská oblast**
|
||||
- obsahuje komponenty (tlačítka, seznamy, ...) a vizualizace
|
||||
|
||||
### Java
|
||||
|
||||
Java je nezávislá na platformě, systémový přístup tedy není možný a je potřeba využít knihovnu.
|
||||
- Swing (starší)
|
||||
- JavaFX (nástupce Swing, objektově orientovaná)
|
||||
|
||||
## Délkové jednotky
|
||||
|
||||
**Souřadnicový systém**
|
||||
- kartézský systém souřadnic
|
||||
- (0, 0) v levém horním nebo dolním rohu
|
||||
|
||||
**Pixel** (px)
|
||||
- jediné jednotky akceptovatené výstupními zařízeními
|
||||
- fyzická velikost pixelu závisí na zařízení
|
||||
- jsou zavedeny a používány jiné jednotky (nutný převod)
|
||||
|
||||
**Fyzické jednotky**
|
||||
- milimetr, centimetr
|
||||
- palec (inch, in)
|
||||
- 1 inch = 25.4 mm
|
||||
- DTP bod (point, pt)
|
||||
- 1 pt = 1/72 palce
|
||||
- device independent pixel (DIP)
|
||||
- 1 DIP = 1/96 palce
|
||||
|
||||
**Logické jednotky**
|
||||
- násobky (0.01 palce, 0.1 mm, ...)
|
||||
|
||||
**Relativní jednotky**
|
||||
- procenta (např. celkové fyzické šířky obrazu)
|
||||
- em = velikost vztažená na velikost písmene M současného písma
|
||||
|
||||
**Problém**
|
||||
- fyzická velikost pixelu závisí na zařízení
|
||||
- **PPI** (pixels per inch)
|
||||
- počet pixelů na palec
|
||||
- obrazové rozlišení
|
||||
- zaměňováno za DPI (150 DPI u scannerů obvykle znamená 150 PPI)
|
||||
- dostupné pro papír (tiskárny, scannery)
|
||||
- není dostupné pro obrazovku
|
||||
- předpokládá se pro ně 96 PPI (72 PPI u Mac OS)
|
||||
- **DPI** (dots per inch)
|
||||
- historicky starý a velmi rozšířený pojem
|
||||
- pochází z tisku (pixel simulován několika puntíky - dots)
|
||||
- tiskové rozlišení
|
||||
- **LPI** (lines per inch)
|
||||
|
||||
## Kreslení grafických objektů
|
||||
|
||||
Grafické objekty složeny z grafických primitiv (úsečka, kružnice, ...).
|
||||
|
||||
**Přímý přístup**: postupné vykreslování primitiv a vizuální skládání požadovaného výsledku
|
||||
- kresebně orientovaný
|
||||
- jednodušší, ale omezení možnosti
|
||||
- **pixelový přístup**
|
||||
- nejstarší, velmi rychlý, vhodný např. pro LED reklamní panely
|
||||
- práce přímo s pixely,
|
||||
- rychlejší, zubatý vzhled
|
||||
- **logický přístup**
|
||||
- převod na pixely provede grafický systém
|
||||
- práce pomocí kreslících případů
|
||||
- kvalitní vzhled, lze nakreslit skoro cokoliv, náročnější
|
||||
|
||||
**Nepřímý přístup**: nadefinuje se geometrický objekt složený z primitiv a poté se vykreslí jako celek
|
||||
- objektově orientovaný
|
||||
- složitější, ale s objekty je možno před vykreslením pracovat
|
||||
- vhodné pro interaktivní grafiku, množinové operace, ...
|
||||
- výpočetně náročné
|
||||
|
||||
**Pero** (pen, stroke)
|
||||
- slouží k vykreslení obrysu
|
||||
- šířka
|
||||
- styl čáry (plná, čárkovaná, tečkovaná, ...)
|
||||
- způsob napojení čáry (miter, bevel, round, none)
|
||||
- způsob zakončení (flat, square, round)
|
||||
|
||||
**Výplň** (brush, paint, fill)
|
||||
- vykreslení vnitřku objektu
|
||||
- barvy:
|
||||
- jednobarevná výplň
|
||||
- výplň lineárním gradientem (barevný přechod mezi body)
|
||||
- výplň radiálním gradientem
|
||||
- výplň šrafováním
|
||||
- výplň texturou, kresbou
|
||||
|
||||
**Štětec** (brush)
|
||||
- často zaměňované za výplň/pero
|
||||
- určeno pro efekty
|
||||
|
||||
### Grafická primitiva
|
||||
|
||||
**Čára** (úsečka)
|
||||
- počáteční a koncový bod
|
||||
|
||||
**Obdélník**
|
||||
- strany rovnoběžné s osami x, y
|
||||
- nejčastěji levý horní roh, šířka a výška
|
||||
- může mít zakulacené rohy
|
||||
|
||||
**Elipsa**
|
||||
- umístění (střed, levý horní roh) a velikost v osách x, y
|
||||
- je možné vytvořit i kruh či kružnici
|
||||
|
||||
**Oblouk** (arc)
|
||||
- část elipsy, která je definována:
|
||||
- jako elipsa, počátečním úhlem a koncovým úhlem
|
||||
|
||||
**Polygon**
|
||||
- uzavřená lomená čára (definováno posloupností vrcholů)
|
||||
|
||||
**Rovinná křivka**
|
||||
- vektorová funkce $F(x, y), x = f(t), y = g(t)$ taková, že funkce f a g jsou pro proměnnou t spojité
|
||||
- lze ji po částech nahradit matematicky definovanou parametrickou elemetární rovinnou křivkou
|
||||
- typicky kubická funkce, konstanty určeny elementárním typem křivky (Bezier, Coons, NURBS, ...)
|
||||
|
||||
### Práce s písmem
|
||||
|
||||
- vykreslování jednotlivých znaků
|
||||
- řazení znaků do slova
|
||||
- řazení slov do řádků
|
||||
|
||||
**Rodina písma**
|
||||
- bezpatková (sans seri) nebo patková (serif)
|
||||
- proporciální nebo neproporciofnální (monospace)
|
||||
|
||||
**Formáty**
|
||||
- **rastrové písmo**
|
||||
- nejstarší
|
||||
- pro každý znak bitmapa
|
||||
- fixní velikost písma
|
||||
- **Type 1** (.pfb, pfm)
|
||||
- Adobe
|
||||
- součástí PostScript pro komunikaci s laserovými tiskárnami
|
||||
- glyfy definovány jako Bezierovy křivky
|
||||
- **TrueType** (.ttf, .tte)
|
||||
- Apple a Microsoft
|
||||
- glyfy definovány jako Bezierovy křivkys
|
||||
- unicode
|
||||
- **OpenType** (.ttf, .otf)
|
||||
- Microsoft a Apple
|
||||
- glyfy definovány jako TrueType nebo Bezierovy křivky
|
||||
- rozšířené typografické možnost (ligatury, ...)
|
||||
|
||||
**Řez písma**
|
||||
- normální
|
||||
- tučné
|
||||
- kurzíva (italic)
|
||||
- tučné italikou
|
||||
|
||||
**Víceřádkový text**
|
||||
- dlouhý text zalamován na více řádků
|
||||
- neproporcionální písmo - daný počet znaků na řádce
|
||||
- proporcionální písmo - zalamování na fyzickou šířku
|
||||
|
||||
**Zarovnání textu**
|
||||
- doleva
|
||||
- nejjednodušší
|
||||
- vhodné pro krátké texty, úzké sloupce, URL, chemické vzorce, ...
|
||||
- doprava
|
||||
- vhodné pro velmi krátké texty
|
||||
- na osu (např. na střed)
|
||||
- vhodné pro velmi krátké texty
|
||||
- do bloku
|
||||
- levé i pravé okraje řádků pod sebou
|
||||
- technicky nejsložitější (změna velikosti mezislovních mezer)
|
||||
- vhodné pro delší texty
|
||||
Loading…
Reference in New Issue