# 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