Podstrony
- telcocafe
- [PHP+MySQL] Problem z połączeniem mysqli('localhost', 'xxx', 'xxx', 'xxx'
- [php] Dodanie textu do pliku. Problem... :) POMOCY!!!!!!!!!!!!!
- Problem ze zgrywaniem z kamery Problem ze zgrywaniem z kamery
- [JS] Problem ze skryptem pobierającym źródło strony skrypt pobierający źródło strony
- Głupi problem HELP !!!
- [JS, jQuery] Problem z przejściem z JS na jQuery
- [HTML] 2 problemy z html-em
- [domena] Problem z domeną
- Problem z O/C - Barton 2800+ AMD Athlon XP 2800+ Barton
- [mysql/php]'problem z identyfikatorami [mysql/php]
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- rafalsal.opx.pl
telcocafe
Piszę taki kod do animacji w SVG w Javascript i mam ogromny problem, bo nie mogę dojść czemu tak się dziwnie dzieje. Kółko ma się poruszać po wygenerowanej ścieżce, ścieżka tworzy się dobrze, bo jest rysowana na ekranie, ale element, mimo, że ma podaną tą samą ścieżkę porusza się po innej. Zauważyłem, że miejsce, w którym kończy się ruch ma zawsze współrzędne x i y dwa razy większe, niż powinno. Ktoś mi pomoże?EDIT: Właśnie sobie poradziłem z rozwiązaniem tego. Poniżej zamieszczam oba kody, nie działający i działający.
Żeby oglądać, trzeba pobrać wtyczkę Adobe SVG stąd, a kod zapisać w pliku z rozszerzeniem .svg. Kulka ma się poruszać tam, gdzie się kliknie myszą.
Mimo, że wiem jak zrobić, żeby działało, to nadal nie wiem dlaczego tak dziwnie?
Tak więc będę wdzięczny za pomysły.
Nie działający:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg onload="makeShape(evt)" a3:scriptImplementation="Adobe" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify"> <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[ var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; svgstartedTime = new Date(); shape = svgdocument.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "red"); am=svgdocument.createElementNS(svgns, "animateMotion"); mp=svgdocument.createElementNS(svgns, "mpath"); mp.setAttributeNS(null, "xlink:href", "#tx"); am.appendChild(mp); shape.appendChild(am); svgdocument.documentElement.appendChild(shape); } //////////////////////////////////////////////////////////////////////////////// function ruch(evt){ element=evt.target; x=shape.getAttributeNS(null, "cx"); y=shape.getAttributeNS(null, "cy"); xx=evt.clientX; yy=evt.clientY; offset=new Date()- svgstartedTime; p=svgdocument.getElementById("tx"); p.setAttribute("d", droga(x, y, xx, yy)); animate = svgdocument.createElementNS(svgns, "animateMotion"); animate.setAttributeNS(null, "path", droga(x, y, xx, yy)); animate.setAttributeNS(null, "begin", offset+"ms"); animate.setAttributeNS(null, "dur", "2s"); shape.appendChild(animate); shape.setAttributeNS(null, "cx", xx); shape.setAttributeNS(null, "cy", yy); }//end ruch(evt); //////////////////////////////////////////////////////////////////////////////// function droga(xp, yp, xk, yk){ var wynik="M"+xp+" "+yp+" "; wynik+="L"+xp+" 120 "; var ls=(new Number(xp)+new Number(xk))/2; ls=parseInt(ls,10); wynik+="C"+xp+" "+"120 "+ls+" 50 "+xk+" 120 "; wynik+="L"+xk+" "+yk; return wynik; } //////////////////////////////////////////////////////////////////////////////// ]]></script> <rect class="bg" id="pole" x="0" y="0" height="600px" width="800px" fill="green" onclick="ruch(evt)"/> <path id="tx" d="M10 50 C10 0 90 0 90 50" style="stroke: grey; fill: none"/> </svg>
Działający:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg onload="makeShape(evt)" a3:scriptImplementation="Adobe" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify"> <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[ var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { animacja=false; if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; svgstartedTime = new Date(); shape = svgdocument.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "red"); am=svgdocument.createElementNS(svgns, "animateMotion"); mp=svgdocument.createElementNS(svgns, "mpath"); mp.setAttributeNS(null, "xlink:href", "#tx"); am.appendChild(mp); shape.appendChild(am); svgdocument.documentElement.appendChild(shape); } //////////////////////////////////////////////////////////////////////////////// function ruch(evt){ if(animacja) return; animacja=true; element=evt.target; x=shape.getAttributeNS(null, "cx"); y=shape.getAttributeNS(null, "cy"); xx=evt.clientX; yy=evt.clientY; shape.setAttributeNS(null, "cx", 0); shape.setAttributeNS(null, "cy", 0); offset=new Date()- svgstartedTime; p=svgdocument.getElementById("tx"); p.setAttribute("d", droga(x, y, xx, yy)); animate = svgdocument.createElementNS(svgns, "animateMotion"); animate.setAttributeNS(null, "path", droga(x, y, xx, yy)); animate.setAttributeNS(null, "begin", offset+"ms"); animate.setAttributeNS(null, "dur", "2s"); animate.setAttributeNS(null, "onend", "ad()"); shape.appendChild(animate); //shape.setAttributeNS(null, "cx", xx); //shape.setAttributeNS(null, "cy", yy); }//end ruch(evt); //////////////////////////////////////////////////////////////////////////////// function ad(){ //var xa=evt.clientX; //var ya=evt.clientY; animacja=false; shape.setAttributeNS(null, "cx", xx); shape.setAttributeNS(null, "cy", yy); } function droga(xp, yp, xk, yk){ var wynik="M"+xp+" "+yp+" "; wynik+="L"+xp+" 120 "; var ls=(new Number(xp)+new Number(xk))/2; ls=parseInt(ls,10); wynik+="C"+xp+" "+"120 "+ls+" 50 "+xk+" 120 "; wynik+="L"+xk+" "+yk; return wynik; } //////////////////////////////////////////////////////////////////////////////// ]]></script> <rect class="bg" id="pole" x="0" y="0" height="600px" width="800px" fill="green" onclick="ruch(evt)"/> <path id="tx" d="M10 50 C10 0 90 0 90 50" style="stroke: grey; fill: none"/> </svg>
Użytkownik chodnik edytował ten post 16 kwiecień 2006, 23:17