Interaktivita SVG + JavaScript Cvičení 3 Z8144 Počítačová grafika v kartografii Jaro 2020 Šimon Leitgeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly Syntaxe Příklady Základní tvary rectangle rect obdélník/čtverec circle circle kruh ellipse ellipse elipsa line line úsečka polygon polygon polyline polyline lomená čára path path trasa text text Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly Syntaxe Příklady Trasa Path Velká písmena – absolutní pozice malá písmena – relativní pozice moveto M(x y) (posun do bodu x y) closepath Z (uzavření trasy) lineto L(x y) (vykreslí čáru do bodu x y) horizontal lineto H(x) (horizontální čára až do) vertical lineto V(y) (svislá čára) curveto C(x1 y1 x2 y2 x y) smooth curveto S(x2 y2 x y) quadratic Bézier curve Q(x1 y1 x y) smooth quadratic Bézier curveto T(x y) elliptical Arc A(…) (eliptická výšeč/úseč) http://www.w3.org/TR/SVG/paths.html Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly Syntaxe Příklady Trasa – příklad 1 Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly Syntaxe Příklady Trasa – příklad 2 Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly Syntaxe Příklady Trasa – příklad 3 Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly onclick onmouseover / onmouseout onkeydown / onkeyup JavaScript – základní eventy (události) HTML atribut název eventu akce onclick click kliknutí myší onmousedown mousedown stisknutí tlačítka myši onmouseup mouseup uvolnění tlačítka myši onmouseover mouseover najetí myší na prvek onmouseout mouseout odjetí myší z prvku onkeydown keydown stisk klávesy onkeyup keyup konec stisku klávesy Rozdíly mezi eventy click, mousedown, mouseup viz https://stackoverflow.com/a/14805233. Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly onclick onmouseover / onmouseout onkeydown / onkeyup onclick

Testovací div

Příklad: https://codepen.io/LeSimon/pen/ywgovB Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly onclick onmouseover / onmouseout onkeydown / onkeyup onmouseover / onmouseout function testmouseover(element){ element.style.backgroundColor='green'; }; function testmouseout(element){ element.style.backgroundColor='red'; };

Testovací div

Příklad: https://codepen.io/LeSimon/pen/oVBeqe Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly onclick onmouseover / onmouseout onkeydown / onkeyup onkeydown / onkeyup function testKeyUp(event){ event.target.style.backgroundColor='red'; } function testKeyDown(event){ event.target.style.backgroundColor='green'; } document.getElementById("input").addEventListener("keyup", testKeyUp); document.getElementById("input").addEventListener("keydown", testKeyDown); Příklad: https://codepen.io/LeSimon/pen/ywgoEL Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly 1. úkol 2. úkol 1. úkol V SVG: Vytvořte mapové pole, které bude obsahovat smyšlený stát a jeho kraje (alespoň 5 krajů). Toto mapové pole (obrysy jednotlivých krajů) vytvořte pomocí tras. Použijte i křivky nebo kruhové výseče. Jednotlivým „krajům“ přidejte atribut ”data-population”, který bude obsahovat fiktivní data o populaci. Výsledek si uložte někam na disk (budeme s ním dále pracovat). Šimon Leitgeb Interaktivita SVG + JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG – opakování JavaScript – opakování Úkoly 1. úkol 2. úkol 2. úkol Přidejte interaktivitu této „mapě“. Pomocí JavaScriptu (mimo SVG) nastavte ”mouseover” a ”mouseout” event. Po najetí myší na libovolný „kraj“ by se tento kraj měl zabarvit definovanou barvou (vyberte si vlastní). Zároveň by se někde na stránce měl zobrazit údaj o populaci daného kraje. Pokud jste správně nastavili atribut data-population, dostanete se k němu v JS pomocí element.dataset.population Po odjetí myší by se měl obnovit původní vzhled kraje a informace o populaci zmizí. Úkol odevzdávejte jako jeden HTML soubor nebo archiv .zip Termín odevzdání 20. 3. 4:00, max. 10 b. Šimon Leitgeb Interaktivita SVG + JavaScript Díky za pozornost! https://discord.gg/TKt6s3n . . . . . . . . . . . . . . . . . . . .