JavaScript a SVG
Cvičení 2
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 JavaScript a SVG Počítačová grafika 2 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Základní tvary – opakování
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 JavaScript a SVG Počítačová grafika 3 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Obdélník / čtverec
<svg width="250" height="120">
<rect x="10" y="10" width="100" height="100" stroke="black"
stroke-width="3" fill="red"/>
<rect x="120" y="10" rx="20" ry="20" width="100" height="100"
stroke="black" stroke-width="3" fill="green"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 4 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Kruh / elipsa
<svg width="250" height="120">
<circle cx="60" cy="60" r="50" stroke="black" stroke-width="3"
fill="red"/>
<ellipse cx="180" cy="60" rx="50" ry="35" stroke="black"
stroke-width="3" fill="green"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 5 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úsečka
<svg width="250" height="120">
<line x1="10" y1="10" x2="240" y2="110" stroke="black"
stroke-width="3"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 6 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Lomená čára
<svg width="250" height="120">
<polyline points="10,10 100,10 240,50 230,110 150,80 60,90"
stroke="black" stroke-width="3" fill="none"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 7 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Polygon (N-úhelník)
<svg width="250" height="120">
<polygon points="10,10 100,10 240,50 230,110 150,80 60,90"
stroke="black" stroke-width="3" fill="red"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 8 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Text
<svg width="250" height="120" >
<text x="10" y="30" fill="black" font-family="Verdana"
font-size="24">Počítačová grafika</text>
<text x="10" y="60" fill="black" font-family="Verdana"
font-size="20">v kartografii</text>
</svg>
Počítačová grafika
v kartografii
Filip Leitner JavaScript a SVG Počítačová grafika 9 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 JavaScript a SVG Počítačová grafika 10 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Trasa – příklad 1
<svg width="250" height="250" style="background-color: white;">
<path stroke="black" stroke-width="3" fill="red"
d="M10,10 L110,10 L110,110 L10,110 L10,10"/>
<path stroke="black" stroke-width="3" fill="green"
d="M130,10 l100,0 l0,100 l-100,0 l0,-100"/>
<path stroke="black" stroke-width="3" fill="teal"
d="M10,130 H110 V230 H10 z"/>
<path stroke="black" stroke-width="3" fill="yellow"
d="M130,130 h100 v100 h-100 z"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 11 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Trasa – příklad 2
<svg width="250" height="120" style="background-color: white;">
<path stroke="black" stroke-width="3" fill="none"
d="M10,100 C50,50 190,10 240,100"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 12 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1. úkol
V SVG:
vytvořte sněhuláka pomocí 3 kruhů, nos (mrkev) jako trojúhelník a oči
vytvořte hvězdu pomocí trasy
můžete použít CodePen (http://codepen.io/pen/)
Filip Leitner JavaScript a SVG Počítačová grafika 13 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1. úkol - riešenie
<svg width="250" height="600" style="background-color:
rgb(83, 83, 83);">
<g class="snowman">
<circle cx="100"cy="50"r="25" stroke-width="0"
fill="white"/>
<circle cx="86"cy="40"r="3" stroke-width="0"
fill="black"/>
<circle cx="104"cy="50"r="5" stroke-width="0"
fill="black"/>
<polygon points="95 45 63 48 95 55" fill="red"/>
<circle
cx="100"cy="120"r="50"stroke="black"stroke-width="0"fi
<circle
cx="100"cy="220"r="80"stroke="black"stroke-width="0"fi
</g>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 14 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1. úkol - riešenie
<svg width="250" height="600" style="background-color:
rgb(83, 83, 83);">
<g class="star">
<path fill="yellow"
d="M25,400 l20,0 l10,-20 l10,20 l20,0 l-17,10
l10,20 l-20,-10 l-20,10 l5,-20"/>
</g>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 15 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 JavaScript a SVG Počítačová grafika 16 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
onclick
<div class="test" style="background-color:red;"
onclick="this.style.backgroundColor='green'">
<h3>Testovací div</h3>
</div>
Příklad: https://codepen.io/LeSimon/pen/ywgovB
Filip Leitner JavaScript a SVG Počítačová grafika 17 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
onmouseover / onmouseout
function testmouseover(element){
element.style.backgroundColor='green';
};
function testmouseout(element){
element.style.backgroundColor='red';
};
<div class="test" style="background-color:red;"
onmouseover="testmouseover(this)"
onmouseout="testmouseout(this)">
<h3>Testovací div</h3>
</div>
Příklad: https://codepen.io/LeSimon/pen/oVBeqe
Filip Leitner JavaScript a SVG Počítačová grafika 18 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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);
<input id="input" class="test"
style="background-color:white;"></input>
Příklad: https://codepen.io/LeSimon/pen/ywgoEL
Filip Leitner JavaScript a SVG Počítačová grafika 19 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2. úkol
Pomocí HTML a JS:
Vytvořte odstavec(div) s textem, který po najetí myši změní tloušťku písma
na tučné(fontWeight:bold) a po odjetí myší se změní zpátky na normální
text(fontWeight:normal).
Můžete použít CodePen (http://codepen.io/pen/)
Filip Leitner JavaScript a SVG Počítačová grafika 20 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2. úkol - riešenie
...
<div>
<p id="i">Some random text</p>
</div>
...
document.getElementById('i').addEventListener('mouseover', (e) =>{
e.target.style.fontWeight = 'bold';
})
function mouseOut (e){
e.target.style.fontWeight = 'normal';
}
document.getElementById('i').addEventListener('mouseout', mouseOut )
Filip Leitner JavaScript a SVG Počítačová grafika 21 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
JavaScript – práce s SVG
V zásadě stejné jako doposud s HTML.
Filip Leitner JavaScript a SVG Počítačová grafika 22 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Eventy v SVG dokumentu
<svg width="250" height="120" style="background-color: white;">
<circle cx="60" cy="60" r="50" stroke="black"
stroke-width="3" fill="red"
onmouseover="this.style.fill='green';"
onmouseout="this.style.fill='red';"/>
</svg>
Filip Leitner JavaScript a SVG Počítačová grafika 23 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Eventy pomocí JS
<svg width="250" height="120" style="background-color: white;">
<circle id="thecircle" cx="60" cy="60" r="50" stroke="black"
stroke-width="3" fill="red" />
</svg>
const theCircle = document.getElementById("thecircle");
function circleOver(event){
event.target.setAttribute('fill', 'green');
}
function circleOut(event){
event.target.setAttribute('fill', 'red');
}
theCircle.addEventListener("mouseover", circleOver);
theCircle.addEventListener("mouseout", circleOut);
Filip Leitner JavaScript a SVG Počítačová grafika 24 / 26
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Domácí úkol
Vytvořte svg objekt obsahující dva červené kruhy
Po kliknutí se kruh vždy přemístí na jiné místo (náhodné) – použijte event click
Úlohu je možné řešit více způsoby, dobře promyšlené řešení vám ušetří spoustu
úsilí
Úkol odevzdávejte jako jeden HTML soubor nebo archiv .zip
Termín odevzdání: 23. 3. 4:00
Filip Leitner JavaScript a SVG Počítačová grafika 25 / 26
Díky za pozornost!
https://discord.gg/TKt6s3n
. . . . . . . . . . . . . . . . . . . .