KATEDRA INFORMATIKY. Kreslení obrázků pro výuku matematiky

ˇ ´IRODOVEDECK ˇ ´ FAKULTA UNIVERZITY PALACKEHO ´ PR A KATEDRA INFORMATIKY

´ RSK ˇ ´ PRACE ´ BAKALA A

Kreslen´ı obr´azk˚ u pro v´yuku matematiky

2013

Jiˇr´ı Sp´aˇcil

Anotace Pr´ ace popisuje vytvoˇrenou aplikaci na kreslen´ı matematick´ych obr´azk˚ u pro v´yuku matematiky. Zab´yv´a se zp˚ usobem jej´ıho efektivn´ıho vyuˇz´ıv´ an´ı a pˇr´ınosem pro uˇzivatele. Pˇredstavuje zp˚ usob implementace v C# a r˚ uzn´e moˇznosti vykreslov´an´ı grafiky pod platformou Windows. Popisuje zp˚ usob pˇrevodu obr´azk˚ u do r˚ uzn´ych vektorov´ych form´at˚ u. V posledn´ı ˇradˇe urˇcuje smˇer dalˇs´ıho rozvoje t´eto aplikace.

Dˇekuji sv´emu vedouc´ımu pr´ace Mgr. Janu Outratovi, Ph.D. za podnˇetn´e rady a vstˇr´ıcnost.

Obsah 1. Pˇ redstaven´ı projektu 1.1. Rozbor zad´an´ı . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2. Inspirace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ˇ sen´ı probl´ 2. Reˇ emu 2.1. Vektorov´a grafika . . . . . . . . . 2.1.1. V´ yhody vektorov´e grafiky 2.2. Uˇzivatelsk´e rozhran´ı . . . . . . . 2.2.1. Ribbon bar . . . . . . . . 2.2.2. Implementace Ribbonu . . 2.2.3. Metafora r´ ysovac´ı plochy . 2.3. Vlastn´ı implementace . . . . . . . 2.3.1. Grafika v C# . . . . . . . 2.3.2. WPF . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

3. Jak pracovat s aplikac´ı

8 8 8 9 9 9 10 10 11 11 11 12 13 15

4. Uˇ zivatelsk´ a pˇ r´ıruˇ cka 4.1. Instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2. Zaˇc´ın´ame . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.2.1. Popis hlavn´ıho okna . . . . . . . . . . . . . . . . . . 4.2.2. Navigace uˇzivatele po pl´atnˇe . . . . . . . . . . . . . . 4.2.3. Popis ribbonu . . . . . . . . . . . . . . . . . . . . . . 4.2.4. Vkl´ad´an´ı grafick´ ych objekt˚ u . . . . . . . . . . . . . . 4.2.5. Vyb´ır´an´ı grafick´ ych objekt˚ u nebo jejich skupin . . . . 4.2.6. Z´akladn´ı manipulace s grafick´ ymi objekty . . . . . . 4.3. Z´aloˇzka N´astroje . . . . . . . . . . . . . . . . . . . . . . . . 4.3.1. Kop´ırovat, Vloˇzit, Smazat . . . . . . . . . . . . . . . 4.3.2. Mˇr´ıˇzka . . . . . . . . . . . . . . . . . . . . . . . . . . ˇıˇrka, Styl . . . . . . . . . . . . . . . . 4.3.3. Pero, V´ yplˇ n, S´ 4.3.4. Dopˇredu, Dozadu . . . . . . . . . . . . . . . . . . . . ´ 4.3.5. Vazby, Uhel, Rotace, Pr˚ unik, Slouˇcen´ı, Transformace 4.3.6. Funkce Vazby . . . . . . . . . . . . . . . . . . . . . . ´ 4.3.7. Funkce Uhel . . . . . . . . . . . . . . . . . . . . . . . 4.3.8. Funkce Rotace . . . . . . . . . . . . . . . . . . . . . 4.3.9. Funkce Transformace . . . . . . . . . . . . . . . . . . 4.3.10. Funkce Slouˇcen´ı . . . . . . . . . . . . . . . . . . . . . 4.3.11. Funkce Pr˚ unik . . . . . . . . . . . . . . . . . . . . . . 4.4. Z´aloˇzky Prvky . . . . . . . . . . . . . . . . . . . . . . . . . . 4.4.1. Prvky . . . . . . . . . . . . . . . . . . . . . . . . . . 4.4.2. Mnoho´ uheln´ıky . . . . . . . . . . . . . . . . . . . . .

4

. . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . .

17 17 17 17 17 18 19 19 19 19 19 20 20 20 20 21 23 24 24 25 26 27 27 27

4.4.3. Kuˇzeloseˇcky . . . . . . . 4.4.4. Kˇrivky . . . . . . . . . . 4.5. Z´aloˇzka Obr´azky 1 a Obr´azky 2 4.6. Jak zruˇsit definovan´e vazby . . 4.7. Ukl´ad´an´ı . . . . . . . . . . . . . 4.8. Otev´ır´an´ı . . . . . . . . . . . . 4.9. Tisk . . . . . . . . . . . . . . . 4.10. Undo, redo . . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

27 27 28 28 29 30 30 30

5. N´ avod na efektivn´ı kreslen´ı matematick´ ych obr´ azk˚ u 5.1. Z´akladn´ı obr´azky . . . . . . . . . . . . . . . . . . . . . 5.1.1. Bod s textem . . . . . . . . . . . . . . . . . . . 5.1.2. Osov´ y kˇr´ıˇz . . . . . . . . . . . . . . . . . . . . . 5.1.3. Mˇr´ıˇzka ke graf˚ um . . . . . . . . . . . . . . . . . 5.1.4. Zn´azornˇen´ı u ´hlu . . . . . . . . . . . . . . . . . . 5.2. Sloˇzitˇejˇs´ı matematick´e obr´azky . . . . . . . . . . . . . . 5.2.1. Seˇcna funkce se zv´ yraznˇen´ ym troj´ uheln´ıkem . . 5.2.2. Hyperbola s popisky . . . . . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

31 31 31 31 33 34 35 35 36

struktury k´ odu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38 38 38 39

. . . .

. . . .

39 39 40 40 40

8. Pˇ revod do jin´ ych form´ at˚ u 8.1. Ukl´ad´an´ı do SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.2. Ukl´ad´an´ı do PDF . . . . . . . . . . . . . . . . . . . . . . . . . . .

41 41 41

9. Moˇ znosti rozˇ s´ıˇ ren´ı aplikace

43

10.Motivace pro dalˇ s´ı pr´ aci

43

Z´ avˇ er

44

Conclusions

45

Reference

46

6. Rozbor architektury aplikace a 6.1. Manaˇzer GUI . . . . . . . . . 6.2. Manaˇzer J´adro . . . . . . . . 6.3. Manaˇzer Ukl´ad´an´ı . . . . . . 7. Pouˇ zit´ e algoritmy 7.1. Pˇridˇelov´an´ı ID ˇc´ısel . 7.2. Kontrola kolize vazeb 7.3. Obsluha funkce uhel 7.4. Kontroln´ı souˇcet . .

. . . .

. . . .

. . . .

. . . .

. . . .

5

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

A. Obr´ azky vytvoˇ ren´ e aplikac´ı Matematick´ e obr´ azky

47

B. Obsah pˇ riloˇ zen´ eho CD

49

6

Seznam obr´ azk˚ u 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31.

Zn´azornˇen´ı definice cesty vektorov´e grafiky . . . . . Ribbon bar z Microsoft Office . . . . . . . . . . . . Uk´azka XAML k´odu . . . . . . . . . . . . . . . . . Z´akladn´ı grafick´e objekty . . . . . . . . . . . . . . . Hlavn´ı okno . . . . . . . . . . . . . . . . . . . . . . Ikony pro zobrazov´an´ı pl´atna . . . . . . . . . . . . Ribbon aplikace Matematick´e obr´azky . . . . . . . Okno funkce vazby . . . . . . . . . . . . . . . . . . ´ Uhel ˇcar, zaˇca´tek . . . . . . . . . . . . . . . . . . . ´ Uhel ˇcar, v´ ysledek . . . . . . . . . . . . . . . . . . . Rotace, zaˇca´tek . . . . . . . . . . . . . . . . . . . . Rotace, pr˚ ubˇeh . . . . . . . . . . . . . . . . . . . . Transformace, zaˇc´atek . . . . . . . . . . . . . . . . Transformace, pr˚ ubˇeh . . . . . . . . . . . . . . . . . Sluˇcov´an´ı ˇcar, zaˇca´tek . . . . . . . . . . . . . . . . Sluˇcov´an´ı ˇcar, vysledek . . . . . . . . . . . . . . . . Pr˚ unik kruh˚ u, zaˇc´atek . . . . . . . . . . . . . . . . Pr˚ unik kruh˚ u, vysledek . . . . . . . . . . . . . . . . Tlaˇc´ıtka pro pˇrid´an´ı a odeb´ır´an´ı prvk˚ u do Ribbonu Okno Definovan´e vazby . . . . . . . . . . . . . . . . Zn´azornˇen´e menu . . . . . . . . . . . . . . . . . . . Rozm´ıstˇen´ı ˇcar . . . . . . . . . . . . . . . . . . . . Osov´ y kˇr´ıˇz . . . . . . . . . . . . . . . . . . . . . . . Postup pˇri tvorbˇe mˇr´ıˇzky . . . . . . . . . . . . . . . Zn´azornˇen´ı u ´hlu . . . . . . . . . . . . . . . . . . . . Seˇcna funkce s v´ yraznˇen´ ym troj´ uheln´ıkem . . . . . Hyperbola s popisky . . . . . . . . . . . . . . . . . Funkce X . . . . . . . . . . . . . . . . . . . . . . . Kruˇznice opsan´a . . . . . . . . . . . . . . . . . . . . ˇ Sesti´ uheln´ık . . . . . . . . . . . . . . . . . . . . . . Pr˚ unik mnoˇzin . . . . . . . . . . . . . . . . . . . .

7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9 10 14 16 18 18 18 21 23 23 24 24 25 25 26 26 26 26 28 29 29 32 32 34 35 36 37 47 47 48 48

1.

Pˇ redstaven´ı projektu

Vytvoˇril jsem interaktivn´ı aplikaci umoˇznuj´ıc´ı jednoduˇs´ı kreslen´ı matematick´ ych obr´azk˚ u, kter´e by se pouˇz´ıvaly k v´ yuce matematiky. Nakreslen´e obr´azky se pomoc´ı vestavˇen´ ych funkc´ı vz´ajemnˇe kombinuj´ı a tak vytv´aˇrej´ı sloˇzitˇejˇs´ı celky. Ty se pak daj´ı pˇr´ımo vkl´adat do uˇcebnicov´ ych text˚ u pomoc´ı form´atu SVG.

1.1.

Rozbor zad´ an´ı

Aplikace mˇela obsahovat ˇsablony obr´azk˚ u a ty pak vz´ajemnˇe modifikovat. Nemˇelo by se jednat o automatizovanou tvorbu geometrick´ ych konstrukc´ı. Aplikace by ovˇsem mˇela zjednoduˇsit a urychlit vlastn´ı kreslen´ı, co by byl i m˚ uj hlavn´ı c´ıl. Dalˇs´ı c´ıl bylo vytvoˇrit uˇzivatelsky pˇr´ıvˇetiv´e a jednoduch´e rozhran´ı. Z pohledu uˇzivatele je pr´avˇe uˇzivatelsk´e prostˇred´ı jedn´ım z hlavn´ıch mˇeˇr´ıtek pro kladn´e hodnocen´ı cel´eho projektu. Cel´a aplikace na tvorbu matematick´ ych obr´azk˚ u by se dala rozvinout opravdu mnoha zp˚ usoby, ˇclovˇeka napadaj´ı hned cel´e des´ıtky funkc´ı jak jednotliv´e matematick´e obr´azky definovat nebo moˇznosti jejich vz´ajemn´e modifikace. Vytvoˇril jsem z´akladn´ı prostˇred´ı pro libovoln´e aplikov´an´ı funkc´ı pro tvorbu takov´ ych obr´azk˚ u. Cel´a aplikace je navrˇzena tak, aby se dalˇs´ı funkce a komponenty daly do tohoto softwaru libovolnˇe dod´avat. T´ım se vytvoˇr´ı opravdu uˇziteˇcn´ y n´astroj pro tvorbu a v´ yuku matematiky a geometrie.

1.2.

Inspirace

Inspiraci pro tvorbu aplikace jsem ˇcerpal s grafick´ ych editor˚ u jako napˇr´ıklad Corel Draw nebo Inkscape. Tyto grafick´e editory vyuˇz´ıvaj´ı na malov´an´ı vektorovou grafiku, kter´a se pˇri tvorbˇe matematick´ ych obr´azk˚ u snadno nab´ız´ı. ˇ asteˇcnˇe jsem se inspiroval i sloˇzitˇejˇs´ımi aplikacemi jako CAD syst´emy C´ (computer-aided drawing - poˇc´ıtaˇcem podporovan´e kreslen´ı). Jednoduˇse lze vysvˇetlit pojem CAD i tak, ˇze se jedn´a o pouˇz´ıv´an´ı grafick´eho programu m´ısto r´ ysovac´ıho prkna. Samotn´e r´ ysov´an´ı nen´ı vlastnˇe nic jin´eho neˇz tvorba matematick´ ych obr´azk˚ u. Pro pˇr´ıklad uvedu editor Autocad od firmy Autodesk. Od t´eto firmy je to jeden s jejich nejstarˇs´ıch CAD editor˚ u, ale st´ale mezi odbornou veˇrejnost´ı popul´arn´ı. Autocad pouˇz´ıv´a pro r´ ysov´an´ı jen dvojrozmˇernou grafiku a tak simuluje r´ ysovac´ı prkno. Jejich editor dopoˇc´ıt´av´a rozmˇery ˇcar, velikost u ´hl˚ u, automaticky definuje nˇekter´e pravideln´e n-´ uheln´ıky atd. Jedn´a se pouze o generov´an´ı stroj´ırensk´ ych konstrukc´ı, ale zp˚ usob jejich tvorby mˇe hodnˇe ovlivnil.

8

V dneˇsn´ı dobˇe CAD editory od Autodesku plnˇe simuluj´ı pˇredmˇety re´aln´eho svˇeta. Pouˇz´ıvaj´ı trojrozmˇern´e rozhran´ı a poˇc´ıtaj´ı i s fyzick´ ymi vlastnostmi materi´al˚ u, ze kter´ ych jsou objekty v jejich editorech definovan´e.

2.

ˇ sen´ı probl´ Reˇ emu

V n´asleduj´ıc´ım textu budu postupnˇe rozeb´ırat t´emata, kter´a jsem uplatnil pˇri tvorbˇe aplikace. Tyto t´emata mi pomohli vyˇreˇsit probl´em s v´ yvojem aplikace a jej´ı vlastn´ı implementac´ı.

2.1.

Vektorov´ a grafika

Na vykreslov´an´ı matematick´ ych obr´azk˚ u v aplikaci jsem pouˇzil vektorovou grafiku. Vektorov´a grafika popisuje obr´azek pomoc´ı vektor˚ u. Obr´azek je sloˇzen z kˇrivek, kter´e se spojuj´ı takzvan´ ymi kotevn´ımi body. Tyto kˇrivky mohou m´ıt barevnou v´ yplˇ n formou jednolit´e plochy nebo barevn´eho pˇrechodu (gradientu). Jednotliv´e kˇrivky mohou na sebe jakkoliv navazovat a jejich vz´ajemn´e spojen´ı se definuje cestou od prvn´ıho kotevn´ıho bodu (startovac´ıho) aˇz k posledn´ımu. T´ımto zp˚ usobem lze popsat i tu nejsloˇzitˇejˇs´ı kˇrivku jakou jsme schopni nakreslit.

Obr´azek 1. Zn´azornˇen´ı definice cesty vektorov´e grafiky

2.1.1.

V´ yhody vektorov´ e grafiky

Hlavn´ı v´ yhodou vektorov´e grafiky je moˇznost v podstatˇe libovoln´eho zvˇetˇsov´an´ı jiˇz vytvoˇren´eho obr´azku a to bez sebemenˇs´ı ztr´aty na kvalitˇe. 9

Zat´ımco u rastrov´ ych obr´azk˚ u m´ame po zvˇetˇsen´ı jen hromadu r˚ uznobarevn´ ych ˇctvereˇck˚ u, vektorov´ y obr´azek se pˇrepoˇc´ıt´a a pˇrizp˚ usob´ı dan´e velikosti. Ukl´ad´an´ı vektorov´eho obr´azku na datov´ y nosiˇc n´am zabere mnohem m´enˇe m´ısta neˇz bitmapov´ y obr´azek. Jak jsem zm´ınil v textu v´ yˇse, ukl´ad´ame jen polohu kotevn´ıch bod˚ u slouˇcen´ ych do takzvan´e cesty a typ kˇrivek, kter´ y je pˇredem definov´an jako napˇr´ıklad: linka, kruh, p˚ ulkruh, b´ezierova kˇrivka atd. Form´aty pracuj´ıc´ı s vektorovou grafikou jsou SVG (Scalable Vector Graphics) a PDF (Portable Document Format). Vektorov´a grafika m´a i sv´e nev´ yhody. Jej´ı pouˇzit´ı je sloˇzitˇejˇs´ı, nakreslit nˇejak´ y obr´azek vyˇzaduje zkuˇsenost a jist´e kombinaˇcn´ı schopnosti. Pokud sloˇzitost grafick´eho obr´azku pˇrekroˇc´ı urˇcitou mez je pouˇzit´ı vektorov´e grafiky i pomˇernˇe n´aroˇcn´e na procesor, a jej´ı vykreslov´an´ı bude pomal´e.

2.2. 2.2.1.

Uˇ zivatelsk´ e rozhran´ı Ribbon bar

Jako hlavn´ı prvek uˇzivatelsk´eho rozhran´ı jsem pouˇzil Ribbon Bar (p´as karet). Ten m´a podobu ˇrady pˇrep´ınac´ıch karet, pˇriˇcemˇz kaˇzd´a karta v sobˇe sdruˇzuje skupinu ikon vz´ajemnˇe logicky souvisej´ıc´ıch funkc´ı. Tyto karty se zpravidla rozprost´ıraj´ı horizont´alnˇe v horn´ı ˇc´asti okna pˇr´ısluˇsn´e aplikace. Ribbon je Microsoftem patentovan´ y ovl´adac´ı prvek uˇzivatelsk´eho rozhran´ı pro jeho operaˇcn´ı syst´emy Windows. Ribbon se objevuje v novˇejˇs´ıch verz´ıch program˚ u firmy Microsoft, zejm´ena v kancel´aˇrsk´em bal´ıku Microsoft Office.

Obr´azek 2. Ribbon bar z Microsoft Office Ribbon byl poprv´e uveden v Office 2007 a po jeho pˇr´ızniv´em pˇrijet´ı byl pˇrid´an i do dalˇs´ıch aplikac´ı od Microsoftu – ve Windows 7 jsou tak Ribbonem vybaveny uˇz i WordPad, Malov´an´ı ˇci Windows Live Movie Maker. V operaˇcn´ım syst´emu Windows 8 se tento prvek nepˇrest´av´a pouˇz´ıvat a je j´ım vybaven i Pr˚ uzkumn´ık Windows.

10

Pouˇz´ıv´an´ı Ribbonu v aplikac´ıch mi pˇripad´a praktick´e a jeho ovl´ad´an´ı intuitivn´ı. Ovl´ad´an´ı cel´e aplikace a logick´e rozm´ıstˇen´ı funkc´ı se t´ım st´av´a lehce zapamatovateln´e. Pouˇzit´ı Ribbonu pro tuto aplikaci je pˇr´ınos hned z nˇekolika d˚ uvod˚ u. Jednak pro libovoln´e rozˇsiˇrov´an´ı cel´eho projektu, staˇc´ı ho jen doplnit dalˇs´ı kartou obsahuj´ıc´ı jin´e funkce. Nebo ho m˚ uˇze uˇzivatel pouˇz´ıvat s´am jako takov´ y ˇsupl´ık“, ” kam si odloˇz´ı vytvoˇren´e obr´azky a pak je n´aslednˇe pouˇz´ıt pˇri kreslen´ı sloˇzitˇejˇs´ıch celk˚ u. 2.2.2.

Implementace Ribbonu

Origin´aln´ı verze pro v´ yvoj´aˇre se plat´ı. Existuje mnoho spoleˇcnost´ı, kter´e tento ovl´adac´ı prvek nab´ızej´ı jako komponent pˇr´ımo do Visual Studia, cena je zhruba 1200,- $ (napˇr. Telerik). Jsou i voln´e verze, nejsou tolik graficky propracovan´e a nemaj´ı vˇsechny funkce origin´aln´ıho ribbonu, napˇr. uˇzivatelskou n´apovˇedu, nebo moˇznost vloˇzit Riboon pˇr´ımo do z´ahlav´ı hlavn´ıho okna aplikace. Ribbon, kter´ y jsem pouˇzil je jednou s voln´ ych verz´ı, bylo ho nutno ˇca´steˇcnˇe upravit a nˇekter´e funkce dopsat. 2.2.3.

Metafora r´ ysovac´ı plochy

Jako dalˇs´ı hlavn´ı prvek uˇzivatelsk´eho rozhran´ı jsem pouˇzil zobrazen´ı pap´ıru A4, kter´ y n´am poslouˇz´ı jako metafora pro kreslen´ı na skuteˇcn´ y pap´ır a d´av´a uˇzivateli vizu´aln´ı pˇrehled o skuteˇcn´ ych rozmˇerech nakreslen´eho obr´azku. R´ ysovac´ı plocha aplikace m´a nekoneˇcn´e okraje a umoˇzn ˇuje uˇzivateli kreslit obr´azky libovoln´e velikosti. Moˇznost zoomov´an´ı pap´ıru a r˚ uzn´e reˇzimy zobrazov´an´ı je dnes v aplikac´ıch tohoto typu standardn´ı z´aleˇzitost.

2.3.

Vlastn´ı implementace

K implementaci aplikace jsem pouˇzil C#. Je to jazyk vyvinut´ y spoleˇcnost´ı Microsoft. C# je zaloˇzen na jazyc´ıch C++ a Java. Je to modern´ı jazyk, jeho tv˚ urci kladly d˚ uraz na efektivn´ı vyuˇz´ıv´an´ı ˇcasu program´atora, kde se nemus´ı starat o deklaraci pamˇeti, hl´ıd´an´ı hranic pol´ı (kolekc´ı) a pouˇz´ıv´a se zde automatick´ y garbage collector. Vˇsechno je zde udˇelan´e tak, aby to bylo pˇrehledn´e, jednoduch´e, rychl´e.

11

C# m´a i negativn´ı str´anky, je mu vyt´ yk´an vˇseobecn´ y pomal´ y chod nˇekter´ ych algoritm˚ u a hlavnˇe komerˇcn´ı str´anka cel´e platformy1 . Co se t´ yˇce rychlosti bˇehu nˇekter´ ych algoritm˚ u se ve skuteˇcnosti program psan´ y v C# nem˚ uˇze mˇeˇrit s programem v C++. Probl´em je zde pˇr´ımo pˇri pˇrekl´ad´an´ı k´odu. C# se kompiluje do bytecodu (ofici´aln´ı oznaˇcen´ı CIL- Common Intermediate Language). Ten se nespouˇst´ı pˇr´ımo na procesoru, ale pˇri spuˇstˇen´ı je znovu kompilov´an z bytecodu do nativn´ıho k´odu a aˇz ten se spust´ı. Proto je zde menˇs´ı zpoˇzdˇen´ı v˚ uˇci nativn´ımu k´odu pˇr´ımo. Je zde jeˇstˇe nˇekolik omezen´ı. Jazyk samotn´ y nepodporuje mnohon´asobnou dˇediˇcnost, tˇeˇzko se v C# kop´ıruj´ı objekty atd. Microsoft kaˇzdou novou verz´ı Visual Studia nab´ız´ı urˇcit´e vylepˇsen´ı C#. Tyto nov´e verze postupnˇe odstraˇ nuj´ı nˇekter´a omezeni tohoto programovac´ıho jazyka. Nyn´ı jiˇz je k dispozici verze C# 5.0. Hlavn´ı d˚ uvod proˇc jsem si vybral C# je pr´avˇe jeho jednoduch´e pouˇz´ıv´an´ı a maxim´aln´ı optimalizace ˇcasu pˇri tvorbˇe takto n´aroˇcn´e aplikace. D˚ uleˇzit´ ym faktorem je dostupnost r˚ uzn´ ych publikac´ı pro tuto platformu a podpora v´ yvoj´aˇre na nejr˚ uznˇejˇs´ıch webov´ ych str´ank´ach nab´ızej´ıc´ı konzultace. 2.3.1.

Grafika v C#

Grafick´e rozhran´ı pro Windows zajiˇst’uje GDI (graphical de vice interface). A novˇejˇs´ı GDI+, kter´a obsahuje rozs´ahl´e grafick´e knihovny. S jej´ıch pomoc´ı jsme schopni vykreslovat vektorovou grafiku. Toto rozhran´ı pouˇz´ıv´a na zobrazov´an´ı grafiky okno, v terminologii .NET hovoˇr´ıme o tzv. formul´aˇri. Tento v´ yraz oznaˇcuje obd´eln´ıkov´ y objekt, kter´ y zab´ır´a oblast na obrazovce pro u ´ˇcely ˇcinnosti aplikace. Do tohoto formul´aˇre m˚ uˇzeme jednoduˇse vkl´adat i spoustu pˇreddefinovan´ ych ovl´adac´ıch prvk˚ u syst´emu Windows. Tyto ovl´adac´ı prvky vˇetˇsinou pˇri tvorbˇe jednoduˇsˇs´ıch aplikac´ı zcela v´ yvoj´aˇr˚ um postaˇc´ı, jejich jednoduch´e vkl´ad´an´ı a manipulace s nimi, poskytuj´ı v´ yvoj´aˇr˚ um moˇznost opravdu rychl´e tvorby aplikac´ı.

1 Vˇseobecnˇe pomal´ y chod algoritm˚ u se d´a ˇreˇsit efektivn´ım psan´ım k´odu. Napˇr´ıklad pokud chceme pouˇzit tˇr´ıd´ıc´ı algoritmus Quicksort pouˇzijeme jeho vnitˇrn´ı implementaci pˇr´ımo v pˇrekladaˇci, t´ım se rychlost algoritmu mnohon´asobnˇe zv´ yˇs´ı. Nakonec nejmodernˇejˇs´ı hry pro X-Box jsou pr´avˇe ps´any v C#.

12

Bohuˇzel, ve skuteˇcnosti je vykreslov´an´ı grafiky ve Windows Forms velice pomal´e. Z d˚ uvod˚ u pˇrekreslov´an´ı cel´eho formul´aˇre metodou OnPaint(), kterou v´ yvoj´aˇr nem˚ uˇze volat pˇr´ımo, ale jen pˇres metodu Invalidat(), kter´a posl´eze zajist´ı vlastn´ı pˇrekreslen´ı cel´eho formul´aˇre. Tato metoda a jej´ı vl´akno, ve kter´em se vol´a, m´a jen uˇzivatelskou prioritu. Operace kreslen´ı patˇr´ı v aplikac´ıch GDI+ t´emˇeˇr vˇzdy mezi nejn´aroˇcnˇejˇs´ı z hlediska zat´ıˇzen´ı procesoru. Kdyˇz kreslen´ı prob´ıh´a souˇcasnˇe s jin´ ymi operacemi, bude tyto dalˇs´ı operace zdrˇzovat. Kdybyste v tomto pˇr´ıkladu pˇr´ımo zavolali metodu pro kreslen´ı z metody LoadFile(), pak by metoda LoadFi1e() nemohla vr´atit ˇr´ızen´ı, dokud by nebyla kreslic´ı operace dokonˇcena. V tomto intervalu by aplikace nemohla reagovat na jin´e ud´alosti. Jestliˇze vˇsak zavol´ate metodu Invalidate(), jednoduˇse zajist´ıte, ˇze syst´em Windows vyvol´a ud´alost OnPaint() tˇesnˇe pˇred n´avratem z metody LoadFi1e(). Toto funkˇcn´ı omezen´ı a zatˇeˇzov´an´ı procesoru je nepˇr´ıpustn´e pro interaktivn´ı aplikace, proto jsem zvolil grafiku napsanou ve WPF.

2.3.2.

WPF

WPF (Windows Presentation Foundation) je jedno z pˇredn´ıch rozˇs´ıˇren´ı rozhran´ı .NET Framework 3.0. Jedn´a se o novou knihovnu, kter´a slouˇz´ı k vytv´aˇren´ı uˇzivatelsk´eho rozhran´ı mal´ ych klientsk´ ych aplikac´ı. Je zaloˇzeno na rozhran´ı DirectX, a pˇri vykreslov´an´ı nezatˇeˇzuje procesor. Zat´ımco ovl´adac´ı prvky Windows Forms jsou nativn´ımi ovl´adac´ımi prvky syst´emu Windows, kter´e uˇz´ıvaj´ı popisovaˇce okna zaloˇzen´e na pixelech. WPF aplikace popisovaˇce okna nepouˇz´ıv´a, pracuje m´ısto pixelu s primitivy. Pouˇzit´e ovl´adac´ı prvky maj´ı um´ıstˇen´ı relativnˇe k velikosti okna aplikace. Snadno se s n´ım mˇen´ı velikost uˇzivatelsk´eho rozhran´ı a je postavena na tzv. webov´em stylu. WPF m´a i pˇr´ımou podporu animac´ı a vektorov´e grafiky jak 2D i z´aklady 3D. Psan´ı vlastn´ıho k´odu je zde prov´adˇeno jazykem XAML (Extensible Application Markup Language), obdoba HTML. XAML je znaˇckovac´ı jazyk, vyuˇz´ıvan´ y k popisu grafick´eho rozhran´ı v aplikac´ıch spoleˇcnosti Microsoft. Pouˇzit´e grafick´e elementy ve WPF maj´ı hierarchickou stavbu, kaˇzd´ y je souˇca´st´ı vˇetˇs´ıho celku, nebo v sobˇe nese dalˇs´ı d´ılˇc´ı elementy. T´ımto jednoduch´ ym zp˚ usobem si zde m˚ uˇzeme vytv´aˇret vlastn´ı ovl´adac´ı prvky aplikace, jako napˇr´ıklad Ribbon. Pˇr´ımo Visual Studio obsahuje jednoduch´ y XAML editor. Bohuˇzel tvorba grafick´eho rozhran´ı je zde celkem pomal´a. Tento z´akladn´ı XAML editor obsahuje jen hrstku pˇreddefinovan´ ych ovl´adac´ıch prvk˚ u. Pro efektivn´ı tvorbu nˇeˇceho 13

propracovanˇejˇs´ıho je zde potˇreba pouˇz´ıt nˇekter´e komerˇcn´ı knihovny s XAML elementy (napˇr. Telerik). Nˇekter´e softwarov´e firmy pouˇz´ıvaj´ı i vlastn´ı vytvoˇren´e frameworky, kter´e za v´as generuj´ı XAML k´od. Takov´ y softwar potom tuto zdlouhavou pr´aci udˇel´a za v´as. Pro opravdu profesion´aln´ı pr´aci pro tvorbu grafick´eho rozhran´ı Microsoft nab´ız´ı Blend XAML editor. Pro v´ yvoj grafiky jsem vyuˇzil jen z´akladn´ı XAML editor, kter´ y n´am Microsoft nab´ız´ı. I pro drobn´e nedostatky byl pro mou pr´aci vhodn´ y. Mnohon´asobnˇe jeho kvality pˇrevyˇsuj´ı grafiku ve GDI+, nejenom v rychlosti vykreslov´an´ı, ale i v moˇznosti definov´an´ı nejr˚ uznˇejˇs´ıch ud´alost´ı pro jak´ ykoliv grafick´ y prvek zobrazen´ y v oknˇe. Ud´alosti, kter´e prvky vyvol´avaj´ı se zde daj´ı smˇerovat a urˇcovat jim prioritu jejich obsluhy. Vyuˇzit´ı Blend editoru by bylo zase pˇr´ıliˇs komplikovan´e, vyuˇz´ıval bych pouze jen dvojrozmˇernou grafiku. Proto volba XAML pod WPF byla rozumn´ ym ˇreˇsen´ım.

Obr´azek 3. Uk´azka XAML k´odu

14

3.

Jak pracovat s aplikac´ı

Hlavn´ı c´ıl moj´ı aplikace je jednoduˇs´ı kreslen´ı matematick´ ych obr´azk˚ u. Tento u ´kol jsem vyˇreˇsil tak, aby si uˇzivatel kombinoval jednotliv´e pˇreddefinovan´e obr´azky do vˇetˇs´ıch celk˚ u. Nebo mu aplikace umoˇzn´ı nadefinovat vlastn´ı rozs´ahl´e kolekce vlastn´ıch z´akladn´ıch obr´azk˚ u. D´ale v textu se budu zab´ yvat jednoduch´ ym postupem jak pouˇz´ıvat co moˇzn´a nejefektivnˇeji aplikaci pro tento u ´ˇcel. Hlavn´ı princip je pr´ace s Ribbonem a postupn´e vkl´ad´an´ı vytvoˇren´ ych obr´azkov´ ych kolekc´ı do tohoto ovl´adac´ıho prvku. Hlavn´ı prvky pro kreslen´ı jsou tˇri (ˇc´ara, bod a text). Kaˇzd´ y s tˇechto prvk˚ u umoˇzn´ı uˇzivateli zmˇenu jeho vlastnost´ı, jako styl ˇc´ary, barvu, velikost atd. Vˇsechny tyto prvky maj´ı jeden nebo v´ıce takzvan´ ych kotevn´ıch bod˚ u, kter´e se uˇzivateli zobraz´ı pˇri najet´ı myˇsi na pˇr´ısluˇsn´ y grafick´ y objekt. Tyto kotevn´ı body jsou zobrazov´any jako zelen´a koleˇcka a jednoduch´ ym uchopen´ım pomoc´ı myˇsi, m˚ uˇze uˇzivatel mˇenit jejich polohu na r´ ysovac´ı ploˇse. Kotevn´ı body mohou vytv´aˇret vazby. Tak definuj´ı vz´ajemn´ y vztah mezi dvˇema kotevn´ımi body. Tento vz´ajemn´ y vztah definuje uˇzivatel. Vazba kotevn´ıho bodu se projev´ı pˇri zmˇenˇe polohy jednoho z nich. Jeden kotevn´ı bod se pohne a druh´ y, kter´ y je ve vztahu s n´ım se pohne tak´e, pohyb toho druh´eho m˚ uˇze b´ yt libovoln´ ym smˇerem. Smˇer n´am urˇc´ı pˇr´ısluˇsn´a funkce definovan´a pˇri vytvoˇren´ı t´eto vazby. Napˇr.: stejn´ y pohyb obou bod˚ u, nebo inverzn´ı pohyb obou bod˚ u atd. • Grafick´ y objekt ˇca´ra - je tvoˇrena dvˇema kotevn´ımi body. Jejich posun n´am mˇen´ı d´elku a smˇer t´eto ˇc´ary. M˚ uˇzeme mˇenit vlastnosti pera, kter´e ˇca´ru vykresluje, mˇenit jeho ˇs´ıˇrku, barvu a styl. • Grafick´ y objekt bod - je graficky zn´azornˇen kˇr´ıˇzkem pevn´e velikosti. M´a jeden kotevn´ı bod, kter´ y je vˇzdy uprostˇred tohoto objektu. Zmˇena vlastnost´ı pera je obdobn´a jako u ˇca´ry. • Grafick´ y objekt text - je tvoˇren jedn´ım kotevn´ım bodem a vlastn´ım textov´ ym ˇretˇezcem. Kotevn´ı bod a textov´ y ˇretˇezec m˚ uˇzou m´ıt mezi sebou r˚ uznou vzd´alenost. M˚ uˇzete pohybovat jen textov´ ym ˇretˇezcem nebo kotevn´ım bodem. Pohyb kotevn´ıho bodu ovˇsem h´ ybe i textov´ ym ˇretˇezcem. Vlastnosti tohoto grafick´eho prvku se nastavuj´ı trochu jinak. Uˇzivatel mus´ı dvakr´at kliknout na textov´ y ˇretˇezec a zobraz´ı se okno nazvan´e Textov´ y ” editor“. V nˇem m˚ uˇzeme upravovat vlastn´ı text, volit fond, velikost p´ısma a jeho styl. Tyto tˇri z´akladn´ı grafick´e objekty jsou jak´esi z´akladn´ı stavebn´ı kameny cel´eho kreslen´ı, jejich vz´ajemn´a kombinace a pˇridˇelov´an´ı r˚ uzn´ ych vlastnost´ı uˇzivateli umoˇzn ˇuj´ı vytv´aˇret sloˇzitˇejˇs´ı celky, kter´e si uloˇz´ı pojmenovan´e do Ribbonu. 15

Obr´azek 4. Z´akladn´ı grafick´e objekty S jejich pomoc´ı a dalˇs´ımi kombinacemi kresl´ı vˇetˇs´ı a n´aroˇcnˇejˇs´ı obr´azky. Aplikace disponuje n´astroji nejen pro r˚ uzn´e zmˇeny zobrazov´an´ı na r´ ysovac´ım pl´atnˇe, ale i sloˇzitˇejˇs´ımi funkcemi, kter´e se aplikuj´ı na jednotliv´e grafick´e objekty nebo jejich skupiny. N´avod jak efektivnˇe kreslit matematick´e obr´azky pomoc´ı t´eto aplikace si m˚ uˇzeme pˇreˇc´ıst v ˇca´sti 5. Pˇred t´ım se podrobnˇe seznamte s uˇzivatelskou pˇr´ıruˇckou, ve kter´e je popis vˇsech kombinaˇcn´ıch funkc´ı.

16

4.

Uˇ zivatelsk´ a pˇ r´ıruˇ cka

4.1.

Instalace

Aplikace je urˇcena pro Windows XP, Vista, 7, 8. 1. Spust’te instalaˇcn´ı soubor Matematick´e obr´azky. Zobraz´ı se instalaˇcn´ı pr˚ uvodce. 2. Instalaˇcn´ı pr˚ uvodce s´am zkontroluje, jestli poˇc´ıtaˇc m´a instalovan´e prostˇred´ı .NET Framework 4. Pokud ne, nab´ıdne pˇres internet doinstalov´an´ı. 3. Pokud je vˇsechno v poˇra´dku, pokraˇcujte v instalaci tlaˇc´ıtkem Dalˇs´ı. 4. Vyberte instalaˇcn´ı sloˇzku, kam chcete aplikaci nainstalovat. Je automaticky nastavena sloˇzka ProgramFiles. Potvrd’te tlaˇc´ıtkem Dalˇs´ı. 5. Jeˇstˇe jednou potvrd’te instalaci tlaˇc´ıtkem Dalˇs´ı. 6. Instalace prob´ıh´a, chv´ıli poˇckejte, aˇz instalaˇcn´ı program dokonˇc´ı pr´aci. 7. Stisknete tlaˇc´ıtko Zavˇr´ıt. Po u ´spˇeˇsn´e instalaci se na pracovn´ı ploˇse objev´ı z´astupce spustiteln´eho souboru Matematick´e obr´azky, kter´ y m˚ uˇzete ihned spustit.

4.2. 4.2.1.

Zaˇ c´ın´ ame Popis hlavn´ıho okna

Hlavn´ı okno aplikace je rozdˇeleno na tˇri z´akladn´ı ˇc´asti. Ribbon (p´as karet) m´am sdruˇzuje vˇsechny ovl´adac´ı funkce do logick´ ych celku. V aplikaci je um´ıstˇen horn´ı ˇc´asti okna. V prostˇredn´ı ˇca´sti se nach´az´ı vlastn´ı r´ ysovac´ı pap´ır, na kter´ y budeme kreslit. V doln´ı ˇca´sti hlavn´ıho okna je status bar, to je p´asek zobrazuj´ıc´ı r˚ uzn´e informace. Jsou na nˇem um´ıstˇeny i nˇekter´e ikony umoˇznuj´ıc´ı navigaci po r´ ysovac´ı ploˇse. 4.2.2.

Navigace uˇ zivatele po pl´ atnˇ e

Pap´ır pro kreslen´ı je um´ıstˇen na ploˇse, kter´a m´a nekoneˇcn´e okraje, takˇze je moˇzno kreslit i mimo tento pap´ır do jak´ekoliv velikosti. Posouv´an´ı cel´e viditeln´e plochy, kterou uˇzivatel pr´avˇe chce vidˇet (tzv. kamery), se prov´ad´ı myˇs´ı pomoc´ı prostˇredn´ıho tlaˇc´ıtka (koleˇcka). Na jak´emkoli m´ıstˇe m˚ uˇzeme toto tlaˇc´ıtko (koleˇcko) zm´aˇcknout a drˇzet. To znamen´a, jako by jsme chytily pap´ır a pomoc´ı posunu myˇsi s n´ım posouvaly do vˇsech stran. 17

Obr´azek 5. Hlavn´ı okno

Koleˇcko m´a i funkci zoomu. Pokud budeme koleˇckem ot´aˇcet, pap´ır se bude pˇribliˇzovat nebo oddalovat. Stˇred zoomov´an´ı n´am urˇcuje ukazatel myˇsi. Hodnotu aktu´aln´ıho pˇribl´ıˇzen´ı v procentech si m˚ uˇzeme pˇreˇc´ıst vpravo dole.

Obr´azek 6. Ikony pro zobrazov´an´ı pl´atna Vedle tohoto ukazatele jsou dvˇe ikony. Prvn´ı n´am r´ ysovac´ı pap´ır automaticky vyrovn´a na zaˇc´atek okna do jeho lev´eho horn´ıho rohu a zoom nastav´ı na 100%. Druh´a n´am r´ ysovac´ı pl´atno (zaˇc´ınaj´ıc´ı pozice) um´ıst´ı do polohy pˇresnˇe na stˇred okna a pˇrizp˚ usob´ı i zoom hodnotu. Tyto tlaˇc´ıtka n´am zaruˇc´ı, aby se uˇzivatel v nekoneˇcn´ ych okraj´ıch pˇri kreslen´ı neztratil. 4.2.3.

Popis ribbonu

Ribbon (p´as karet) je tvoˇren ˇctyˇrmi hlavn´ımi z´aloˇzkami: N´astroje, Prvky, Obr´azky 1, Obr´azky 2. Po kliknut´ı na vybranou z´aloˇzku se n´am jej´ı funkce zobraz´ı.

Obr´azek 7. Ribbon aplikace Matematick´e obr´azky

18

• Z´aloˇzka n´astroje - sdruˇzuje funkce pro editaci obr´azk˚ u, a funkce na jejich vz´ajemn´e sluˇcov´an´ı. • Z´aloˇzka prvky - zde najdeme pˇreddefinovan´e obr´azky z´akladn´ıch prvk˚ u, mnoho´ uheln´ık˚ u, kuˇzeloseˇcek i nˇekter´ ych kˇrivek (Sin, Cos). • Z´aloˇzka Obr´azky - tyto z´aloˇzky funguj´ı jako jak´asi datab´aze, kterou uˇzivatel dynamicky definuje. Mˇely by slouˇzit pro vkl´ad´an´ı vlastn´ıch jednoduch´ ych obr´azk˚ u. Tyto obr´azky by se mˇely postupnˇe pouˇz´ıvat jako z´akladn´ı kameny pro propracovanˇejˇs´ı celky, kter´e si zde m˚ uˇzeme opˇet odkl´adat. 4.2.4.

Vkl´ ad´ an´ı grafick´ ych objekt˚ u

V pˇr´ısluˇsn´ ych z´aloˇzk´ach Ribbonu si vyberte obr´azek a kliknˇete na nˇej. Ten se vloˇz´ı na r´ ysovac´ı plochu a my s n´ım d´ale m˚ uˇzeme pracovat. 4.2.5.

Vyb´ır´ an´ı grafick´ ych objekt˚ u nebo jejich skupin

Kaˇzd´ y grafick´ y objekt, kter´ y nakresl´ıme se d´a oznaˇcit a d´ale s n´ım pracovat. Toto se prov´ad´ı jednoduˇse tak, ˇze na nˇej klikneme a ˇca´ry tohoto prvku se zabarv´ı do zelena. M˚ uˇzeme vybrat i skupinu objekt˚ u, na kterou je moˇzn´e aplikovat funkce. V´ ybˇer se prov´ad´ı najet´ım ukazatele myˇs´ı mimo grafick´e objekty a drˇzen´ım lev´eho tlaˇc´ıtka, taˇzen´ım myˇsi po pl´atnˇe se n´am zobraz´ı modr´e pole. Kdyˇz prvek bude pokryt t´ımto modr´ ym polem, tak se jeho ˇc´ary zbarv´ı do modra. To znamen´a, ˇze je vybr´an do skupiny a my na nˇej pozdˇeji m˚ uˇzeme aplikovat vybran´e funkce. Modr´a pole m˚ uˇzeme libovolnˇe rozˇsiˇrovat taˇzen´ım jak´ekoli jeho hrany, nebo popˇr´ıpadˇe cel´e pole pˇresouvat pomoc´ı lev´eho tlaˇc´ıtka myˇsi. 4.2.6.

Z´ akladn´ı manipulace s grafick´ ymi objekty

Grafick´e objekty, kter´e se zde vykresluj´ı jsou tvoˇren´ y ˇca´rami. Tyto ˇc´ary mohou ˇ m´ıt r˚ uzn´e vlastnosti, ˇs´ıˇrku, barvu, styl pera. C´ary jsou zakonˇceny takzvan´ ymi kotevn´ımi body. Zobrazuj´ı se po najet´ı myˇsi na objekt. Pˇri oznaˇcen´ı vybran´eho objektu se jeho kotevn´ı body zobraz´ı a jsou viditeln´e i kdyˇz je tento objekt pˇrekryt´ y jin´ ym. Pˇri posunu tˇechto bod˚ u, mˇen´ıme d´elku a smˇer ˇc´ary vedouc´ı mezi tˇemito body. Pro pˇresunu cel´eho objektu v nezmˇenˇen´em stavu mus´ıme uchopit objekt za ˇca´ru, t´ım posuneme i jeho kotevn´ı body.

4.3. 4.3.1.

Z´ aloˇ zka N´ astroje Kop´ırovat, Vloˇ zit, Smazat

Tyto z´akladn´ı funkce m˚ uˇzeme vyuˇz´ıvat tak, jak jsme zvykl´ı i z jin´ ych aplikac´ı. Staˇc´ı oznaˇcit objekt nebo skupinu objektu a vybrat poˇzadovanou funkci. Funguj´ı i standardn´ı kl´avesov´e zkratky. 19

• Kl´avesy Ctrl + C pro kop´ırov´an´ı pˇr´ısluˇsn´eho obr´azku do pamˇet’ov´e schr´anky. • Kl´avesy Ctrl + X pro maz´an´ı pˇr´ısluˇsn´eho obr´azku a z´aroveˇ n jeho obraz zkop´ıruje tak´e do pamˇet’ov´e schr´anky. • Kl´avesy Ctrl + V pro vkl´ad´an´ı objektu z t´eto pamˇet’ov´e schr´anky. Pomoc´ı tˇechto funkc´ı m˚ uˇzeme velice urychlit a maxim´alnˇe optimalizovat rychlost kreslen´ı obr´azk˚ u. 4.3.2.

Mˇ r´ıˇ zka

Kliknut´ı na toto tlaˇc´ıtko n´am zobraz´ı mˇr´ıˇzku po cel´e r´ ysovac´ı ploˇse. Mˇr´ıˇzka slouˇz´ı pro pˇresnou navigaci na ploˇse a umoˇzn ˇuje jednoduˇs´ı smˇerovou orientaci nakreslen´ ych objekt˚ u. 4.3.3.

ˇ ıˇ Pero, V´ yplˇ n, S´ rka, Styl

Tyto funkce vyuˇz´ıv´ame ke zmˇenˇe vlastnost´ı jednotliv´ ych grafick´ ych objekt˚ u. Nastav´ı se barva v´ yplnˇe nebo barva ˇcar. Nastav´ı se ˇs´ıˇrka nebo styl nakreslen´e ˇc´ary (pln´a, ˇcerchovan´a atd.). 4.3.4.

Dopˇ redu, Dozadu

Funkce umoˇzn´ı vybran´emu grafick´emu objektu nebo skupinˇe jejich zobrazen´ı v popˇred´ı nebo v pozad´ı oproti ostatn´ım objekt˚ um. 4.3.5.

´ Vazby, Uhel, Rotace, Pr˚ unik, Slouˇ cen´ı, Transformace

Tyto funkce tvoˇr´ı hlavn´ı kombinaˇcn´ı a transformaˇcn´ı metody, kter´e aplikace vyuˇz´ıv´a. Proto jim budeme vˇenovat pˇri vysvˇetlov´an´ı v´ıce ˇcasu. Na funkce jsou definovan´e kl´avesov´e zkratky. • Kl´avesa V pro vazby. • Kl´avesa U pro u ´hel. • Kl´avesa R pro rotaci. • Kl´avesa P pro pr˚ unik. • Kl´avesa S pro slouˇcen´ı. • Kl´avesa T pro Transformace.

20

Po kliknut´ı na libovolnou funkci se n´am zobraz´ı tzv. N´astrojov´e okno. To je okno pˇres kter´e danou funkci nastav´ıme. Jejich grafick´e uspoˇr´ad´an´ı je zase rozdˇeleno do nˇekolika ˇca´sti, tyto ˇc´asti jsou oddˇeleny ˇcarou. V horn´ı ˇc´asti n´astrojov´eho okna jsou ikony, kter´e n´am umoˇzn ˇuj´ı vybrat grafick´e objekty. Na tyto objekty (nazveme je Elementy) budeme danou funkci vyuˇz´ıvat. Ikony n´am pomoc´ı obr´azk˚ u napov´ıdaj´ı, kter´e elementy m˚ uˇze dan´a funkce vyuˇz´ıvat napˇr. kotevn´ı bod nebo ˇc´ara. K ˇcemu funkce jsou, si nejl´epe vysvˇetl´ıme na jednoduch´ ych pˇr´ıkladech uveden´e pod struˇcn´ ym popisem kaˇzd´e funkce. 4.3.6.

Funkce Vazby

To je funkce, kterou vytv´aˇr´ıme nˇejak´ y vztah mezi dvˇema kotevn´ımi body. Tento vztah n´am slouˇz´ı pˇri pohybu kotevn´ıch bod˚ u po r´ ysovac´ı ploˇse.

Obr´azek 8. Okno funkce vazby Pˇr´ıklad: 1. Vloˇzte dvˇe ˇc´ary na r´ ysovac´ı plochu. 2. Vyvolejte funkci Vazby. 3. Kliknˇete do n´astrojov´eho okna funkce na ikonu Element 1, ten chcete definovat jako prvn´ı. Ikona se aktivuje (oranˇzov´a). Potom vyberte libovoln´ y kotevn´ı bod na r´ ysovac´ı ploˇse na kter´ y chcete funkci uplatnit. V naˇsem pˇr´ıpadˇe tˇreba na kotevn´ı bod ˇca´ry vlevo. Pokud ho funkce pˇr´ıjme, tak zmodr´a a ikona Elementu 1 se zmˇen´ı na zelenou fajfku.

21

4. Kliknˇete do n´astrojov´eho okna funkce na ikonu Element 2. Ikona se aktivuje (oranˇzov´a). Potom vyberte libovoln´ y kotevn´ı bod na r´ ysovac´ı ploˇse, na kter´ y chcete funkci uplatnit. Tˇreba na kotevn´ı bod ˇca´ry vpravo. Pokud ho funkce pˇr´ıjme, tak zmodr´a a ikona Elementu 1 se zmˇen´ı na zelenou fajfku. 5. V prostˇredn´ı ˇc´asti n´astrojov´eho okna vyberte druh vazby, kter´ y chcete uplatnit pro tyto dva definovan´e elementy, napˇr. stejn´ y pohyb ve vˇsech smˇerech. 6. Potvrd’te tlaˇc´ıtkem OK. Definovali jsme si prvn´ı vazbu a ted’ si uk´aˇzeme jestli funguje. Zkuste pohnout jednou ˇcarou. A vid´ıte, ˇze se n´am h´ ybe i kotevn´ı bod ˇc´ary druh´e. Pokud chcete tuto vazbu zruˇsit, mus´ıte pˇres ikonu Definovan´e vazby, kter´a je um´ıstˇen´a vlevo dole na status baru. Ale o tom pozdˇeji v ˇca´sti 4.6. Funkce Vazba jde pˇridˇelit jak´emukoliv kotevn´ımu bodu na jak´ekoli ˇca´ˇre, textu nebo kruˇznici. Zkr´atka na jak´ ykoliv zelen´ y bod co uvid´ıte na r´ ysovac´ı ploˇse. Vazby jsou r˚ uzn´e, pˇridˇelujeme jim nejenom moˇznost stejn´eho pohybu, ale i inverzn´ıho pohybu, nebo um´ıstˇen´ı bod˚ u na stejn´e souˇradnice. R˚ uzn´e druhy obsluhy vazeb: • Souˇradnicov´e spojen´ı bod˚ u - znamen´a, ˇze Element 1 se pˇresune na souˇradnice Elementu 2. • Stejn´ y pohyb ve vˇsech smˇerech - pˇri pohybu Elementu 1 se n´am h´ ybe i Element 2 o stejnou vzd´alenosti v jak´emkoli smˇeru. • Stejn´ y pohyb jen po X souˇradnici - pokud se h´ ybe Element 1 ve vodorovn´em smˇeru, tak se pohybuje i Element 2 o stejnou vzd´alenost jen ve vodorovn´em smˇeru. • Stejn´ y pohyb jen po Y souˇradnici - pokud se h´ ybe Element 1 ve svisl´em smˇeru, tak se pohybuje i Element 2 o stejnou vzd´alenost jen ve svisl´em smˇeru. • Inverzn´ı pohyb jen po X souˇradnici. - pokud se h´ ybe Element 1 ve vodorovn´em smˇeru, tak se pohybuje i Element 2 v opaˇcn´em smˇeru o stejnou vzd´alenost jen vodorovnˇe. • Inverzn´ı pohyb jen po Y souˇradnici - pokud se h´ ybe Element 1 ve svisl´em smˇeru, tak se pohybuje i Element 2 v opaˇcn´em smˇeru o stejnou vzd´alenost jen svisle. • Pohyb X inverzn´ı Y - pokud se h´ ybe Element 1 ve vodorovn´em smˇeru, tak se pohybuje i Element 2 ve svisl´em smˇeru o stejnou vzd´alenost. 22

• Pohyb Y inverzn´ı X - pokud se h´ ybe Element 1 ve svisl´em smˇeru, tak se pohybuje i Element 2 ve vodorovn´em smˇeru o stejnou vzd´alenost. • Vazbu jenom jedn´ım smˇerem - znamen´a, ˇze pˇri pohybu Element 1 se vazba obslouˇz´ı, ale pˇr´ı pohybu Elementu 2 uˇz ne. T´ımto zp˚ usobem pomoc´ı jednoduch´ ych ˇcar si m˚ uˇzeme nadefinovat sloˇzitˇejˇs´ı obr´azky, kter´e pˇri pˇresouv´an´ı po r´ ysovac´ım pl´atnˇe neztr´acej´ı tvar nebo mezi sebou drˇz´ı nˇejak´ y logick´ y vztah. Jako takov´ y jednoduch´ y pˇr´ıklad n´am poslouˇz´ı obr´azek obd´eln´ıku. Ten je sloˇzen ze ˇctyˇr ˇcar, kter´e jsou mezi sebou propojen´e pˇr´ısluˇsnou vazbou. 4.3.7.

´ Funkce Uhel

Funkce u ´hel je funkce, kter´a definuje vztah mezi dvˇema ˇca´rami. V tomto pˇr´ıpadˇe je to vztah velikosti u ´hlu, kter´e ˇca´ry mezi sebou sv´ıraj´ı. Pˇr´ıklad: 1. Vloˇzte dvˇe ˇc´ary na r´ ysovac´ı plochu. ´ 2. Vyvolejte funkci Uhel. 3. Definujte dva elementy. V tomto pˇr´ıpadˇe ˇca´ry, kter´e budou mezi sebou u ´hel sv´ıtat. Jejich definov´an´ı je obdobn´e jako v pˇredchoz´ım pˇr´ıkladu. 4. V prostˇredn´ı ˇca´sti n´astrojov´eho okna vyberte jak´ yu ´hel. Bud’ hodnotu zadejte ˇc´ıslem, nebo vyberte z moˇznost´ı Kolmost, Rovnobˇeˇznost. 5. Potvrd’te tlaˇc´ıtkem OK. Obˇe ˇca´ry drˇz´ı n´ami zadan´ yu ´hel. Tato funkce je sp´ıˇse pomocn´a. Je zde jedno uˇzivatelsk´e omezen´ı. Nedaj´ı se nastavit na jednu ˇca´ru dva u ´hly i kdyˇz budou ve vztahu s jin´ ymi prvky.

´ Obr´azek 9. Uhel ˇcar, zaˇca´tek

´ Obr´azek 10. Uhel ˇcar, v´ ysledek

23

4.3.8.

Funkce Rotace

Funkce rotace je funkce, kter´a zprostˇredkov´av´a rotaci objektu, nebo cel´eho obr´azku. Pˇr´ıklad: 1. Vloˇzte nˇekter´ y grafick´ y objekt na r´ ysovac´ı plochu. 2. Vyvolejte funkci Rotace. 3. Mus´ıte definovat, co m´a rotovat. Kliknˇete do n´astrojov´eho okna funkce na ikonu Elementu 1. Ikona se aktivuje (oranˇzov´a). Potom kliknˇete na graficky objekt na r´ ysovac´ı ploˇse, kter´ ym chcete rotovat. Pokud chcete rotovat skupinu nebo cel´ ym obr´azkem, oznaˇcte tyto objekty do modr´eho obd´eln´ıku a potom na tento obd´eln´ık kliknout. T´ım tyto objekty uvnitˇr nˇej pˇred´ate funkci. Pokud ho funkce pˇr´ıjme ikona Elementu 1 se zmˇen´ı na zelenou fajfku a na r´ ysovac´ım pl´atnˇe se n´am uk´aˇze terˇc. Jeho stˇred n´am urˇcuje stˇred rotace a druh´e zelen´e koleˇcko zase n´aklon rotace. Obˇema koleˇcky se d´a libovolnˇe pohybovat. 4. V prostˇredn´ı ˇc´asti n´astrojov´eho okna vyberte jak´ y zp˚ usob rotace chcete uplatnit. Rotujte pomoc´ı zelen´eho koleˇcka na terˇci, nebo hodnotu rotace zadejte ˇc´ıslem. 5. Po potvrzen´ı kliknˇete na OK.

Obr´azek 11. Rotace, zaˇc´atek

4.3.9.

Obr´azek 12. Rotace, pr˚ ubˇeh

Funkce Transformace

Tato funkce n´am zajist´ı zmˇenu velikost nebo pˇresun vybran´eho objektu nebo cel´eho obr´azku. Pˇr´ıklad: 1. Vloˇzte nˇekter´ y grafick´ y objekt na r´ ysovac´ı plochu.

24

2. Vyvolejte funkci Transformace. 3. Mus´ıte definovat, co se m´a transformovat. Uplatn´ıte stejn´ y postup jako v pˇredchoz´ım pˇr´ıkladu. Pokud v´aˇs v´ ybˇer funkce Transformace pˇrijala, objev´ı se v´am na r´ ysovac´ım pl´atnˇe zelen´ y obd´eln´ık. Ten m˚ uˇzete libovolnˇe pˇresouvat a s n´ım i objekty, kter´e jste definovali jako Element 1. Pokud pohybujeme jeho bodem vpravo dole, tak mˇen´ıme pomˇer velikosti tˇechto objekt˚ u, vˇcetnˇe ˇs´ıˇrky ˇcar, kter´ ymi jsou nakresleny. 4. Po potvrzen´ı kliknˇete na OK.

Obr´azek 13. Transformace, zaˇca´tek

4.3.10.

Obr´azek 14. Transformace, pr˚ ubˇeh

Funkce Slouˇ cen´ı

Funkce n´am umoˇzn´ı slouˇcit nˇekolik ˇcar do jednoho n-´ uheln´ıku, kter´ y m˚ uˇzeme vybarvovat nebo d´ale vyuˇz´ıvat ve funkci pr˚ unik. Pˇr´ıklad: 1. Vloˇzte dvˇe ˇc´ary na r´ ysovac´ı plochu. 2. Jednu z nich posuˇ nte tak, aby se ˇc´ary dot´ ykali pˇresnˇe jen jedn´ım kotevn´ım bodem. Pokud si jejich polohou nejste jist´ı, na tyto kotevn´ı body uplatnˇete funkci vazba - souˇradnicov´e spojen´ı bodu. 3. Vyvolejte funkci Slouˇcen´ı. 4. Jako Element 1 zakliknˇete libovolnou ˇca´ru, zabarv´ı se modˇre. K t´eto ˇca´ˇre m˚ uˇzete postupn´ ym zaklik´av´an´ım dalˇs´ıch a dalˇs´ıch ˇcar pˇrid´avat jednotliv´e segmenty(ˇca´sti) n-´ uheln´ıku, kter´ y chceme vytvoˇrit. V naˇsem pˇr´ıpadˇe druhou nakreslenou ˇc´aru. Pokud se obˇe ˇca´ry dot´ ykaj´ı v kotevn´ım bode, tak se i druh´a ˇc´ara zabarv´ı do modra. 5. V dalˇs´ı ˇca´sti n´astrojov´eho okna zakliknˇete spoj poˇca´teˇcn´ı a koneˇcn´ y bod ” smyˇcky“. 6. Potvrd’te tlaˇc´ıtkem OK. 25

V´ ysledkem t´eto funkce bude troj´ uheln´ık. Ten se zobraz´ı jako jeden objekt se tˇremi kotevn´ımi body. Tento troj´ uheln´ık m˚ uˇzete vybarvovat nebo d´ale poskytnout funkci pr˚ unik.

Obr´azek 15. Sluˇcov´an´ı ˇcar, zaˇca´tek

4.3.11.

Obr´azek 16. Sluˇcov´an´ı ˇcar, vysledek

Funkce Pr˚ unik

Funkce n´am vytv´aˇr´ı moˇznost mezi sebou kombinovat dva objekty podle r˚ uzn´eho nastaven´ı. Typy tohoto nastaven´ı jsou: Pr˚ unik, Sjednocen´ı, Rozd´ıl, Xor. M˚ uˇzete podle n´ı vytv´aˇret napˇr. V´ennovy diagramy. Do funkce n´am mohou vstupovat pouze uzavˇren´e grafick´e objekty napˇr, kruh nebo slouˇcen´ y n-´ uheln´ık. Pˇr´ıklad: 1. Vloˇzte dva kruhy na r´ ysovac´ı plochu. 2. Jeden z nich posuˇ nte tak aby, se ˇc´asteˇcnˇe pˇrekr´ yvaly. 3. Vyvolejte funkci Pr˚ unik. 4. Jako jej´ı Elementy definujte oba tyto kruhy. 5. V prostˇredn´ı ˇca´sti n´astrojov´eho okna vyberte jak´ y typ funkce pr˚ unik se m´a aplikovat. V naˇsem pˇr´ıpadˇe zakliknˇete pr˚ unik. 6. Potvrd’te tlaˇc´ıtkem OK. V´ ysledek m˚ uˇzete vidˇet na obr´azku 18. I v tomto objektu plat´ı nad´ale vˇsechny kotevn´ı body, kter´e byly doposud definovan´e a i jejich vazby.

Obr´azek 17. Pr˚ unik kruh˚ u, zaˇca´tek

Obr´azek 18. Pr˚ unik kruh˚ u, vysledek

26

4.4.

Z´ aloˇ zky Prvky

V t´eto z´aloˇzce jsou pˇreddefinovan´e prvky pro jednoduˇsˇs´ı kreslen´ı. Z´akladn´ı prvky bod, u ´seˇcka, text slouˇz´ı jako z´akladn´ı kameny vˇsech kreslen´ ych obr´azk˚ u. Dalˇs´ı prvky jako mnoho´ uheln´ıky, kuˇzeloseˇcky a nˇekter´e kˇrivky jsou zde pˇreddefinovan´e jako jejich kombinace. 4.4.1.

Prvky

V t´eto ˇc´asti z´aloˇzky jsou um´ıstˇen´ y z´akladn´ı grafick´ y objekty Bod, Text, ´ Useˇcka. Jejich v´ yznam vysvˇetluje ˇca´st 3. 4.4.2.

Mnoho´ uheln´ıky

V t´eto ˇc´asti Ribbonu jsou pˇreddefinovan´e nˇekter´e mnoho´ uheln´ıky. Troj´ uheln´ık, obd´eln´ık, kosod´eln´ık, lichobˇeˇzn´ık. Tyto prvky byly vytvoˇreny jen z u ´seˇcek navz´ajem propojen´ ych vazbami. Pro jejich snadnˇejˇs´ı manipulaci a moˇznosti je vyplˇ novat barvou, jsou tyto u ´seˇcky slouˇceny do jedn´e uzavˇren´e kˇrivky (pomoc´ı funkce slouˇcit). 4.4.3.

Kuˇ zeloseˇ cky

Elipsa, parabola, hyperbola. Tyto kˇrivky jsou tvoˇreny jednou ˇcarou. Moˇznost zmˇeny tvaru kˇrivky se ovl´ad´a pomoc´ı dvou kotevn´ıch bod˚ u. Vliv na tuto kˇrivku m´a jejich vz´ajemn´a poloha. V t´eto verzi aplikace zat´ım nejdou kuˇzeloseˇcky sluˇcovat (funkc´ı slouˇcen´ı) do jedn´e spojen´e kˇrivky. 4.4.4.

Kˇ rivky

Zde jsou zastoupeny kˇrivky jako oblouk, b´ezierova kˇrivka, kˇrivky pr˚ ubˇehu funkce sinus nebo cosinus. • Sin, Cos - ovl´ad´an´ı a modifikace se prov´ad´ı stejnˇe jako u kuˇzeloseˇcek. I tyto kˇrivky zat´ım nejdou vz´ajemnˇe sluˇcovat. • B´ezierova kˇrivka - je pojmenovan´a po francouzsk´em matematiku B´ezierovi. Tato aplikace vyuˇz´ıv´a jej´ı tzv. jednoduchou kubickou kˇrivku. Definuje se ˇctyˇrmi kotevn´ımi body. Kˇrivka zaˇc´ın´a v prvn´ım kotevn´ım bodˇe a konˇc´ı v posledn´ım. Dalˇs´ı dva body jsou zde jako ˇr´ıd´ıc´ı, lze si je pˇredstavit jako magnety, kter´e k sobˇe kˇrivku pˇritahuj´ı. T´ımto jednoduch´ ym zp˚ usobem m˚ uˇzete nakreslit libovoln´ y tvar. Na tyto kˇrivky m˚ uˇzete uplatnit funkci slouˇcit a vz´ajemnˇe je spojovat do jak´ehokoliv obrazce. • Oblouk - je tvoˇren dvˇema kotevn´ımi body. Tuto kˇrivku tak´e m˚ uˇzete libovolnˇe sluˇcovat. Pouˇz´ıv´a se ke grafick´emu zn´azornˇen´ı u ´hl˚ u. 27

4.5.

Z´ aloˇ zka Obr´ azky 1 a Obr´ azky 2

Tyto z´aloˇzky funguj´ı jako datab´aze definovan´ ych obr´azk˚ u. Prvn´ı dvˇe ikony v t´eto z´aloˇzce umoˇzn ˇuj´ı libovoln´e pˇrid´av´an´ı nebo odeb´ır´an´ı nakreslen´ ych obr´azk˚ u do pˇr´ısluˇsn´e z´aloˇzky. Pˇrid´av´an´ı se prov´ad´ı oznaˇcen´ım objektu nebo skupiny (modr´ y obd´eln´ık) a kliknut´ım na ikonu pˇridat. Vyskoˇc´ı v´am okno s dotazem na zad´an´ı jm´ena. Kaˇzd´ y takto definovan´ y objekt, kter´ y chcete uchovat v Ribbonu mus´ı m´ıt jm´eno. Odeb´ır´an´ı se prov´ad´ı pˇres ikonu Odeber. Po kliknut´ı na toto tlaˇc´ıtko se zobraz´ı okno se jm´eny jednotliv´ ych obr´azk˚ u. Vyberte, kter´ y chcete z ’ Ribbonu odstranit a potvrd te v´ ybˇer tlaˇc´ıtkem OK. Vˇsechny zmˇeny, kter´e provedete v Ribbonu jsou trval´e, po spr´avn´em vypnut´ı aplikace se tyto zmˇeny uloˇz´ı.

Obr´azek 19. Tlaˇc´ıtka pro pˇrid´an´ı a odeb´ır´an´ı prvk˚ u do Ribbonu

4.6.

Jak zruˇ sit definovan´ e vazby

K tomuto u ´ˇcelu je ikona vlevo dole. Pokud na ni kliknete, zobraz´ı se okno nazvan´e Definovan´e vazby. Jestliˇze m´ate vytvoˇrenou jakoukoliv vazbu nebo u ´hel (d´ale jen vztah), ten se zde zobraz´ı i s pˇr´ısluˇsn´ ym popisem. U kaˇzd´e poloˇzky, kter´a definuje jeden vztah je ikona zaˇskrt´avac´ıho pol´ıˇcka. Pokud je zaˇskrtnuto, vztah je aktivn´ı a obsluhuje se. Pokud zde symbol fajfky chyb´ı, tak je tento vztah nefunkˇcn´ı. Aplikace sama detekuje i kolizn´ı vztahy. Nem˚ uˇzeme zadat vazbu, kter´a je v rozporu s jinou. Tato kolize se projev´ı, aˇz v pˇr´ıpadˇe pohybu nˇejak´eho kotevn´ıho bodu. Pokud by ke kolizi doˇslo, vlastn´ı pohyb se neprovede a kotevn´ı bod zmˇen´ı barvu na ˇcernou. V oknˇe Definovan´e vazby se kolizn´ı vztah zobraz´ı ˇcervenˇe. Ten se mus´ı odˇskrtnut´ım vypnout a t´ım znemoˇznit, aby ke kolizi pˇri pohybu nedoch´azelo. Okno Definovan´e vazby“ m˚ uˇzete m´ıt st´ale zobrazeno a ” z´aroveˇ n kreslit. Jak´ekoliv zmˇeny v definici vazeb nebo u ´hl˚ u se zde dynamicky zobrazuj´ı. Jako pˇr´ıklad kolizn´ıho vztahu si uvedeme dva transformaˇcn´ı body, pokud na nˇe definujete dvˇe logicky rozd´ıln´e vazby, napˇr´ıklad stejn´ y pohyb a z´aroveˇ n inverzn´ı pohyb. Tak se pˇri pokusu o jejich pohyb, detekuje kolize a pˇr´ısluˇsn´e vztahy se neobslouˇz´ı. Upozornˇen´ı: Uˇzivatelsky definovan´e vztahy se v tomto oknˇe zobrazuj´ı, ale pokud obr´azek uloˇz´ıte bud’ do Ribbonu nebo na hard disk a znovu otevˇrete. Tyto 28

uloˇzen´e vztahy budou sice aktivn´ı, ale nem˚ uˇzete je zpˇetnˇe vypnout (nezobraz´ı se v oknˇe Definovan´e vazby). D˚ uvod je zˇrejm´ y, aplikace slouˇz´ı k postupn´emu definov´an´ı obr´azk˚ u od jednoduch´ ych ke sloˇzitˇejˇs´ım. Pokud by se zde tyto vztahy zpˇetnˇe zobrazovali, okno by bylo zavalen´e spoustou vztah˚ u a jejich modifikace by byla nepˇrehledn´a.

Obr´azek 20. Okno Definovan´e vazby

4.7.

Ukl´ ad´ an´ı

Vpravo nahoˇre je ˇsed´a ikona pro menu. Pˇres ni se d´a nakreslen´ y obr´azek uloˇzit nebo exportovat do jin´ ych form´atu, kter´e pouˇz´ıvaj´ı jin´e aplikace.

Obr´azek 21. Zn´azornˇen´e menu • Form´at XPS - XML Paper Specification, je nov´ y form´at dokument˚ u zaloˇzen´ y na XML podobn´ y form´atu PDF od Adobe Systems. Pouˇz´ıv´a ho Windows od verze Vista.

29

• Form´at SVG - Scalable Vector Graphics, kter´ y popisuje dvojrozmˇernou vektorovou grafiku pomoc´ı XML. Hodnˇe se pouˇz´ıv´a na Internetu. Aplikace pracuj´ıc´ı s SVG CorelDraw, Inscape. • Form´at PDF(1) - Portable Document Format, souborov´ y form´at vyvinut´ y firmou Adobe pro ukl´ad´an´ı dokument˚ u nez´avisle na softwaru i hardwaru. • Form´at PDF(2) - do form´atu PDF se obr´azek uloˇz´ı ve formˇe bitmapy. • Format PNG - bitmapov´ y format, podporuj´ıc´ı pr˚ uhlednost.

4.8.

Otev´ır´ an´ı

Otv´ır´an´ı uloˇzen´eho obr´azku se prov´ad´ı tak´e jen pˇres ikonu menu. Otv´ırat jdou soubory vytvoˇren´e jen v t´eto aplikaci, aby se zachovala funkˇcnost vˇsech vazeb a uhl˚ u.

4.9.

Tisk

Tisk nakreslen´eho obr´azku se tak´e prov´ad´ı jen pˇres ikonu menu. Aplikace v´am nab´ıdne standardn´ı dialog pro tisk´arnu. Tiskne se oblast, kterou pr´avˇe vid´ıme na monitoru. Proto pro spr´avn´e zarovn´an´ı tisku na zobrazovan´ y pap´ır kliknˇete na ikonu (zarovnat) na status baru.

4.10.

Undo, redo

Funkce undo (zpˇet) n´am umoˇzn´ı jak´ ykoliv krok, kter´ y provedete v aplikaci, ho vr´atit zpˇet. Funkce redo (znovu) n´am umoˇzn´ı kroky, kter´e jsme vr´atili zpˇet opˇet prov´est.

30

5.

N´ avod na efektivn´ı kreslen´ı matematick´ ych obr´ azk˚ u

Jak jsem v textu jiˇz nˇekolikr´at zm´ınil, aplikace by se mˇela spr´avnˇe pouˇz´ıvat tak, ˇze si nejprve vytvoˇr´ıme jednoduˇs´ı obr´azky. Uloˇz´ıme je do Ribbonu a pomoc´ı nich vytv´aˇr´ıme sloˇzitˇejˇs´ı. D´ale v textu si pop´ıˇseme krok po kroku, jak spr´avnˇe postupovat pˇri tvorbˇe takov´ ych obr´azk˚ u. Vˇsechny n´ıˇze zm´ınˇen´e obr´azky m˚ uˇzete pro uk´azku naj´ıt v z´aloˇzce Obr´azky 1. Po pˇreˇcten´ı ˇca´sti 5.1. se v´am moˇzn´a zp˚ usob kreslen´ı bude zd´at tˇeˇzkop´adn´ y a sloˇzit´ y. Nadefinov´an´ı prvn´ıch obr´azk˚ u v´am poslouˇz´ı jako z´akladn´ı kameny. Rychlost kreslen´ı sloˇzitˇejˇs´ıch a sloˇzitˇejˇs´ıch struktur v´ yraznˇe urychl´ı a potom bude jej´ı pouˇz´ıv´an´ı jednoduch´e a rychl´e.

5.1. 5.1.1.

Z´ akladn´ı obr´ azky Bod s textem

Zkus´ıte si prvn´ı jednoduch´ y prvek, kter´ y bude pomˇernˇe vyuˇz´ıvan´ y pro tvorbu matematick´ ych obr´azk˚ u. 1. Vloˇzte prvek bod. 2. Vloˇzte prvek Text. 3. Definujte na jejich kotevn´ı body vazbu - souˇradnicov´e spojen´ı bod˚ u. 4. Po potvrzen´ı vazby, oznaˇcte oba objekty pomoc´ı modr´eho pole. 5. Vloˇzte je do Ribbonu pomoc´ı tlaˇc´ıtka pˇridat. 6. Pojmenujte si ho. T´ımto zp˚ usobem jste si nadefinovali vlastn´ı kombinovan´ y obr´azek a ten jiˇz m˚ uˇzete vyuˇz´ıvat k dalˇs´ım kreslen´ı. 5.1.2.

Osov´ y kˇ r´ıˇ z

Tento prvek bude trochu sloˇzitˇejˇs´ı, ale pˇri jeho definici si nejl´epe uk´aˇzeme v´ yznam vazeb. 1. Vloˇzte dvˇe ˇc´ary. 2. Zn´azornˇete si mˇr´ıˇzku, pomoc´ı pˇr´ısluˇsn´eho tlaˇc´ıtka v Ribbonu. 31

Obr´azek 23. Osov´ y kˇr´ıˇz

Obr´azek 22. Rozm´ıstˇen´ı ˇcar

3. Ruˇcnˇe nastavte obˇe ˇca´ry tak, aby byly k sobˇe kolm´e a kˇr´ıˇzily se ve sv´em stˇredu. Jejich pˇresnou polohu v´am pom˚ uˇze nastavit zn´azornˇen´ı mˇr´ıˇzky jak ilustruje obr´azek 22.. 4. Vyvolejte funkci vazba. 5. Definujte do t´eto funkce oba kotevn´ı body svisl´e ˇca´ry a pˇridˇelte j´ı obsluhu typu stejn´ y pohyb jen po X souˇradnici“. ” 6. Potvrd’te tlaˇc´ıtkem OK. 7. Vyvolejte funkci vazba. 8. Definujte do t´eto funkce oba kotevn´ı body vodorovn´e ˇc´ary a pˇridˇelte j´ı obsluhu typu stejn´ y pohyb jen po Y souˇradnici“. ” 9. Potvrd’te tlaˇc´ıtkem OK. Takto definovan´e vazby v´am zaruˇc´ı st´alou kolmost obou ˇcar. 10. Vloˇzte objekt Bod s textem“, kter´ y jste uloˇzili do Ribonu a um´ıstˇete ho ” ruˇcnˇe na stˇred pˇrekˇr´ıˇzen´ ych ˇcar. 11. Definujeme si dalˇs´ı vazbu, jako jej´ı elementy pˇridˇel´ıme tentokr´at kotevn´ı bod pr´avˇe vloˇzen´eho objektu Bod s textem“ a jeden s kotevn´ıch bod˚ u ” svisl´e ˇca´ry. Jako typ obsluhy zadejte stejn´ y pohyb jen po X souˇradnici“. ” 12. Definujte vazbu mezi kotevn´ım bodem vodorovn´e ˇc´ary a kotevn´ıho bodu objektu Bod s textem“ a obsluhu zadejte stejn´ y pohyb jen po X souˇradnici“. ” ” 13. Vloˇzte dva nov´e objekty Text. 14. Jednomu z nich pˇridˇel´ıte vazbu k jednomu kotevn´ımu bodu svisl´e ˇc´ary, obsluhu nastavte souˇradnicov´e spojen´ı bod˚ u“. ” 15. Druh´emu z nich pˇridˇel´ıte vazbu k jednomu kotevn´ımu bodu vodorovn´e ˇc´ary, obsluhu nastavte souˇradnicov´e spojen´ı bod˚ u“. ” 32

16. Zmˇen´ıme n´apisy textov´ ych objekt˚ u na oznaˇcen X, Y a uprostˇred kˇr´ıˇze 0. 17. Oznaˇcte modr´ ym obd´eln´ıkem nakreslen´ y kˇr´ıˇz a cel´emu tomuto objektu nastavte tlouˇst’ku ˇcar na hodnotu 2. 18. Oznaˇcte vˇse modr´ ym obd´eln´ıkem a vloˇzte ho do Ribbonu. 19. Pojmenujte si ho. 5.1.3.

Mˇ r´ıˇ zka ke graf˚ um

1. Vloˇzte ˇca´ru. 2. Zn´azornˇete si mˇr´ıˇzku, pomoc´ı pˇr´ısluˇsn´eho tlaˇc´ıtka v Ribbonu. ˇ aru ruˇcnˇe nastavte do kolm´e pozice. 3. C´ 4. Zkop´ırujte ji a jej´ı kopii posuˇ nte o kus d´al. 5. Tento krok opakujte pˇetkr´at. 6. Vˇsechny tyto ˇc´ary oznaˇcte a pouˇzijte kop´ırovat. 7. Vyvolejte funkci transformace. 8. Znovu oznaˇcte nakreslen´e ˇca´ry a ty vloˇzte jako element do funkce transformace. 9. Zn´azornˇen´ y zelen´ y obd´eln´ık uchopte myˇs´ı uprostˇred a pˇret´ahnˇete o kus d´al. 10. Potvrd’te tlaˇc´ıtkem OK. 11. Pouˇzijte funkci vloˇzit (ctrl+v). Ze schr´anky se vloˇz´ı okop´ırovan´e ˇca´ry. 12. Znovu oznaˇcte jednu polovinu zn´azornˇen´ ych ˇcar. 13. Vyvolejte funkci rotace. 14. Vloˇzte do t´eto funkce oznaˇcen´e ˇca´ry a otoˇcte je o 90◦ jako na obr´azku 24. 15. Pomoc´ı funkce transformace pˇresuˇ nte lev´e ˇca´ry na pozice prav´ ych. Vznikne mˇr´ıˇzka. 16. Po vycentrov´an´ı ˇcar potvrd’te tlaˇc´ıtkem OK. 17. Oznaˇcte vˇsechny ˇc´ary a nastavte jim ˇs´ıˇrku na hodnotu 1 a styl na ˇcerchovan´e ˇca´ry. 18. Oznaˇcte vˇse modr´ ym obd´eln´ıkem a vloˇzte mˇr´ıˇzku do Ribbonu. 19. Pojmenujte si ji. 33

Obr´azek 24. Postup pˇri tvorbˇe mˇr´ıˇzky 5.1.4.

Zn´ azornˇ en´ı u ´ hlu

Tento prvek, budeme potˇrebovat jen na lepˇs´ı grafick´e zn´azornˇen´ı kreslen´ ych u ´hl˚ u. 1. Vloˇzte oblouk. 2. Vloˇzte ˇca´ru. 3. Pokud nen´ı nˇekter´ y kotevn´ı bod ˇc´ary na nˇekter´em kotevn´ım bodu oblouku, tak je mus´ıte ruˇcnˇe pˇresunout, nebo definovat vazbu na tyto kotevn´ı body - souˇradnicov´e spojen´ı bod˚ u. 4. Vyvolejte funkci slouˇcit. 5. Jako element oznaˇcte oblouk. 6. Jako dalˇs´ı navazuj´ıc´ı element oznaˇcte ˇca´ru. 7. Zatrhnˇete pol´ıˇcko spoj poˇca´teˇcn´ı a koncov´ y bod smyˇcky. 8. Potvrd’te tlaˇc´ıtkem OK. 9. V´ ysledn´emu prvku zmˇen´ıme ˇs´ıˇrku pera na 2. 10. Zmˇen´ıme barvu pera na tmavˇe zelenou. 11. Zmˇen´ıme v´ yplˇ n na svˇetle zelenou. 12. Vloˇzte prvek do Ribonu. 13. Pojmenujte ho.

34

Obr´azek 25. Zn´azornˇen´ı u ´hlu

5.2.

Sloˇ zitˇ ejˇ s´ı matematick´ e obr´ azky

Zde je struˇcn´ y popis tvorby v´ ysledn´ ych matematick´ ych obr´azk˚ u. Vˇsechny n´ıˇze uveden´e jsou pro pˇr´ıklad uloˇzeny v z´aloˇzce Obr´azky 2. 5.2.1.

Seˇ cna funkce se zv´ yraznˇ en´ ym troj´ uheln´ıkem

1. Vloˇzte v´ami nadefinovan´ y prvek Mˇr´ıˇzka ke grafu“. ” 2. Vloˇzte v´ami nadefinovan´ y prvek Osa kˇr´ıˇze“. ” 3. Kˇr´ıˇzi upravte velikost a polohu. 4. Vloˇzte parabolu. 5. Zmˇen ˇte jejich ˇs´ıˇrku a barvu pera. 6. Vloˇzte troj´ uheln´ık. 7. Zmˇen ˇte mu ˇs´ıˇrku a barvu pera. 8. Nastavte pomoc´ı funkce u ´hel na dvou ramenech troj´ uheln´ıku 90◦ . 9. Vloˇzte tˇri v´ami nadefinovan´e prvky Bod s textem“. ” 10. Upravte jim text na A,B,C a pomoc´ı funkce vazby jim pˇridˇelte polohu na vrcholy troj´ uheln´ıku. 11. Upravte pozici troj´ uheln´ıku podle obr´azku 26. 12. Vloˇzte ˇc´aru. 13. Zmˇen ˇte jej´ı ˇs´ıˇrku a barvu pera. 14. Upravte jej´ı pozici tak, aby proch´azela body A, C. 15. Oznaˇcte ˇc´aru a dejte ji do pozad´ı tlaˇc´ıtkem Dozadu“. ” 16. Vloˇzte dva v´ami definovan´e prvky Zn´azornˇen´ı u ´hlu“. ” 17. Nastavte jim polohu podle obr´azku 26. a dejte je tak´e do pozad´ı. 18. Vloˇzte ˇctyˇri v´ami nadefinovan´e prvky Bod s textem“. ” 35

19. Upravte jejich pozici podle obr´azku tak, aby kaˇzd´ y z nich leˇzel na jedn´e z os osov´eho kˇr´ıˇze. 20. Zmˇen ˇte jim text na a, b, f(a), f(b). 21. M˚ uˇzete jim definovat pˇr´ısluˇsnou vazbu s pˇr´ısluˇsn´ ym bodem. 22. Opatˇrete obr´azek pˇr´ısluˇsn´ ymi popisky.

Obr´azek 26. Seˇcna funkce s v´ yraznˇen´ ym troj´ uheln´ıkem

5.2.2.

Hyperbola s popisky

1. Vloˇzte v´ami nadefinovan´ y prvek Mˇr´ıˇzka ke grafu“. ” 2. Vloˇzte v´ami nadefinovan´ y prvek Osa kˇr´ıˇze“. ” 3. Kˇr´ıˇzi upravte velikost a polohu. 4. Vloˇzte dvˇe hyperboly. 5. Otoˇcte je proti sobˇe a jejich kotevn´ı body um´ıstˇete do stejn´e roviny. 6. Definujte vazbu stejn´ y pohyb jen po Y souˇradnici“ na proti sobˇe stoj´ıc´ımi ” kotevn´ı body. 7. Nastavte hyperboly podle obr´azku 27. 8. Vloˇze ˇca´ru. 9. Vloˇzte dva objekty Text“. ” 36

10. Definujte vazbu stejn´ y pohyb ve vˇsech smˇerech na kotevn´ı bod tohoto jednoho s text˚ u a nˇekter´ y kotevn´ı bod ˇca´ry. T´ım si zaruˇc´ıme stejnou polohu textu pˇri pˇresunu ˇca´ry. ˇ aˇre nastavte barvu ˇcervenou, ˇs´ıˇrku 2 a styl ˇcerchovan´ 11. C´ y. ˇ aru i s texty zkop´ırujte a nastav´ıme jejich polohu podle obr´azku 27. 12. C´ 13. Vloˇz´ıme pˇet v´ami definovan´ ych prvk˚ u Bod s textem“. ” 14. Upravte jim text a um´ıstˇete je podle obr´azku. 15. M˚ uˇzete jim definovat pˇr´ısluˇsn´e vazby. 16. Vloˇzte zbytek pomocn´ ych ˇcar s ˇcervenou nebo fialovou barvou.

Obr´azek 27. Hyperbola s popisky

37

6.

Rozbor architektury aplikace a struktury k´ odu

Vytvoˇren´a aplikace je interaktivn´ı editor, kde hodnˇe z´aleˇz´ı na uˇzivatelsk´em prostˇred´ı a jednoduchosti a pˇrehlednosti ovl´ad´an´ı. Pro v´ yvoj k´odu jsem zvolil evoluˇcn´ı model. Naprogramoval jsem z´akladn´ı GUI a pomoc´ı r˚ uzn´ ych test˚ u jsem poˇzadavky na ovl´ad´an´ı r˚ uznˇe upravoval. Pˇri postupn´em ˇreˇsen´ı sloˇzitˇejˇs´ıch probl´em˚ u se cel´a architektura aplikace zmˇenila. Cel´e jej´ı j´adro proˇslo tak´e evoluˇcn´ım v´ yvojem. Pˇri koneˇcn´em ujasnˇen´ı poˇzadavk˚ u se tˇret´ı verze mohla koneˇcnˇe naplno rozv´ıjet a do aplikace pˇrid´avat dalˇs´ı funkce. Proto k´od aplikace m´a nˇekter´e ˇca´sti zbyteˇcnˇe sloˇzitˇe strukturovan´e, to je daˇ n za pouˇzit´ı evoluˇcn´ıho modelu v´ yvoje. Z´akladn´ı architektura je rozdˇelena na tˇri hlavn´ı ˇca´sti. Tyto ˇc´asti ˇr´ıd´ı tˇri tˇr´ıdy, jakoby manaˇzeˇri, kteˇr´ı jsou v hierarchii tˇr´ıd na jej´ım vrcholu a maj´ı na sebe pˇr´ımˇe odkazy. Veˇsker´a komunikace mezi tˇemito tˇremi stupni prob´ıh´a pˇres nˇe. Tyto tˇri z´akladn´ı tˇr´ıdy jiˇz maj´ı v sobˇe jin´e objekty nebo jejich cel´e kolekce. Ty vytv´aˇr´ı v aplikaci sloˇzitou stromovou strukturu objekt˚ u. Dalˇs´ı text struˇcnˇe popisuje jednotliv´e vrstvy k´odu aplikace. Pro lepˇs´ı pˇredstavu o fungov´an´ı struktury aplikace jsem tyto vrstvy pojmenoval podle ˇr´ıd´ıc´ıch objekt˚ u kaˇzd´e z nich.

6.1.

Manaˇ zer GUI

Pˇrij´ım´a ud´alosti r˚ uzn´ ych zobrazovan´ ych grafick´ ych prvk˚ u, pˇridˇeluje jim prioritu a star´a se o jejich smˇerov´an´ı. Star´a se o zobrazov´an´ı grafick´ ych objekt˚ u, kter´a jsou um´ıstˇen´ı v kolekc´ıch v ˇc´asti Manaˇzer J´adro“. V jeho canvasu se skl´ad´a ” v´ ysledn´ y obraz.

6.2.

Manaˇ zer J´ adro

Zde jsou um´ıstˇeny kolekce grafick´ ych objekt˚ u, jednotliv´e objekty jsou ˇrazeny do stromov´e struktury, napˇr. objekt obsahuje ˇca´ry, ˇc´ara obsahuje kotevn´ı bod, kotevn´ı bod obsahuje vazbu atd. Stromovou strukturu zde upravuje nˇekolik statick´ y tˇr´ıd, kter´e se staraj´ı o spr´avnou hierarchii stromu a kontroluj´ı kolizn´ı stavy pˇri obsluze vazeb. Staraj´ı se o ˇr´ızen´ı stav˚ u, ve kter´ ych se cel´a aplikace nach´az´ı napˇr.: z´akaz pohybu grafick´ ych objekt˚ u, z´akaz v´ ybˇeru grafick´ ych objekt˚ u, povolen´ı zobrazen´ı kotevn´ıch bod˚ u atd. Tento manaˇzer obsahuje i nˇekolik abstraktn´ıch tˇr´ıd, kter´e umoˇzn ˇuj´ı polymorfismus. S jeho pomoc´ı umoˇzn ˇuj´ı program´atorovy libovolnˇe dopisovat funkce do aplikace, kter´e si zadavatel pr´ace vymysl´ı napˇr.: rotace, transformace, slouˇcen´ı atd. Vˇsechny tyto funkce maj´ı stejnˇe napsan´e j´adro, jejich k´od

38

se dopln´ı o obsluhu, kter´a se provede jinak. Proto i tyto funkce se s uˇzivatelsk´eho hlediska ovl´adaj´ı podobnˇe. Funkc´ım se podobnˇe zad´avaj´ı parametry a definuj´ı jejich elementy.

6.3.

Manaˇ zer Ukl´ ad´ an´ı

Tato tˇr´ıda a jej´ı objekty se staraj´ı o pr´aci s hard diskem a ukl´ad´an´ı obr´azk˚ u ˇ do XML soubor˚ u. R´ıd´ı transformace do jin´ ych form´at˚ u, staraj´ı se o uloˇzen´ı grafick´ ych objekt˚ u pro Ribbon. Kontroluj´ı i spr´avnost naˇcten´ ych dat pomoc´ı kontroln´ıho souˇctu a pˇridˇelov´an´ı ID ˇc´ısel pro sestavov´an´ı stromov´e hierarchie.

7.

Pouˇ zit´ e algoritmy

Pro tuto aplikaci jsem vytvoˇril celou ˇradu algoritm˚ u. V t´eto ˇca´sti bych zm´ınit jenom ty nejzaj´ımavˇejˇs´ı.

7.1.

Pˇ ridˇ elov´ an´ı ID ˇ c´ısel

Veˇsker´e objekty, kter´e aplikace pouˇz´ıv´a jsou ˇrazeny do stromov´e hierarchie. Pˇri pouˇz´ıv´an´ı funkce vazby dokonce mluv´ıme jiˇz o s´ıti objekt˚ u. Cel´a tato struktura se mus´ı d´at libovolnˇe kop´ırovat, ukl´adat a zpˇet vkl´adat. Jazyk C# nedok´aˇze jednoduˇse zkop´ırovat ani jednoduch´e objekty natoˇz tak sloˇzitou strukturu. Proto jsem zde vymyslel jednoduch´e ˇreˇsen´ı. Vˇsem objekt˚ um, kter´e se vytvoˇr´ı a pozdˇeji se budou kop´ırovat, jim aplikace pˇridˇelit tzv. identifikaˇcn´ı ˇc´ıslo (d´ale jen ID). Pˇri kop´ırov´an´ı a zpˇetn´em vkl´ad´an´ı se toto ˇc´ıslo vyuˇz´ıv´a k vytvoˇren´ı nov´e kop´ırovan´e struktury. Nejprve se mus´ı vˇsechny novˇe vytvoˇren´e objekty, kter´e jsme zkop´ırovali (grafick´e prvky, vazby, u ´hly) vloˇzit do speci´aln´ıch kolekc´ı. Tyto objekty maj´ı ve sv´ ych slotech, m´ısto pˇr´ım´eho ukazatele na jejich potomky, ID tˇechto potomk˚ u. Postupnˇe se tyto kolekce proch´az´ı a pˇriˇrazuje se m´ısto ID ˇc´ısla pˇr´ısluˇsn´ y ukazatel na novˇe vytvoˇren´ y objekt um´ıstˇen fyzicky v tˇechto kolekc´ıch. Po vytvoˇren´ı t´eto zkop´ırovan´e struktury se mus´ı zajistit zmˇena p˚ uvodn´ıch ID (uloˇzen´ ych) na nov´a ID (kter´a aplikace novˇe pouˇzije pro pˇr´ıpadn´e dalˇs´ı kop´ırov´an´ı). Cel´a takto vytvoˇren´a struktura se vloˇz´ı do kolekce nakreslen´ ych obr´azk˚ u a zobraz´ı se na r´ ysovac´ım pl´atnˇe.

39

7.2.

Kontrola kolize vazeb

Jak´ ykoli pohyb kotevn´ıch bod˚ u je ˇreˇsen dvouf´azovˇe. Zaˇc´ın´a se ˇza´dost´ı o vyvol´an´ı pohybu. Kotevn´ı body, kter´e o pohyb ˇz´adaj´ı, si nejprve uloˇz´ı do vlastn´ıho speci´aln´ıho slotu nov´e souˇradnice, kam by se mˇeli pˇresunout. Pokud maj´ı na sebe nav´az´any jin´e vztahy (funkce vazby nebo funkce u ´hel) s jin´ ymi kotevn´ımi body, tak i tyto body vyvolaj´ı ˇz´adost o pohyb. Pokud ˇz´ad´ame o pohyb kotevn´ı bod, kter´ y m´a jiˇz sv˚ uj slot s nov´ ymi souˇradnicemi obsazen, provede se kontrola jestli ˇz´ad´ame o pˇresun na ty sam´e souˇradnice. V´ ysledek kontroly se poˇsle do statick´e tˇr´ıdy, kter´a cel´ y pohyb ˇr´ıd´ı. Po skonˇcen´ı f´aze ˇz´adost´ı statick´a tˇr´ıda provede f´azi druhou. Bud’ vˇsem kotevn´ım bod˚ um, kter´e o pohyb ˇz´adaly vyhov´ı a body pˇresune nebo pˇresun nepovol´ı a zjist´ı, kter´ y bod mˇel v souˇradnic´ıch kolizi. Ve f´azi ˇz´adost´ı je potˇreba jeˇstˇe oˇsetˇrit cyklick´e pohyby, kdy jeden kotevn´ı bod ˇz´ad´a o pohyb druhy a ten druh´ y ˇz´ad´a zase ten prvn´ı. Toto hl´ıd´a stejn´a statick´a tˇr´ıda, ’ kter´a shromaˇzd uje ID ˇc´ısla vztah˚ u, kter´e jiˇz byly obslouˇzeny. Kaˇzd´a ˇz´adost o dalˇs´ı obsluhu mus´ı tuto kolekci proj´ıt a v pˇr´ıpadˇe shody ID ˇc´ısla se tento vztah neobslouˇz´ı.

7.3.

Obsluha funkce uhel

Do t´eto funkce vstupuj´ı dvˇe ˇc´ary, kaˇzd´a je tvoˇrena dvˇema kotevn´ımi body. Pojmenujeme si je k1, k2, k3, k4. Tyto kotevn´ı body jsou spoleˇcnˇe ve vztahu nazvan´em u ´hel. Ten je definov´an ˇc´ıslem, kter´e n´am vyjadˇruje ve skuteˇcnosti velikost u ´hlu, kter´ y sv´ıraj´ı dva vektory. Vektor V1 tvoˇren´ y souˇradnicemi bod˚ u k1, k2 a vektor V2 tvoˇren´ y souˇradnicemi bod˚ u k3 a k4. Pˇri pohybu jak´ehokoliv z tˇechto bod˚ u se n´am zmˇen´ı i u ´hel mezi vektory. Aplikace vypoˇc´ıt´a odchylku v u ´hlu a snaˇz´ı se ji zpˇetnˇe vyrovnat pohybem jin´eho bodu. Napˇr´ıklad pohne-li se bod k1, vypoˇc´ıt´a se moˇzn´ y pohyb bod˚ u k2, k3, k4, kter´ y tento vztah vr´at´ı zpˇet na poˇzadovanou hodnotu. Tedy kaˇzd´ y pohyb vytvoˇr´ı tˇri r˚ uzn´a ˇreˇsen´ı. Uplatˇ nuji zde syst´em priorit, definuj´ı kter´e ˇreˇsen´ı se m´a obslouˇzit jak prvn´ı. Pokud toto ˇreˇsen´ı selˇze (skonˇc´ı v kolizn´ım stavu) pˇrech´az´ı se na ˇreˇsen´ı druh´e atd. Zn´ı to jednoduˇse, ale pohyb vˇsech kotevn´ıch bod˚ u oˇsetˇruje algoritmus kontrola kolize vazeb. Pˇri zam´ıtnut´ı pohybu se sloˇzitˇe mus´ı v rekurzi vracet a uplatˇ novat jin´e vˇetve v´ ypoˇctu pro vyrovn´an´ı dan´eho u ´hlu.

7.4.

Kontroln´ı souˇ cet

Tento jednoduch´ y algoritmus je aplikov´an pˇri ukl´ad´an´ı obr´azk˚ u na pevn´ y disk. Na disk se nakreslen´e obr´azky i jejich vz´ajemn´e vztahy ukl´adaj´ı ve form´atu XML. XML je znaˇckovac´ı jazyk, kter´ y data ukl´ad´a do stromov´e struktury. To je pro u ´ˇcely t´eto aplikace v´ yrazn´e zjednoduˇsen´ı, bohuˇzel XML je textov´ y form´at, kter´ y dok´aˇze uˇzivatel jednoduˇse zmˇenit. Proto na cel´ y ˇretˇezec XML je pˇred uloˇzen´ım aplikov´an algoritmus, kter´ y cel´ y tento ˇretˇezec rozloˇz´ı na jednotliv´e znaky a pˇridˇel´ı 40

jim ˇc´ıselnou hodnotu podle ascci. Tyto hodnoty seˇcte a v´ ysledn´e ˇc´ıslo uloˇz´ı do speci´aln´ıho tagu k souboru XML. Ten pak cel´ y uloˇz´ı na disk. Pˇri otev´ır´an´ı souboru se algoritmus provede naopak. Pokud kontroln´ı souˇcty souhlas´ı, souboj je nezmˇenˇen´ y a m˚ uˇze se otevˇr´ıt. Pokud ne, aplikace vyp´ıˇse chybu a soubor se neotevˇre.

8. 8.1.

Pˇ revod do jin´ ych form´ at˚ u Ukl´ ad´ an´ı do SVG

Jedn´a se o souborov´ y form´at nazvan´ y Scalable Vector Graphics, neboli SVG, kter´ y je zaloˇzen´ y na znaˇckovac´ım jazyku XML. Bohuˇzel tento form´at Microsoft nepodporuje a je nutno pouˇz´ıt nˇejak´e knihovny tˇret´ıch stran. Sintax SVG je jednoduch´a, proto tento textov´ y form´at vytv´aˇr´ım v aplikaci pˇr´ımo bez nutnosti pouˇz´ıvat jakoukoli knihovnu. Staˇc´ı postupnˇe proch´azet vˇsechny grafick´e objety, kter´e jsou nakresleny, br´at si z nich potˇrebn´e hodnoty jako souˇradnice kotevn´ıch bod˚ u, typ vykreslen´eho objektu (ˇca´ra, kruh) nebo styl vykreslen´e ˇca´ry (ˇs´ıˇrka, barva). Pomoc´ı tˇechto hodnot sestavit textov´ y ˇretˇezec do poˇzadovan´eho tvaru. Sintax ˇretˇezce n´am pˇresnˇe defiunje W3C (word widw web consorcium). Staˇcilo vymyslet vhodn´ y algoritmus, kter´ y vytvoˇr´ı tzv. PATH obsahuj´ıc´ı data pro vykreslen´ı cesty dan´e ˇc´ary. Toto ˇreˇsen´ı je pomˇernˇe jednoduch´e a funguje spolehlivˇe. Probl´em nast´av´a pokud v aplikaci uˇzivatel pouˇzije funkci pr˚ unik. Uˇzivatel nakresl´ı Venn˚ uv diagram pomoc´ı dvou vz´ajemnˇe propojen´ ych kruˇznic. Toto ’ propojen´ı kruˇznic na monitoru zajiˇst uje grafick´a knihovna WPF. Aplikace vnitˇrnˇe vid´ı st´ale dvˇe samostatn´e kruˇznice a nastavuje jenom jejich zobrazovac´ı m´od pomoc´ı knihovny WPF. Proto i pˇrevod do SVG generuje dvˇe samostatn´e kruˇznice. V tomto jedin´em pˇr´ıpadˇe se export do SVG nezobraz´ı spr´avˇe. ˇ sen´ım tohoto probl´emu by bylo dopoˇc´ıtat souˇradnice jej´ıch pr˚ Reˇ useˇc´ık˚ u a definovat cestu ˇca´ry v SVG pˇres tyto body. Bohuˇzel v t´eto verzi aplikace, nejsem tohoto kroku schopen. Aplikace je navrˇzena jen na zobrazov´an´ı obr´azk˚ u. Pro takov´ y v´ ypoˇcet pr˚ useˇc´ık˚ u jak´ ychkoli objekt˚ u by bylo zapotˇreb´ı pˇredˇelat cel´e j´adro aplikace. Potom by byla aplikace plnohodnotn´ ym vektorov´ ym editorem a to by bylo nad r´amec poˇzadovan´eho zad´an´ı.

8.2.

Ukl´ ad´ an´ı do PDF

Jedn´a se souborov´ y form´at (Portable Document Format – Pˇrenosn´ y form´at dokument˚ u) vytvoˇren´ y firmou Adobe. Microsoft tento form´at nepodporuje, m´a vlastn´ı pod n´azvem XPS. Proto pro pˇrevod dokumentu do form´atu PDF je 41

potˇreba vyuˇz´ıt knihoven tˇret´ıch stran. K pˇrevodu obr´azku do form´atu PDF zde vyuˇz´ıv´am jednu komerˇcn´ı knihovnu (NiPdf), ta funguje naprosto perfektnˇe. Staˇc´ı do ni vloˇzit nakreslen´ y obr´azek ve form´atu XPS a zbytek pr´ace udˇel´a za v´as. Tato knihovna v aplikaci funguje v demo verzi. Proto ve vygenerovan´em PDF dokumentu se objev´ı ˇcerven´ y n´apis TRIAL“. Tato knihovna je v aplikaci pouˇzita a jej´ı funkci si ” m˚ uˇzete ovˇeˇrit v menu, poloˇzka pˇrevod do PDF(1). 2 Samozˇrejmˇe existuj´ı knihovny, kter´e jsou k dispozici zdarma napˇr. ItexScharp nedo PDFnet. Bohuˇzel jejich pouˇzit´ı je sloˇzitˇejˇs´ı. Pˇrevod pomoc´ı knihovny ItexScharp, kterou jsem v aplikaci tak´e pouˇzil, neum´ı vytvoˇr´ı PDF dokument pomoc´ı transformace z jin´eho form´atu. Ale nov´e PDF pom˚ uˇze v´ yvoj´aˇri vys´azet pomoc´ı pˇr´ıkaz˚ u napˇr. writer.LineTo(x,y). Takˇze zde bylo potˇreba vytvoˇrit algoritmus pracuj´ıc´ı na principu z´asobn´ıkov´eho automatu, kter´ y na vstupu m´a ˇretˇezec ve form´atu PATH WPF, ten pˇreˇcte a pomoc´ı pˇr´ıkaz˚ u t´eto knihovny vys´az´ı nov´ y PDF dokument. ItexScharp funguje dobˇre, ale bohuˇzel v´ yˇse zm´ınˇenou uˇzivatelskou funkci pr˚ unik dvou kruˇznic, tak´e nedok´aˇze interpretovat. Ned´a se zde definovat ani sloˇzitˇejˇs´ı vzorkov´an´ı ˇca´ry. ItexScharp podporuje jen vzorkov´an´ı definovan´e nanejv´ yˇs tˇremi ˇc´ısly, proto nˇekter´e sloˇzitˇejˇs´ı vzory ˇcerchov´an´ı zde nejsou moˇzn´e. Drobn´e probl´emy byly i s interpretac´ı souˇradnic pro text a fonty a i zobrazov´an´ı oblouk˚ u zde nefungovalo pˇresnˇe. I pˇres naps´an´ı celkem sloˇzit´eho algoritmu pro rozloˇzen´ı textov´eho ˇretˇezce z PATH WPF do funkci vykresluj´ıc´ı PDF, jsem nakonec od exportu pˇres tuto knihovnu ustoupil a vyuˇz´ıv´am jen ukl´ad´an´ı pomoc´ı bitmapy. Tato funkce je v aplikaci zastoupena v menu poloˇzka pˇrevod do PDF(2).

2 Cel´ y probl´em s C# a Windows je jeho komerˇcnost. V´ yvoj´aˇri maj´ı moˇznost vyuˇz´ıvat opravdu spoustu uˇziteˇcn´ ych knihoven a n´astroj˚ u psan´ıch pˇr´ımo pro Visual Studio. Vˇse ovˇsem za drobn´ y“ poplatek. Pokud m´ate dostatek finanˇcn´ıch prostˇredk˚ u je psan´ı program˚ u v C# ” pomˇernˇe snadn´a z´aleˇzitost a s takovou podporou by to bylo i nˇekolikan´asobnˇe rychlejˇs´ı a efektivnˇejˇs´ı.

42

9.

Moˇ znosti rozˇ s´ıˇ ren´ı aplikace

T´ema matematick´e obr´azky nab´ız´ı mnoho moˇznost´ı jak rozˇs´ıˇrit a zlepˇsit tuto aplikaci. Zlepˇsit se d´a jak uˇzivatelsk´e prostˇred´ı, tak i rozˇs´ıˇren´ı grafick´ ych funkc´ı a odstranˇen´ı nˇekter´ ych uˇzivatelsk´ ych omezen´ı. Dalˇs´ı funkc´ı pro vylepˇsen´ı aplikace je moˇznost pˇrip´ınat grafick´e objekty (kotevn´ı body nebo ˇca´ry) ke mˇr´ıˇzce. Ohlednˇe lepˇs´ı ovladatelnosti by mˇely b´ yt definovan´e vztahy grafick´ ych objekt˚ u pro uˇzivatele pˇr´ıstupn´e v jak´emkoli ˇcase. To znamen´a umoˇznit uˇzivateli pohodlnˇe a jednoduˇse tento vztah graficky zn´azornit a jakkoli ho mˇenit. Doplnit by se mohly i exporty do jin´ ych form´at˚ u.

10.

Motivace pro dalˇ s´ı pr´ aci

Od matematick´ ych obr´azk˚ u je jen mal´ y kr˚ uˇcek k plnohodnotn´emu vektorov´emu editoru a potom i k aplikaci umoˇznuj´ıc´ı generov´an´ı vˇsech geometrick´ ych konstrukc´ı. Aby aplikace fungovala i jako plnohodnotn´a pom˚ ucka, pro v´ yuku geometrie, je potˇreba pˇridat k´otov´an´ı ˇcar a u ´hl˚ u. T´ım se vytvoˇril plnohodnotn´ y CAD editor. T´ema CAD editor˚ u mˇe zaj´ım´a. Pˇr´al bych si takovou aplikaci naprogramovat. Efektivn´ı pr´ace s grafikou na platformˇe Windows ovˇsem vyˇzaduje pouˇz´ıvat pˇr´ımo knihovny DirectX (grafick´e knihovny firmy Microsoft). Tyto knihovny n´am nab´ızej´ı mnoho dalˇs´ıch funkc´ı, jak efektivnˇe a jednoduˇse ˇreˇsit grafiku v naˇsem vektorov´em editoru napˇr. v´ ypoˇcet pr˚ useˇc´ık˚ u dvou pˇr´ımek, u ´hel dvou pˇr´ımek, rotace elipsy atd. Jedn´a se o knihovny, kter´e nejsou objektov´e a jejich studium mi jistˇe zabere spousty ˇcasu. Po nabyt´ ych zkuˇsenostech s touto prac´ı a omezen´ıch na kter´e jsem ve Windows narazil, je tˇreba se zamyslet na jak´e platformˇe dalˇs´ı verzi aplikace implementovat. Ted’ se sp´ıˇse pˇrikl´ad´am k Java“ a multiplatformn´ı grafick´e ” knihovny OpenGL (Open Graphics Library).

43

Z´ avˇ er Po nabyt´ ych zkuˇsenostech s touto prac´ı se r´ad pust´ım do jej´ıho dalˇs´ıho rozvoje. Vytvoˇren´a aplikace v t´eto f´azi nab´ız´ı uˇzivateli celou ˇsk´alu funkc´ı a moˇznosti jak jednoduˇse kreslit matematick´e obr´azky. Aplikace d´av´a uˇzivateli moˇznost dynamicky vytv´aˇret jak´ ykoli matematick´ y obr´azek a simuluje z´aklady geometrick´ ych konstrukc´ı, proto je v t´eto oblasti zajist´e pˇr´ınosem a plnˇe vyhovuje zad´an´ı. Beru na zˇretel moˇznou zmˇenu platformy pro implementaci.

44

Conclusions After gaining experiences with this project I will be glad to start working on developing it further. At this phase, the created application offers a whole range of functions and possibilities for the user to easily draw mathematical images. The application gives the user the ability to dynamically create any mathematical image and it simulates basics of geometrical constructions, therefore it surely is an asset in this area and it fully complies with the assignment. I am aware of the possible change in the platform for implementation.

45

Reference [1] Christian Nagel, Bill Evjen, Jay Glynn, Karli Watson, Morgan Skinner C# Programujeme profesion´ alnˇe Computer Pres, 2009. [2] Charles Petzold. Mistrovstv´ı ve WPF Computer Pres, 2010. [3] Bruno Lowagie iText in Action Manning Publications, 2010. [4] Amandeo Mareˇs. 1001 tip˚ u a trik˚ u pro C# Computer Pres, 2008. [5] Wikipedia. The Free Encyklopedia

46

A.

Obr´ azky vytvoˇ ren´ e aplikac´ı Matematick´ e obr´ azky

Obr´azek 28. Funkce X

Obr´azek 29. Kruˇznice opsan´a

47

ˇ Obr´azek 30. Sesti´ uheln´ık

Obr´azek 31. Pr˚ unik mnoˇzin

48

B.

Obsah pˇ riloˇ zen´ eho CD

bin/ ´ obra ´ zky spustiteln´e pˇr´ımo z CD. Instal´ator aplikace Matematicke doc/ Dokumentace pr´ace ve form´atu PDF, vytvoˇren´a dle z´avazn´eho stylu KI PˇrF pro diplomov´e pr´ace, vˇcetnˇe vˇsech pˇr´ıloh, a vˇsechny soubory nutn´e pro bezprobl´emov´e vygenerov´an´ı PDF souboru dokumentace (v ZIP archivu), tj. zdrojov´ y text dokumentace, vloˇzen´e obr´azky, apod. src/ ´ obra ´zky Kompletn´ı zdrojov´e texty programu Matematicke readme.txt ´ obra ´ zky, Instrukce pro instalaci a spuˇstˇen´ı programu Matematicke vˇcetnˇe poˇzadavk˚ u pro jeho provoz.

49