ottenere la posizione del mouse con javascript all'interno di tela

Sto studiando jquery e html5 su tela. Tutto quello che voglio fare è un semplice esempio di disegno html5. Quando il mouse si muove, disegno dei quadrati rossi sotto il mio mouse.ottenere la posizione del mouse con javascript all'interno di tela

Il mio codice è semplice, ma ho un problema nel posizionare il cursore del mouse all'interno dell'area di disegno.

In questo momento, sto usando x = event.offsetX; per ottenere la posizione del mouse. Questo funziona molto bene in chrome, tuttavia quando si tratta di Firefox, non funziona. Ho cambiato il codice in x = event.layerX. ma sembra che layerX sia la posizione del mio mouse rispetto alla pagina web, non la posizione della tela. perché vedo sempre un offset.

Ho due domande, in primo luogo, qual è la cosa giusta da fare per ottenere la posizione corretta del mouse con firefox. secondo, come posso scrivere un codice che funzioni per esempio, firefox, chrome, safari e opera?

Ecco il mio codice:

<!doctype html /> 
<html><head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(
function(){ 

var flip = document.getElementById('flip'); 
    var context = flip.getContext('2d'); 
context.fillStyle = "rgb(255,255,255)"; 
context.fillRect(0, 0, 500, 500); 

     $("a").click(function(event){alert("Thanks for visiting!");}); 
    $("#flip").mousemove(function(event){ 
     var x, y; 


    x = event.layerX; 
    y = event.layerY; 


    //alert("mouse pos"+event.layerX); 
    var flip = document.getElementById('flip'); 
    var context = flip.getContext('2d'); 
context.fillStyle = "rgb(255,0,0)"; 
context.fillRect(x, y, 5, 5); 
    } 
    ); 
    } 
);  
    </script> 
    </head> <body bgcolor="#000000"> <a href="http://jquery.com/">jQuery</a><canvas id="flip" width="500" height="500"> 
    This text is displayed if your browser does not support HTML5 Canvas.</canvas> </body></html>

fonte

2011-01-31 Bill Yan

'' non è valido e richiama la modalità quirks, che modifica il comportamento di molte cose DOM! '' è la DTD corretta. –

enter image description here

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <script> 
      Element.prototype.leftTopScreen = function() { 
       var x = this.offsetLeft; 
       var y = this.offsetTop; 

       var element = this.offsetParent; 

       while (element !== null) { 
        x = parseInt (x) + parseInt (element.offsetLeft); 
        y = parseInt (y) + parseInt (element.offsetTop); 

        element = element.offsetParent; 
       } 

       return new Array (x, y); 
      } 

      document.addEventListener ("DOMContentLoaded", function() { 
       var flip = document.getElementById ("flip"); 

       var xy = flip.leftTopScreen(); 

       var context = flip.getContext ("2d"); 

       context.fillStyle = "rgb(255,255,255)"; 
       context.fillRect (0, 0, 500, 500); 

       flip.addEventListener ("mousemove", function (event) { 
        var x = event.clientX; 
        var y = event.clientY; 

        context.fillStyle = "rgb(255, 0, 0)"; 
        context.fillRect (x - xy[0], y - xy[1], 5, 5); 
       }); 
      });  
     </script> 

     <style> 
      #flip { 
       border: 1px solid black; 
       display: inline-block; 

      } 

      body { 
       text-align: center; 
      } 
     </style> 
    </head> 

    <body> 
     <canvas id = "flip" width = "500" height = "500">This text is displayed if your browser does not support HTML5 Canvas.</canvas> 
    </body> 
</html>

Non dovete preoccuparvi di compatibilità, solo IE (prima 9) non supporta nativamente tela.

fonte

2011-01-31 13:46:21 Caio

Questa risposta risolve il problema, ma allarga involontariamente il DOM e reinventa la ruota. –

'' non è valido e richiama la modalità quirks, che cambia il comportamento di molte cose DOM! '' è la DTD corretta. –

La tua funzione leftTopOffset si interrompe se la finestra non è aperta. –

Avrete bisogno di una funzione personalizzata per capire dove si trova l'elemento e quindi capire dove si trova il mouse all'interno di quell'elemento. Here is an example. Usa questa funzione dalla modalità quirks e dalla mia libreria JavaScript che non dovrebbe essere difficile da tradurre in jQuery.

function findPos(obj) { 
    var curleft = curtop = 0; 

    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return [curleft, curtop]; 
    } 
}

EDIT

Questo non funziona in IE a causa di non sostenere pageX. Dovrai passare l'oggetto evento tramite una funzione come this per correggerla. Ma come detto 2x2p1p, la tela non è supportata da nessun Internet Explorer sotto la versione 9.

fonte

2011-01-31 16:04:21 Olical

Vedo un sacco di domande su questo argomento e tutti propongono di sfogliare DOM o utilizzare offsetX e offsetY, che non sono sempre impostati correttamente.

È necessario utilizzare la funzione: canvas.getBoundingClientRect() dall'API canvas.

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
    } 

    canvas.addEventListener('mousemove', function(evt) { 
    var mousePos = getMousePos(canvas, evt); 
    console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y); 
    }, false);

fonte

2013-09-27 10:24:51 AxFab

È una buona soluzione, ma non funzionerà se il canvas è in stile con bordi o paddings ... –

getBoundingClientRect() fornisce un rettangolo di riquadri, ma quella è l'unica soluzione che ho trovato che gestisce lo styling delle posizioni e lo scorrimento del stessa strada. Con questa soluzione, dovrai utilizzare qualche codice brutto come: parseInt (canvas.style.borderLeftWidth.substring (-2) Il mio consiglio: Aggiungi padding e bordo su un div padre. – AxFab

ottenere la posizione del mouse con javascript all'interno di tela

risposta

Problemi correlati