Javascript rilevare continuamente la posizione del mouse all'interno di un canvas

**robynosse** · 20-05-2014, 16:43

Ciao a tutti,

sono dietro a questo script da questa mattina e non riesco più ad arrivare alla soluzione di un problema:

Dato il codice sotto riportato, come faccio a rilevare continuamente la posizione del puntatore del mouse all'interno del canvas?

Se andate in fondo allo script ci sono 2 eventi che vengono controllati per modificare la posizione del canvas:

codice:

     topolino.addEventListener("mouseover",spostaBarra);
     topolino.addEventListener("click",spostaBarra);

E la funzione che si incarica dello spostamento della barra stessa è:

codice:

     function spostaBarra(e){
         puntoR.setCoordinate(e.clientX-9,0);
         rettangolo.spostaSuRetta(puntoR,foglio);
     }

Grazie,
Roberto

codice:

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript">


//----------------------------------------------------
function Punto(cX,cY){
    var x=cX;
    var y=cY;
    this.setCoordinate=function (coordinataX,coordinataY){
        x=coordinataX;
        y=coordinataY;
    };
    this.getX=function(){return x;};
    this.getY=function(){return y;};
    this.maggiore=function(punto){
        if (this.getX()>punto.getX() && this.getY()>punto.getY()){
            return true;
        }else{return false;}
    };
    
}
//----------------------------------------------------
function Rettangolo(puntoA,puntoB){
    var p1=puntoA;
    var p2=puntoB;//il punto b sono largezza e altezza
    var f1;
    var altezza=p2.getY();
    var larghezza=p2.getX();
    this.getPuntoA=function(){return p1;};
    this.getAltezza=function(){return altezza};
    this.getLarghezza=function(){return larghezza;};
    this.disegna=function(foglio){
        f1=foglio.getFoglio();
        f1.fillStyle="#abf";
        var a1=p1.getX();
        var a2=p1.getY();
        var a3=p2.getX();
        var a4=p2.getY();
        f1.fillRect(a1,a2,a3,a4);
    };
    this.cancella=function(foglio){
        f1=foglio.getFoglio();
    f1.beginPath();//Inizializza il path, o resetta il path corrente
    f1.fillStyle= '#FFF';
    f1.fillRect(p1.getX(),p1.getY(),p2.getX(),p2.getY());
};
this.spostaSuRetta=function(puntoNuovo,foglio){
    this.cancella(foglio);
    var pN=puntoNuovo;
    p1.setCoordinate(pN.getX(),p1.getY());
    this.disegna(foglio);
};
}
//----------------------------------------------------
function Palla(punto,raggio){
    var p=punto;
    var r=raggio;
    var f1;
    this.getRaggio=function (){return r;};
    this.setRaggio=function(rag){r=rag;};
    this.getPunto=function(){return p;};
    this.getX=function(){return punto.getX();};
    this.getY=function(){return punto.getY();};
    var xVerso=true;
    var yVerso=true;
    this.setXVerso=function(boolean){xVerso=boolean;};
    this.setYVerso=function(boolean){yVerso=boolean;};
    this.disegna=function(foglio){
        f1=foglio.getFoglio();
    f1.beginPath();//Inizializza il path, o resetta il path corrente
    f1.arc(p.getX(), p.getY(), r, 0, 2*Math.PI, false);
    f1.fillStyle = '#a2a';
    f1.fill();
};
this.sposta=function(puntoB,foglio){
    this.cancella();
    this.controllaCollisioneBordo(puntoB,foglio);
    p.setCoordinate(puntoB.getX(),puntoB.getY());
    this.disegna(foglio);
};
this.controllaCollisioneBordo=function(puntoB,foglio){
    var minX=this.getRaggio();
    var minY=this.getRaggio();
    var maxX=foglio.getLarghezza()-this.getRaggio();
    var maxY=foglio.getAltezza()-this.getRaggio();
    var x=puntoB.getX();
    var y=puntoB.getY();
    if(y>=maxY){this.setYVerso(false);}
    if(y<=minY){this.setYVerso(true);}
    if(x>=maxX){this.setXVerso(false);}
    if(x<=minX){this.setXVerso(true);}


};
this.setXVerso=function(booleano){xVerso=booleano};
this.getXVerso=function(){return xVerso;};
this.setYVerso=function(booleano){yVerso=booleano};
this.getYVerso=function(){return yVerso;};
this.controllaCollisione=function (rettangolo){
        //parte superiore


        if (this.getY()+this.getRaggio()>=rettangolo.getPuntoA().getY() 
            && this.getY()+this.getRaggio()<=rettangolo.getPuntoA().getY()+3
            && this.getX()>=rettangolo.getPuntoA().getX() 
            && this.getX()<=rettangolo.getPuntoA().getX()+rettangolo.getLarghezza()){
            this.setYVerso(false);    
            //in base a dove ha battuto la palla devi cambiare l'angolo
        }
        //parte inferiore
        //sinistra
        //destra
    };


    this.cancella=function(){
    f1.beginPath();//Inizializza il path, o resetta il path corrente
    f1.arc(p.getX(), p.getY(), this.getRaggio()+.5, 0, 2*Math.PI, false);
    f1.fillStyle = '#FFF';
    f1.fill();
};


}
//----------------------------------------------------
function Foglio(idElemento){
    var idE=idElemento;
    var canvas = document.getElementById(idE);
    if (canvas==undefined){
        console.error("Errore, non esiste alcun elemento con id '"+idE+"'.");
    }
     var c = canvas.getContext('2d');//il metodo getContext() mi restituisce un oggetto che mi permette di disegnare nel canvas creato in html
     this.getFoglio=function(){return c;};
     this.getIdElemento=function(){return idE;};
     this.getLarghezza=function(){
         return canvas.width;
     };
     this.getAltezza=function(){
         return canvas.height;
     }; 
     this.setMaxY=function(){};
     this.setMinY=function(){};
     this.setMaxX=function(){};
     this.setMinX=function(){};
 }
//**************************************************************
window.onload=function(){
    var punto=new Punto(40,40);;
    var punto2=new Punto(40,40);
    var puntoR=new Punto(0,0);
    var palla=new Palla(punto,6);
    var foglio=new Foglio("disegno");
    var rettangolo=new Rettangolo(new Punto(10,foglio.getAltezza()-15),new Punto(100,foglio.getAltezza()));
    rettangolo.disegna(foglio);
    var interval;
    var ciclo,intervallo;
    palla.disegna(foglio);
    var b=document.getElementById("bottone1");
    var c=document.getElementById("bottone2");
    var topolino=document.getElementById("disegno");
    //---------------------------------------------------------
    function  coordinate(){
        document.getElementById("scrivi").innerHTML="x="+palla.getX()+" y="+palla.getY();


    }
    //---------------------------------------------------------
    function dammiCoordinateMouse(evt){
        document.getElementById("scrivi").innerHTML="x="+evt.clientX+" y="+evt.clientY;
    }
     //---------------------------------------------------------
     function  inizia(){
         var x = punto.getX();
         var y = punto.getY();
         var angolo=1;
         var i=0;
         if (ciclo!=null){
             clearInterval(ciclo);
         }


         ciclo = setInterval(function () {
             if (i == 90000) {
                 clearInterval(ciclo);
             }
             else {
                 punto2.setCoordinate(x*angolo, y);
                 palla.sposta(punto2,foglio);
                 palla.controllaCollisioneBordo(punto2,foglio);
                 palla.controllaCollisione(rettangolo);//verifica collisione tra oggetto rettangolo e palla
                 if (palla.getXVerso()==true){x++;}else{x--;}
                 if (palla.getYVerso()==true){y++;}else{y--;}
                 i++;
                 
             }
         }
         , 2);
     }
     //---------------------------------------------------------
     function spostaBarra(e){
         puntoR.setCoordinate(e.clientX-9,0);
         rettangolo.spostaSuRetta(puntoR,foglio);
     }
     //---------------------------------------------------------
     b.addEventListener("click",coordinate);
     c.addEventListener("click",inizia);
     topolino.addEventListener("mouseover",spostaBarra);
     topolino.addEventListener("click",spostaBarra);
     //---------------------------------------------------------
 }


</script>


</head>
<body>
    
    <canvas width="800" height="350" id="disegno" style="border:1px solid #d3d3d3;"></canvas>


    <br>
    <div id="scrivi">Coordinate</div>
    <input type="button" id="bottone1" value="Coordinate">
    <input type="button" id="bottone2" value="Inizia">




</body>


</html>

**robynosse** · 20-05-2014, 20:53

trovato:
topolino.addEventListener("mousemove",spostaBarra) ;

Discussione: Javascript rilevare continuamente la posizione del mouse all'interno di un canvas

Strumenti discussione

Ricerca discussione

Visualizza

Javascript rilevare continuamente la posizione del mouse all'interno di un canvas

Permessi di invio