Interaktivita SVG + JavaScript
Cvičení 3
Z8144 Počítačová grafika v kartografii
Jaro 2020
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Minimum 60% bodov
Odovzdanie vždy do 4.00 k danému dátumu
Cvičenie 1 => do 16.3 4:00, Cvičenie 4 => 23.4 4:00
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 2 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
”Use strict”
Zbavuje JavaScript niektorých nástrah - upozorní na chyby
Disallows global variables. (Catches missing var declarations and
typos in variable names)
Silent failing assignments will throw error in strict mode (assigning
NaN = 5;)
Attempts to delete undeletable properties will throw (delete
Object.prototype)
Requires all property names in an object literal to be unique (var x =
x1: ”1”, x1: ”2”)
Function parameter names must be unique (function sum (x, x) ...)
Forbids octal syntax (var x = 023; some devs assume wrongly that a
preceding zero does nothing to change the number.)
Forbids the with keyword
Forbids deleting plain names (delete x;)
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 3 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
”Postrehy”
Obecnejší kód
... cx:${randomPosition(x, y)};
const randomPosition = (min, max) => {
return Math.random() * (max - min) + min;
};
function randomMove(x){
x.style.cx=Math.random() * 580 - 60;
x.style.cy=Math.random() * 580 - 60 ;
};
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 4 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
”Postrehy”
Zamedzenie duplicity
const circ1 = document.getElementById("circle1");
const circ2 = document.getElementById("circle2");
circ1.addEventListener("click", moveit);
circ2.addEventListener("click", moveit);
document.querySelectorAll('circle').forEach(circle
=> {
circle.addEventListener('click',moveIt)
})
Komentujte kód
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 5 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 6 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 7 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Trasa – příklad 1
<svg width="250" height="250" style="background-color: white;">
^^I<path stroke="black" stroke-width="3" fill="red"
^^I^^Id="M10,10 L110,10 L110,110 L10,110 L10,10"/>
^^I<path stroke="black" stroke-width="3" fill="green"
^^I^^Id="M130,10 l100,0 l0,100 l-100,0 l0,-100"/>
^^I<path stroke="black" stroke-width="3" fill="teal"
^^I^^Id="M10,130 H110 V230 H10 z"/>
^^I<path stroke="black" stroke-width="3" fill="yellow"
^^I^^Id="M130,130 h100 v100 h-100 z"/>
</svg>
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 8 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Trasa – příklad 2
<svg width="250" height="120" style="background-color: white;">
^^I<path stroke="black" stroke-width="3" fill="none" d="M10,100
C50,50 190,10 240,100"/>
</svg>
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 9 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Trasa – příklad 3
<svg width="250" height="120" style="background-color:white">
^^I<path fill="none" stroke="black" stroke-width="3" d="M10,75
Q60,25 110,75 T210,75"/>
</svg>
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 10 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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.
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 11 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
onclick
<div class="test" style="background-color:red;"
onclick="this.style.backgroundColor='green'">
^^I<h3>Testovací div</h3>
</div>
Příklad: https://codepen.io/LeSimon/pen/ywgovB
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 12 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
onmouseover / onmouseout
function testmouseover(element){
^^Ielement.style.backgroundColor='green';
};
function testmouseout(element){
^^Ielement.style.backgroundColor='red';
};
<div class="test" style="background-color:red;"
^^Ionmouseover="testmouseover(this)"
^^Ionmouseout="testmouseout(this)">
^^I<h3>Testovací div</h3>
</div>
Příklad: https://codepen.io/LeSimon/pen/oVBeqe
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 13 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
onkeydown / onkeyup
function testKeyUp(event){
^^Ievent.target.style.backgroundColor='red';
}
function testKeyDown(event){
^^Ievent.target.style.backgroundColor='green';
}
document.getElementById("input").addEventListener("keyup",
testKeyUp);
document.getElementById("input").addEventListener("keydown",
testKeyDown);
<input id="input" class="test"
style="background-color:white;"></input>
Příklad: https://codepen.io/LeSimon/pen/ywgoEL
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 14 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Array methods and iterations
let myArray = [2, 'Pete', 2.99, 'another string'];
let cars = [{"color": "purple","type": "minivan"},
{"color": "red","type": "station wagon",}]
Methods
Converting Arrays to Strings - toString(), join()
...pop, push, delete , splice, concat
Iterations
forEach(), map(), filter(), includes(), some(), every(), findIndex()
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 15 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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).
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 16 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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í 2.4 4:00, max. 10 b.
Filip Leitner Interaktivita SVG + JavaScript Počítačová grafika 17 / 18
Díky za pozornost!
https://discord.gg/TKt6s3n
. . . . . . . . . . . . . . . . . . . .