246 lines
7.6 KiB
Markdown
246 lines
7.6 KiB
Markdown
|
# 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
|