2016/12/18 18:51 1/10 SVG eseménykezelés < SVG SVG eseménykezelés Szerző: Sallai András Copyright Sallai András, 2011, 2015 Licenc: GNU Free Documentation License 1.3 Web: http://szit.hu Clickre dupla <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript"> <![CDATA[ function duplaz(evt) var r=evt.target.getattribute("r"); evt.target.setattribute("r", 2*r); function visszaallit(evt) evt.target.setattribute("r",50); //]]> </script> <circle cx="100" cy="100" r="50" fill="red" onclick="duplaz(evt)" onmouseout="visszaallit(evt)"/> SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47 oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%c3%a9nykezel%c3%a9s Clickre más szín <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <rect x="0" y="0" width="100" height="50" fill="red" onclick="evt.target.setattribute('fill', 'blue')"/> Alert <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript"> <![CDATA[ function sugarmutat(evt) var sugar = parsefloat(evt.target.getattributens(null,"r")); alert("a kör sugara: " + sugar); //]]> </script> <circle cx="100" cy="100" r="50" fill="blue" onclick="sugarmutat(evt)" "/> http://szit.hu/ Printed on 2016/12/18 18:51
2016/12/18 18:51 3/10 SVG eseménykezelés Célobjektum <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript"> <![CDATA[ function nagyobbsugar(evt) var elem = evt.target; var sugar = elem.getattribute("r"); elem.setattribute("r", sugar * 2); //]]> </script> <circle cx="100" cy="100" r="30" fill="blue" onclick="nagyobbsugar(evt)" /> SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47 oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%c3%a9nykezel%c3%a9s Meg <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript"> <![CDATA[ function nagyobbsugar(evt) var elem = evt.target; var sugar = elem.getattribute("r"); elem.setattribute("r", sugar * 2); alert("működik: " + elem.getclientx()); //]]> </script> <circle cx="100" cy="100" r="30" fill="blue" onclick="nagyobbsugar(evt)" /> http://szit.hu/ Printed on 2016/12/18 18:51
2016/12/18 18:51 5/10 SVG eseménykezelés Esemény másként <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="200" > <rect x="10" y="10" width="140" height="140" rx="5" ry="5" style="fill:lightgrey"> <set attributename="fill" from="lightgrey" to="red" begin="mouseover" end="mouseout"/> </rect> <text x="200" y="75" font-size="30">mozgasd felettem és klikkelj <set attributename="font-size" from="30" to="45" begin="mouseover" end="mouseout"/> <set attributename="fill" from="black" to="red" begin="mousedown" end="mouseup"/> </text> Mozgasd felettem és klikkelj Más elem megváltoztatása <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="200" > <rect id="changetored" x="20" y="20" width="25" height="25" rx="5" ry="5" style="fill:lightgrey"/> <text x="50" y="35" font-size="14">mozgasd felette, hogy a szöveg piros legyen</text> <rect id="bigtext" x="20" y="60" width="25" height="25" rx="5" ry="5" style="fill:lightgrey"/> <text x="50" y="75" font-size="14">mozgasd felette, hogy a szöveg piros legyen</text> <rect id="bigredtext" x="20" y="100" width="25" height="25" rx="5" ry="5" style="fill:lightgrey"/> <text x="50" y="115" font-size="14">klikkelj, hogy a szöveg nagy és piros legyen</text> SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47 oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%c3%a9nykezel%c3%a9s <text id="changingtext" x="350" y="100" font-size="30" fill="black">változtass meg <set attributename="fill" from="black" to="red" begin="changetored.mouseover" end="changetored.mouseout"/> <set attributename="font-size" from="14" to="50" begin="bigtext.mouseover" end="bigtext.mouseout"/> <set attributename="font-size" from="14" to="50" begin="bigredtext.click" end="bigredtext.mouseout"/> <set attributename="fill" from="black" to="red" begin="bigredtext.click" end="bigredtext.mouseout"/> </text> Mozgasd felette, hogy a szöveg piros legyen Mozgasd felette, hogy a szöveg piros legyen Klikkelj, hogy a szöveg nagy és piros legyen Változtass meg Animáció indítása <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="480" > <rect x="20" y="20" width="250" height="250" rx="5" ry="5" style="fill:red"> <animate attributename="opacity" from="1" to="0" begin="click + 1s" dur="1s" fill="restore" /> </rect> <circle cx="250" cy="250" r="100" style="fill:blue"> <animate attributename="fill" from="blue" to="green" begin="mouseover" dur="2s" fill="restore" /> </circle> http://szit.hu/ Printed on 2016/12/18 18:51
2016/12/18 18:51 7/10 SVG eseménykezelés Billentyű <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewbox="0 0 450 250" onload="init()" xml:space="preserve"> <title>billentyűesemények</title> <script type="text/ecmascript"> <![CDATA[ var evttext1; var evttext2; var evttext3; var typeinitialized = false; var text = ""; function init() //hivatkozás a dinamikus szövegelemekre evttext1 = document.getelementbyid("evttext1"); evttext2 = document.getelementbyid("evttext2"); evttext3 = document.getelementbyid("evttext3"); //billentyű események kezelése function typetext(evt) //Minden valódi karakter kezelése "keypress" if (evt.type == "keypress") SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47 oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%c3%a9nykezel%c3%a9s //néhány böngésző támogatja: evt.charcode, //némelyik csak ezt: evt.keycode if (evt.charcode) var charcode = evt.charcode; else var charcode = evt.keycode; //minden valódi karakter if (charcode > 31 && charcode!= 127 && charcode < 65535) text += String.fromCharCode(charCode); //backspace billentyű if (charcode == 8) //szöveg rövidítése text = text.substring(0,text.length-1); //enter billentyű else if (charcode == 10 charcode == 13) stoptyping(evt); //dinamikus szöveg frissítése evttext1.firstchild.nodevalue = text; //nem kívánatos billentyűk például //az Opera vagy Mozilla böngészőben evt.preventdefault(); //ez a függvény az eseményfigyelőt hozzáadja function inittyping(evt) if (!typeinitialized) document.documentelement.addeventlistener("keypress",typetext,false); document.documentelement.addeventlistener("click",stoptyping,false); evttext2.firstchild.nodevalue = "Typing Active"; typeinitialized = true; //nem szeretnénk a dokumentum szintjén a klikk eseményeket evt.stoppropagation(); function stoptyping(evt) document.documentelement.removeeventlistener("keypress",typetext,false); document.documentelement.removeeventlistener("click",stoptyping,false); typeinitialized = false; evttext2.firstchild.nodevalue = "Typing Inactive"; evttext3.firstchild.nodevalue = "You typed: "+text; ]]> </script> <rect id="bgrect" x="-500" y="-500" http://szit.hu/ Printed on 2016/12/18 18:51
2016/12/18 18:51 9/10 SVG eseménykezelés width="1500" height="1500" fill="yellow" stroke="none" /> <rect x="10" y="50" width="150" height="20" fill="white" stroke="black" onclick="inittyping(evt)" /> <g font-size="10px" font-family="arial"> <text x="10" y="30" font-size="12px" font-weight="bold"> Eseménykezelő hozzáadása és törlése </text> <text x="10" y="130"> Kattints a fehér részre a gépelés megkezdéséhez. <tspan x="10" dy="15"> Kattints a szövegdobozon kívül vagy nyomd meg az enter billentyűt az írás befejezéséhez. </tspan> <tspan x="10" dy="15"> Nyomd meg a Backspace billentyűt az utolsó karakter törléséhez. </tspan></text> <text x="15" y="65" id="evttext1" pointer-events="none"> </text> <text x="15" y="90" id="evttext2">nincs gépelés</text> <text x="15" y="105" id="evttext3">ezt írtad: </text> </g> Működés közben Esemény hozzáadása és elvételének bemutatása. Nincs gépelés Ezt gépelted: Kattints Nyomd meg a fehér szövegdobozon a Backspace részre a gépelés billentyűt kívül vagy megkezdéséhez. az nyomd utolsó karakter az enter törléséhez. billentyűt az írás befejezéséhez. Linkek http://hu.wikipedia.org/wiki/ecmascript http://www.w3.org/tr/svg/script.html SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47 oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%c3%a9nykezel%c3%a9s http://www.w3.org/tr/2000/wd-svg-20000629/ecmascript-binding.html http://xmlgraphics.apache.org/batik/using/scripting/ecmascript.html http://www.ibm.com/developerworks/library/x-svgint/ http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/ http://pilat.free.fr/english/routines/js_dom.htm From: http://szit.hu/ - SzitWiki Permanent link: http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%c3%a9nykezel%c3%a9s Last update: 2015/07/07 23:47 http://szit.hu/ Printed on 2016/12/18 18:51