obteniendo la posición del mouse con javascript dentro del lienzo

Estoy estudiando el lienzo jquery y html5. Todo lo que quiero hacer es un simple ejemplo de dibujo html5. Cuando el mouse se mueve, dibujo cuadrados rojos debajo de mi mouse.obteniendo la posición del mouse con javascript dentro del lienzo

Mi código es simple, pero tengo un problema para obtener la posición del cursor del mouse dentro del lienzo.

En este momento, estoy usando x = event.offsetX; para obtener la posición del mouse Esto funciona muy bien en Chrome, sin embargo, cuando se trata de Firefox, no funciona. Cambié el código a x = event.layerX. pero parece que layerX es la posición de mi mouse en relación con la página web, no la posición del lienzo. porque siempre veo una compensación.

Tengo dos preguntas, primero, ¿qué es lo que hay que hacer para obtener la posición correcta del mouse en Firefox? segundo, ¿cómo puedo escribir un código que funcione para, por ejemplo, firefox, cromo, safari y ópera?

aquí es mi código:

<!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>

Fuente

2011-01-31 Bill Yan

'' no es válido e invoca el modo peculiar, que cambia el comportamiento de muchas cosas DOM. '' es la DTD correcta. –

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>

Usted no tiene que preocuparse por la compatibilidad, solamente IE (antes 9) no soporta de forma nativa la lona.

Fuente

2011-01-31 13:46:21 Caio

Esta respuesta resuelve el problema, pero extiende imprudentemente el DOM y reinventa la rueda. –

'' no es válido e invoca el modo peculiar, que cambia el comportamiento de muchas cosas DOM. '' es la DTD correcta. –

Su función de apertura de apertura se rompe si la ventana no se desplaza hacia arriba. –

Necesitará una función personalizada para determinar dónde se encuentra el elemento y luego determinar dónde está el mouse dentro de ese elemento. Here is an example. Utiliza esta función desde el modo peculiar y mi biblioteca JavaScript, que no debería ser difícil de traducir a 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]; 
    } 
}

EDITAR

Esto no funcionará en IE debido a que no apoyar pageX. Deberá pasar el objeto del evento a través de una función como this para corregir eso. Pero como dijo 2x2p1p, el Internet no es compatible con Internet Explorer debajo de la versión 9.

Fuente

2011-01-31 16:04:21 Olical

Veo muchas preguntas sobre este tema y todas proponen buscar DOM o usar offsetX y offsetY, que no siempre se configuran correctamente.

Debe usar la función: canvas.getBoundingClientRect() desde la API de lienzo.

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);

Fuente

2013-09-27 10:24:51 AxFab

Es una buena solución, pero no funcionará si el lienzo está diseñado con bordes o almohadillas ... –

getBoundingClientRect() da rectángulo de caja de borde, pero esa es la única solución que encontré que maneja el estilo de posición y desplaza el mismo camino. Con esta solución, tendrá que usar un código feo como: parseInt (canvas.style.borderLeftWidth.substring (-2) Mi consejo: Agregue relleno y borde en un div principal. – AxFab

obteniendo la posición del mouse con javascript dentro del lienzo

Respuesta

Cuestiones relacionadas