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