JavascriptProva

venerdì 20 gennaio 2012

Una linea rotante completa!

Ecco una linea che ruota. Ho inserito i metodi step e ruota.
<script>

function linea(nomeLinea,spessore,colore,orgX,orgY,lunghezza,ang){
 var nomeLinea=nomeLinea;
 var orgX=orgX;
 var orgY=orgY;
 var lunghezza=lunghezza;
 var angolo=ang;
 var velAng;
 var intervallo;
 var spessore=spessore;
 this.disegna=function(){
  for (var n=0;n<=lunghezza;n++)
  document.write("<div id='"+nomeLinea+n+"' style='font-size:1px;position:absolute;left:"+(orgX+n*Math.cos(angolo*Math.PI/180))+"px;top:"+(orgY+n*Math.sin(angolo*Math.PI/180))+"px;background-color:"+colore+";width:"+spessore+"px;height:"+spessore+"px'></div>"); 
  }  
 this.disegna.call();

 this.step=function(){
   for(var n=0;n<=lunghezza;n++){  
     document.getElementById(nomeLinea+n).style.left=orgX+n*Math.cos(angolo*Math.PI/180);
     document.getElementById(nomeLinea+n).style.top=orgY+n*Math.sin(angolo*Math.PI/180);
    }
  angolo+=velAng;

  }
  
 this.ruota=function(velocitaAngolare,tempo){ 
   clearInterval(intervallo);
  velAng=velocitaAngolare;
   intervallo=window.setInterval(function(linea) {linea.step()},tempo,this);
 }
 
}

prima=new linea("prima",2,"black",500,300,300,45);
prima.ruota(1,10);



</script>

<body>

</body>


Per tracciare una linea bisogna fornire come parametri:
  1. Il nome della linea;
  2. lo spessore della linea;
  3. il colore della linea;
  4. la coordinata X del punto di origine;
  5. la coordinata Y del punto di origine;
  6. la lunghezza della linea;
  7. l'angolo di inclinazione della linea.


Per far ruotare la linea bisogna evocare il metodo ruota fornendo come parametri:
  1. la velocità angolare del movimento (termine improprio: in realtà sarebbe l'angolo percorso a ogni intervallo)
  2. il tempo fra due spostamenti (ossia la durata dell'intervallo in millisecondi)

Nessun commento:

Posta un commento