7.6 KiB
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