Next: kapitola 5  Managing Visual Styles Up: část I  Uživatelský návod Previous: kapitola 3  Editor rovnic

Kapitola 4
Kreslení obrázků

Pomocí editoru můžeme připravovat jednoduché obrázky, obsahující 2D vektorovou nebo rastrovou grafiku. Obrázky mohou obsahovat text, rovné či zakřivené tvary, obdélníky, spojky, šipky a rastrové obrázky.

4.1 Nový obrázek

Nový obrázek vložíme do dokumentu pomocí tlačítka nebo . Podobně jako u tabulek lze využít variantu bez nebo s číslovaným titulkem. Po vložení obrázku se zobrazí prázdná kreslící plocha, a nástrojová lišta Kreslení, viz obr. 4.1. Pomocí lišty přidáváme do obrázku nové grafické objekty.

Obr. 4.1 Prázdná kreslící plocha a lišta Kreslení

4.2 Přidáváme grafické objekty

Přidání nového objektu provedeme výběrem kreslícího nástroje z lišty Kreslení. Jednotlivé nástroje jsou podrobně popsány v následujících sekcích.

Po výběru nástroje se zobrazí lišta Nový objekt, viz obr. 4.2. Pomocí této lišty můžeme nastavit požadované vlastnosti objektu, dříve než ho přidáme na kreslící plochu. Těmito vlastnostmi může být barva výplně (), barva popředí (), či další specifické vlastnosti (). Vlastnosti lze samozřejmě změnit i u objektů, které již byly do nástrojové lišty přidány.

Obr. 4.2 Nástrojová lišta Nový objekt

První ikona na liště indikuje typ kreslícího nástroje, tedy typ objektu, který bude přidán do obrázku. Žlutá hvězdička napovídá, že se jedná o vlastnosti zatím neexistujícího, prototypového objektu, který bude teprve vytvořen. Pokud přesuneme kurzor myši nad kreslící plochu, kurzor myši se změní do tvaru aktivního kreslícího nástroje. Jsme-li s nástrojem hotovi a chceme manipulovat s existujícími objekty na obrázku, zrušíme nástroj stisknutím klávesy ESC nebo pravého tlačítka myši.

4.2.1 Tvary

Různé tvary jako jsou čáry, kvadratické křivky, Bézierovy křivky nebo oblouky, přidáme pomocí odpovídajících nástrojů , , nebo . Po zvolení nástroje nakreslíme zvolenou křivku tažením myší. Tímto nástrojem vytváříme tvary obsahující jediný segment.

Pro modifikaci tvaru zrušíme aktivní kreslící nástroj, a vybereme tvar pomocí myši. Zobrazí se nástrojová lišta Tvar. Dále se zobrazí množství obdélníčků podél tvaru, viz obr. 4.3. Tyto obdélníčky reprezentují manipulační body, které můžeme použít pro změnu tvaru jejich tažením myší.

Obr. 4.3 Manipulační body segmentů tvaru

Pro přidání různých typů segmentů k označenému segmentu použijeme některý z nástrojů lišty Tvar: , , , nebo . Poté klikáním myší přidáváme segmenty zvoleného typu k označenému segmentu. Všimněte si rozdílu mezi nástrojem a : první nástroj vytvoří nový tvar obsahující jediný segment, kdežto druhý nástroj přidá segment k označenému tvaru. Pro zrušení jednoho segmentu z nějakého tvaru klikneme na segment pravým tlačítkem myši a z kontextového menu vybereme příkaz Zruš Segment.

Tvary jsou implicitně otevřené, mají tedy začátek a konec. Pokud tvar uzavřeme příkazem začátek a konec tvaru se propojí úsečkou. Opětovné použití příkazu zruší uzavřený stav. Uzavřené tvary mohou být vyplněny barvou. Vyplněný/nevyplněný stav přepneme tlačítkem .

4.2.2 Obdélníky

Do obrázku můžeme přidat uzavřené tvary obdélníkového či jiného tvaru. Tyto tvary mohou volitelně obsahovat text. Obdélník vytvoříme pomocí jednoho z nástrojů uvedených v tabulce 4.1. Po zvolení nástroje nakreslíme obdélník stiskem tlačítka myši a tažením doprava a dolů. Pomocí tlačítka nastavíme zda obdélník obsahuje či neobsahuje text.

Tabulka 4.1 Nástroje pro tvorbu obdélníků

Bez textu S textem Obdélníkový Se zakulacenými rohy Eliptický

Jako text můžeme do obdélníku vložit jakýkoli materiál, například odstavec, sekvenci odstavců, seznam apod. Požadovanou šířku obdélníku nastavíme pomocí jeho žlutého manipulačního bodu, zobrazeného v jeho pravém dolním rohu, viz obr. 4.4. Text obdélníku je pak nalámán tak, aby se vešel do požadované šířky. Požadovaná výška může být větší než je potřeba pro vložení textu, část obdélníku je potom prázdná. Je-li však požadovaná výška příliš malá, je automaticky upravena tak, aby se text do obdélníku celý vešel.

Obr. 4.4 Zlom textu v obdélníku

Obdélník obsahující tabulku vytvoříme pomocí nástroje . Opět můžeme pomocí žlutého bodu nastavit preferovanou velikost tabulky. Struktura tabulky se definuje stejným způsobem jako struktura běžné tabulky, viz sekce 2.7.

4.2.3 Rastrová grafika

Rastrový obrázek, také znám jako bitmapa, vložíme zkopírováním obrázku do schránky a vložením stiskem kláves Shift + Insert. Pomocí kontextového menu nastavíme vlastnosti obrázku. Příkazem Nastavit měřítko můžeme obrázek zvětšit nebo zmenšit. Příkazem Ořezat ořízneme okraje obrázku stejné barvy, viz obr. 4.5. Chceme-li, aby jedna z barev použitých v obrázku byla průhledná, použijeme příkaz Nastav průhlednou barvu, a myší označíme barvu která se má zprůhlednit.

Obr. 4.5 Ořezání rastrového obrázku

4.2.4 Spojky

Obdélníky a uzavřené tvary můžeme propojovat různými typy spojek. Spojka je rovná, lomená nebo zakřivená čára propojující dva objekty. Koncové body spojky se automaticky upraví při každé změně polohy nebo velikosti propojených objektů. Konce spojek mohou mít různá zakončení jako jsou šipky nebo kroužky.

Novou spojku vytvoříme pomocí nástrojů pro rovnou spojku, pro zakřivenou spojku, pro lomenou spojku, nebo pro dvakrát zalomenou spojku. Spojku nakreslíme tažením myší. Pokud pohybujeme kurzorem nad nějakým objektem, konec spojky se zafixuje na střed tohoto objektu. Při uvolnění tlačítka myši zůstane konec spojky spojen s tímto objektem. Pokud chceme zabránit fixování spojky na objekt, podržíme během tažení konce spojky klávesu Ctrl.

Je-li konec spojky zafixován na střed nějakého objektu, je tvar spojky oříznut podle okraje tohoto objektu, takže spojka vizuálně navazuje na okraj objektu, nikoli na jeho střed, viz obr. 4.6. Zakřivená spojka může mít identický začátek a konec, čímž vznikne smyčka, viz obr. 4.6e. V tomto případě má spojka o jeden manipulační bod navíc, kterým nastavíme úhel natočení smyčky kolem jejích koncových bodů.

Obr. 4.6 Různé tvary spojek: (a) přímá spojka, (b) zakřivená spojka, (c) zalomená spojka, (d) dvakrát zalomená spojka, (e) smyčka

Pokud vytvoříme složitý diagram obsahující množství vzájemně propojených obdélníků, můžeme obdélníky automaticky rozmístit. Provedeme to vybráním kořenového obdélníku, a aktivací příkazu Automatické rozvržení z kontextového menu, viz obr. 4.7. Od této chvíle je poloha všech obdélníků s výjimkou kořenového řízena automaticky. V případě potřeby můžeme automatické rozvržení zase vypnout a ručně doladit rozmístění obdélníků.

Obr. 4.7 Automatické rozmístění obdélníků.

4.2.5 Lineární Kóty

Lineární kótu přidáme do obrázku pomocí nástroje , viz obr. 4.8a. Tvar kóty nastavíme pomocí pěti manipulačních bodů, viz obr. 4.8b. Dva body řídí polohu šipky kóty, další dva polohu konců kolmých úseček. Poslední, zelený bod určuje pozici popisku kóty. Podobně jako u spojek můžeme kolmé úsečky zafixovat na části jiných objektů, a tím zajistit, že tvar kóty se automaticky upraví při změně geometrie kótovaného objektu.

Obr. 4.8 Příklad kót: (a) Typy kót, (b) Manipulační body kóty

4.2.6 Skriptovaná grafika

Někdy je vhodné popsat část obrázku pomocí algoritmu, nebo skriptu, namísto interaktivního přidávání grafických objektů. K tomuto účelu slouží nástroj Skriptovaná grafika (). Po aktivaci nástroje tažením myši nadefinujeme základní obrys skriptovaného obrázku, a příkazem otevřeme editor skriptu, kde naprogramujeme vzhled obrázku. Na obr. 4.9 vidíme příklad skriptu a jemu odpovídající grafiky. Podrobný popis skriptovacího jazyka je nad rámec této dokumentace.

List sin = list(); List cos = list(); translate(0,height/2); double scale=3; width = width/scale-0.2; scale(scale); translate(0.2,0); for (double i=-0.2; i<width; i+=0.2) { sin.add(p(i, sin(i))); cos.add(p(i, cos(i))); } setColor(red); draw(poly(sin)); setColor(blue); draw(poly(cos)); setColor(black); setStroke(0.02); draw(line(0,-1.2,0,1.2)); draw(line(-0.2,0,width,0));

Obr. 4.9 Příklad skriptované grafiky

4.3 Editace obrázků

Existující grafické objekty v obrázku můžeme jednoduše editovat. Přesunutí objektu provedeme prostým tažením myší. Pokud má vybraný objekt manipulační body, je třeba před tažením kliknout mimo manipulační bod, aby došlo k přesunu objektu, nikoli změně jeho tvaru. Potřebujeme-li přesouvat více objektů najednou, provedeme výběr kliknutím mimo objekty, a tažením myši ohraničíme objekty které chceme vybrat. Přesun výběru poté provedeme tažením libovolného vybraného objektu. Z výběru můžeme také přidat nebo odebrat jednotlivé objekty kliknutím při stisknuté klávese Ctrl. Vybrané objekty smažeme stiskem klávesy Delete.

Velikost kreslící oblasti nelze explicitně nastavit; její velikost je nastavena automaticky tak, aby pojala všechny vložené objekty. Pokud přesuneme objekt za okraj kreslící oblasti, objekt dočasně zmizí, ale po jeho umístění se kreslící oblast zvětší tak aby se do ní přesunutý objekt vešel. Relativní poloha objektů v kreslící oblasti tedy nemá význam. Pokud přesuneme všechny objekty v oblasti, vrátí se vzhled oblasti po přepočítání jejích rozměrů do původního stavu.

Objekty lze kopírovat dvěma způsoby: buď přesuneme objekty tažením myši a současně držíme stisknutou klávesu Ctrl, nebo zkopírujeme označené objekty do schránky stiskem Ctrl + Insert, a stiskem Shift + Insert vložíme kopii obsahu schránky do obrázku. Druhý způsob lze použít i pro kopírování objektů mezi obrázky. Je také možné vytvořit kopii celého obrázku pomocí panelu struktury dokumentu, viz sekce 2.2.

Objekty jsou přidány do obrázku v určitém pořadí, které ovlivňuje jejich vzájemné překrývání. Objekt vložený později je umístěn “před” objektem umístěným dříve. Pokud se takové objekty překrývají, později nakreslený objekt zakryje objekt nakreslený dříve. Vzájemné pořadí objektů lze však dodatečně upravovat. Objekt posuneme o pozici dopředu stiskem tlačítka nebo dozadu stiskem tlačítka . Tlačítko přenese objekt před všechny objekty, zatímco tlačítko ho přenese za všechny objekty.

4.4 Setting Visual Properties

4.5 Měření textu

Jelikož Editor není přísně typu WYSIWYG, jak bylo vysvětleno v sekci 1.1, mohou být při nasazení dokumentu v jiném kontextu změněny vlastnosti písma použitého v obrázku. To může změnit rozměry textu a tím poškodit vzhled obrázku. Proto se nedoporučuje pomocí stylů měnit typ nebo velikost písma použitého v obrázcích.

Editor navíc implicitně přizpůsobuje zobrazený text tak, aby byl dobře čitelný i na zařízeních s nízkým rozlišením, jako jsou obrazovky počítačů. V rámci tohoto přizpůsobení jsou nastaveny rozměry každého znaku tak, aby měl celočíselné rozměry, což však způsobuje, že při změně měřítka obrázku se rozměry textu nemění rovnoměrně. Pokud například zmenšíme znak široký 11 bodů na polovinu, bude široký 5 nebo 6 bodů, což je značná odchylka od správné hodnoty 5,5 bodu. Určování rozměrů textu je tedy značně nepřesné, s chybou řádu až desítek procent, což může v důsledku opět způsobit poškození struktury obrázku. Pokud náš obrázek vyžaduje přesné měření velikosti textu, nastavíme vlastnost Přesné měření. Tím vynutíme rovnoměrné změny rozměrů textu při změně měřítka, ale způsobíme poněkud nepravidelný vzhled textu zobrazeného v nízkém rozlišení.

4.6 Transformace

Existující objekty lze transformovat pomocí transformačních operací. Tato vlastnost je zvláště užitečná ve spojení s animací, popsané v sekci 4.7. Čtyři základní transformační operace jsou zobrazeny na obr. 4.10.

Obr. 4.10 Transformační operace

Novou transformaci přidáme do obrázku použitím tlačítka na liště obrázku. Zobrazí se okno Vlastnosti transformace, viz obr. 4.10. Zpočátku je seznam operací prázdný. Novou operaci přidáme stiskem tlačítka Nová, a výběrem jedné ze čtyř operací z nabídky. Do seznamu je přidána vytvořená operace spolu s odpovídajícími parametry. Různé operace mají různé parametry, viz tabulka 4.2.

Obr. 4.11 Okno Vlastnosti transformace

Každá transformace může mít identifikátor, který zadáme v okně Vlastnosti transformace. Tento identifikátor můžeme využít později, např. při programové změně parametrů transformace za účelem dosažení efektu animace, viz sekce 4.7.

Tabulka 4.2 Parametry transformačních Operací

Operace Popis Parametry Posun Posune objekt o daný vektor x , y... vektor posunu Rotace Otočí objekt o daný úhel okolo daného bodu x , y... střed otáčení, theta... úhel otáčení ve stupních (ve směru hodinových ručiček) Změna měřítka Změní měřítko objektu x , y... střed změny měřítka, sx... horizontální zvětšení, sy... vertikální zvětšení; lze použít záporné hodnoty pro převrácení objektu Střih Deformuje objekt střihem x , y... střed deformace, sx... horizontální střih, sy... vertikální střih

Do jedné transformace lze přidat více transformačních operací. Operace se v takovém případě aplikují na objekty postupně, jedna po druhé. Pro operace mající střed, tedy všechny operace kromě posunu, lze zadat střed transformace stiskem tlačítka Vyber bod a výběrem bodu v obrázku pomocí myši. Proměnné x , y vybrané operace jsou potom automaticky nastaveny podle vybraného bodu.

Obr. 4.12 Přesun objektů do transformace

Je-li transformace definována, potřebujeme zařídit, aby byla aplikována na vybrané objekty. Aplikaci lze provést přesunem zvolených objektů do objektu transformace pomocí panelu lokální struktury dokumentu, viz obr. 4.12. Po přesunutí objektů se začnou transformační operace aplikovat na vybrané objekty. Transformační objekty lze do sebe takto vnořovat, a dosáhnout tak efektu skládání transformací.

4.7 Animace

Pomocí editoru obrázků můžeme snadno proměnit statické obrázky na obrázky animované, doplněním animačních pravidel. Animační pravidla pro obrázek definujeme výběrem obrázku a použitím příkazu Animační pravidla z kontextového menu, Zobrazí se okno Animační pravidla, viz obr. 4.13.

Obr. 4.13 Okno Animační pravidla

Každé pravidlo má tvar objekt = hodnota, kde objekt je výraz který se vyhodnotí na objekt přijímající hodnotu, a hodnota je výraz který se vyhodnotí na objekt který poskytuje hodnotu. Během animace jsou pravidla periodicky vykonávána, výrazy na pravých stranách jsou vyhodnocovány a přiřazovány do objektů na levých stranách pravidel. Objekty, které lze použít na levé straně pravidla jsou shrnuty v tabulce 4.3. Pravá strana pravidla může být aritmetický výraz, obsahující matematické operátory, funkce, a animační parametr time (čas). Tento parametr reprezentuje reálný čas v sekundách, startující od nuly v okamžiku startu animace, tedy v okamžiku zobrazení prvního snímku animovaného obrázku.

Tabulka 4.3 Animovatelné vlastnosti

Vlastnost Popis transformace[n].parametr Parametr n-té operace transformace. Nabídka parametrů závisí na typu operace, viz sekce 4.6. objekt.barva.složka Nastavuje barvu objektu. barva může být jedno z foreColor (barva popředí), backColor (barva pozadí), backColor2 (alternativní barva pozadí při gradientním vyplňování) nebo borderColor (barva rámečku). složka je jedno z r, g, b pro specifikaci barvy v RGB modelu (červená-zelená-modrá), nebo jedno z c, m, y pro specifikaci barvy v CMY modelu (azurová-fialová-žlutá). Složky barev by měly být v intervalu .

Příklad animace je zobrazen na obr. 4.14. obr. 4.14a ukazuje transformace definované na obrázku. obr. 4.14b ukazuje animační pravidla. Na obr. 4.14c vidíme výsledný animovaný obrázek.

R[0].radTheta=time F1[0].radTheta=sin(time*2)/10 F2[0].radTheta=sin(time*2)/10 S[0].sx=sin(time*2)/(0-8) (a) (b) (c)

Obr. 4.14 Ukázka animovaného obrázku: (a) parametrizovaný obrázek, (b) animační pravidla, (c) animovaný obrázek

Next: kapitola 5  Managing Visual Styles Up: část I  Uživatelský návod Previous: kapitola 3  Editor rovnic