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>

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

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

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

Permessi di invio