From 3b9685362e92b75d304edb9ccbe8253f01fdb6ff Mon Sep 17 00:00:00 2001 From: Filip Znachor Date: Wed, 24 May 2023 10:39:13 +0200 Subject: [PATCH] =?UTF-8?q?Pozn=C3=A1mky=20z=201.=20p=C5=99edn=C3=A1=C5=A1?= =?UTF-8?q?ky=20z=20UPG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- KIV UPG/01. Základní 2D vektorová grafika.md | 246 +++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 KIV UPG/01. Základní 2D vektorová grafika.md diff --git a/KIV UPG/01. Základní 2D vektorová grafika.md b/KIV UPG/01. Základní 2D vektorová grafika.md new file mode 100644 index 0000000..0a395de --- /dev/null +++ b/KIV UPG/01. Základní 2D vektorová grafika.md @@ -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 \ No newline at end of file