Javascript Canvas, aggiungere Listener ad elementi

**robynosse** · 22-02-2018, 21:41

Ciao a tutti,

in linea teorica mi piacerebbe sapere cosa è meglio fare per registrare degli eventi su dei punti di un grafico che ho fatto, quando passo sopra un punto(i cerchiolini), vorrei mi desse dei valori specifici (i valori sono relativi, nel senso che viene fatta una proporzione in modo che il grafico si adatti alla larghezza e altezza del canvas).
Quale sarebbe la forma migliore per registrare dei Listener che, quando passo con il mouse sopra un cerchio, mi restituiscano i valori che io ho nell'array?
Stavo pensando di rilevare le coordinate all'interno del canvas quando si muove il mouse e, se corrispondono al punto in questione, con un margine di 10 pixel dal punto, restituire le coordinate assolute.
C'è una forma mligliore?

Grazie,
Roberto

codice:

<html>
  <head>
    <style>
      #mioCanvas{
        border:1px solid #000000;
      }
    </style>
    <script>
      window.onload=function(){
    
      function Ctx(id){
        var x1,x2,y1,y2;
        var elemento = document.getElementById(id);
        var ctx=elemento.getContext("2d");
        var canvasX=elemento.width;
        var canvasY=elemento.height;        
        
       this.linea=function(a,b,c,d){
              x1=a;
              y1=b;
              x2=c;
              y2=canvasY-d;
              ctx.moveTo(x1,y1);
              ctx.lineTo(x2,y2);
              ctx.lineWidth=3;
              ctx.strokeStyle="#A9A9A9";
              ctx.stroke(); 
        }
       
         var calcolaValoriMax=function(array){
           let xMax=0;
           let yMax=0;
            for(let i=0;i<array.length;i++){   
             if(array[i][0]>xMax){
               xMax=array[i][0];
             }
             if(array[i][1]>yMax){
               yMax=array[i][1];
             }
            } 
          return [xMax,yMax];
         }
         
         var calcolaValoreRelativo=function(valore,valoreMax,canvasDimensione){
           return (canvasDimensione/valoreMax)*valore;
         }
         
         var verificaLunghezzaArray=function(array){
          let lunghezza=array.length;          
          if(lunghezza<2){
            alert("Devi passare un array di almeno 2 punti.");
            return FALSE;
          }else{
            return lunghezza;           
          }
         }
               
        this.grafico=function(array){
          let lunghezzaArray=verificaLunghezzaArray(array);
          let valoriMax=calcolaValoriMax(array);
          let valoreXMax=valoriMax[0];
          let valoreYMax=valoriMax[1];
    
          for(let i=0;i<lunghezzaArray;i++){   
            let a=x2;
            let b=y2
            let c=calcolaValoreRelativo(array[i][0],valoreXMax,canvasX);
            let d=calcolaValoreRelativo(array[i][1],valoreYMax,canvasY);
            this.linea(a,b,c,d);
          }
        }
        
        this.punto=function(x,y){
              y=canvasY-y;

         let r = 5;
                    ctx.strokeStyle = "#006400";
                    ctx.fillStyle = "#6ab150";
                    ctx.lineWidth = 2;
          ctx.moveTo(x,y);
                    ctx.arc(x,y,r,0,2*Math.PI);
                    ctx.fill();
                    ctx.stroke();


        }
        
        this.punti=function(array){
          let lunghezzaArray=verificaLunghezzaArray(array);
          let valoriMax=calcolaValoriMax(array);
          let valoreXMax=valoriMax[0];
          let valoreYMax=valoriMax[1];
          for(let i=0;i<lunghezzaArray;i++){
            let a=calcolaValoreRelativo(array[i][0],valoreXMax,canvasX);
            let b=calcolaValoreRelativo(array[i][1],valoreYMax,canvasY);
            this.punto(a,b);
          }
        }
        
      }

        

          var array=[[0,77],[10,10],[20,20],[30,50],[40,60],[45,33],[50,80],[60,30],[70,55],[80,33],[90,23],[100,10],[110,33],[120,74]];     
          var ctx = new Ctx("mioCanvas");
          ctx.grafico(array);
          ctx.punti(array);    
      }
    </script>
  </head>
  <body>

        <canvas id="mioCanvas" width="700" height="400"></canvas> 

  </body>
</html>

Discussione: Javascript Canvas, aggiungere Listener ad elementi

Strumenti discussione

Ricerca discussione

Visualizza

Javascript Canvas, aggiungere Listener ad elementi

Permessi di invio