JavaScript a SVG
Cvičení 2
Z8144 Počítačová grafika v kartografii
Jaro 2019
Šimon Leitgeb
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
Úsečka
<svg width="250" height="120">
<line x1="10" y1="10" x2="240" y2="110" stroke="black"
stroke-width="3"/>→
</svg>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
Plygon (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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
Trasa Path
Velká písmena – absolutní pozice
malá písmena – relativní pozice
moveto M(x y)+ (posun na místo)
closepath Z- (uzavření trasy)
lineto L(x y)+ (vykresli čáru až do bodu)
horizontal lineto H(x)+ (rovnoběžná čá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 JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Jednoduché tvary
Lomené tvary, texty
1. úkol
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/)
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
onclick
onmouseover / onmouseout
onkeydown / onkeyup
2. úkol
JavaScript – základní eventy (události)
onclick kliknutí myší
onmouseover najetí myší na prvek
onmouseout odjetí myší z prvku
onkeydown stisk klávesy
onkeyup konec stisku klávesy
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
onclick
onmouseover / onmouseout
onkeydown / onkeyup
2. úkol
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
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
onclick
onmouseover / onmouseout
onkeydown / onkeyup
2. úkol
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
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
onclick
onmouseover / onmouseout
onkeydown / onkeyup
2. úkol
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
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
onclick
onmouseover / onmouseout
onkeydown / onkeyup
2. úkol
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/)
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Eventy v SVG
JavaScript – práce s SVG
V zásadě stejné jako doposud s HTML.
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Eventy v SVG
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>
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Eventy v SVG
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);
Šimon Leitgeb JavaScript a SVG
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG 2
JavaScript – eventy
SVG + JavaScript
Domácí úkol
Domácí úkol
vytvořte svg objekt obsahující červený kruh
po kliknutí na kruh tento zmizí a na jiném místě se vytvoří
nový (použijte event onclick)
ú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
Šimon Leitgeb JavaScript a SVG
Díky za pozornost!
https://discord.gg/UHTPUDU
. . . . . . . . . . . . . . . . . . . .