JavaScript DHTML/Ajax Layer/Bezier

Материал из Web эксперт
Перейти к: навигация, поиск

Bezier Path Animation

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Bezier Path Animation</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.debug"); dynapi.library.include("dynapi.fx.Thread"); dynapi.library.include("dynapi.fx.Bezier"); </script> <script language="Javascript"> var path; var dots = []; var cps = []; function drawBezier() { 

 clearPage();
 var controlPoints = eval(document.b.cp.value);
 var steps = parseInt(document.b.steps.value);
 // the path includes starting and ending points
 // results in total of steps+1 points along path
 path = Bezier(controlPoints, steps);
 for (var i=0;i<controlPoints.length/2;i++) {
   var x = controlPoints[i*2];
   var y = controlPoints[i*2+1];
   var color = "red";
   if (i==0 || i==controlPoints.length/2-1) color = "yellow"
   if (!cps[i]) cps[i] = dynapi.document.addChild(new DynLayer("",x-2,y-2,5,5,color));
   else {
     cps[i].setLocation(x-2,y-2);
     cps[i].setBgColor(color);
   }
   cps[i].setVisible(true);
 }
 for (var i=0;i<path.length/2;i++) {
   var x = path[i*2];
   var y = path[i*2+1];
   if (!dots[i]) dots[i] = dynapi.document.addChild(new DynLayer("",x,y,2,2,"black"));
   else {
     dots[i].setLocation(x-2,y-2);
   }
   dots[i].setVisible(true);
 }

} var playblock = dynapi.document.addChild(new DynLayer("",0,0,15,15,"red")); playblock.setVisible(false); var pathanim = new Thread(playblock); pathanim.loop = true; function startAnim() { 

 if (path) {
   playblock.setVisible(true);
   var speed = parseInt(document.b.speed.value);
   pathanim.sleep(speed);
   pathanim.play(path);
 }

} function stopAnim() { 

 playblock.setVisible(false);
 pathanim.stop();

} function clearPage() { 

 for (var i=0;i<dynapi.document.children.length;i++) {
   var c = dynapi.document.children[i];
   if (c!=playblock) c.setVisible(false);
 }

} function setCP(cp) { 

 document.b.cp.value = cp;
 drawBezier();
 startAnim();

} var t="drawBezier();\nstartAnim();\nthis.watch("playblock.getX()");\n" +"this.watch("playblock.getY()");\n" +"this.switchMode("watch");"; dynapi.debug.setEvaluate(t);

</script> </head> <body bgcolor="#999999"> <form name=b> Control Points: <input type=text name="cp" value="[200,150, 200,400, 250,100, 500,300]" size=50> try these <input type=button value="1" onclick="setCP("[200,150, 200,150, 200,150, 400,150, 400,150, 400,150]");"> <input type=button value="2" onclick="setCP("[200,150, 200,150, 400,300]");"> <input type=button value="3" onclick="setCP("[200,200, 400,200, 400,400, 200,400, 200,200]");"> <input type=button value="4" onclick="setCP("[200,200, 200,300, 300,100, 500,200, 300,400, 500,300]");">
Steps: <input type=text name="steps" value="25" size=4>
Speed: <input type=text name="speed" value="40" size=4>ms
<input type=button value="Draw" onclick="drawBezier()">
<input type=button value="Clear Page" onclick="clearPage()">
<input type=button value="Start Animation" onclick="startAnim()">
<input type=button value="Stop Animation" onclick="stopAnim()">
</form> </body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Bezier&oldid=4165»