FAV-ZCU/KIV UPG/01. Základní 2D vektorová grafika.md

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