javascript - mover - Obtener la ubicación del mouse en el lienzo
mover un div con el mouse javascript (9)
¿Hay alguna manera de obtener el mouse de ubicación dentro de una etiqueta <canvas> ? Quiero la ubicación relativa a la esquina superior derecha de <canvas> , no la página completa.
Enfoque simple utilizando evento de mouse y propiedades de canvas:
Demostración de la funcionalidad de JSFiddle http://jsfiddle.net/Dwqy7/5/
(Nota: los bordes no se tienen en cuenta, lo que resulta en uno por uno):
Agregue un evento de mouse a su lienzo
canvas.addEventListener("mousemove", mouseMoved);Ajuste
event.clientXyevent.clientYfunción de:
canvas.offsetLeft
window.pageXOffset
window.pageYOffset
canvas.offsetTop
Así:canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset); canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
La pregunta original pedía coordenadas desde la esquina superior derecha (segunda función). Estas funciones deberán estar dentro de un alcance donde puedan acceder al elemento canvas.
0,0 en la esquina superior izquierda:
function mouseMoved(event){
var canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset);
var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
}
0,0 en la esquina superior derecha:
function mouseMoved(event){
var canvasMouseX = canvas.width - (event.clientX - canvas.offsetLeft)- window.pageXOffset;
var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
}
Compartiré el código de mouse más resistente a balas que he creado hasta ahora. Funciona en todos los navegadores con todo tipo de relleno, margen, borde y complementos (como la barra superior stumbleupon)
// Creates an object with x and y defined,
// set to the mouse position relative to the state''s canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
// takes an event and a reference to the canvas
function getMouse = function(e, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset. It''s possible to cache this if you want
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there''s a position:fixed bar (like the stumbleupon bar)
// This part is not strictly necessary, it depends on your styling
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object with x and y defined
return {x: mx, y: my};
}
Notarás que utilizo algunas variables (opcionales) que no están definidas en la función. Son:
stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)[''paddingLeft''], 10) || 0;
stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)[''paddingTop''], 10) || 0;
styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)[''borderLeftWidth''], 10) || 0;
styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)[''borderTopWidth''], 10) || 0;
// Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
// They will mess up mouse coordinates and this fixes that
var html = document.body.parentNode;
htmlTop = html.offsetTop;
htmlLeft = html.offsetLeft;
Recomiendo solo computar esos una vez, y es por eso que no están en la función getMouse .
La forma más fácil es, probablemente, agregar un oyente de evento onmousemove al elemento lienzo, y luego puede obtener las coordenadas relativas al lienzo desde el evento mismo.
Esto es trivial si solo necesita admitir navegadores específicos, pero existen diferencias entre f.ex. Opera y Firefox.
Algo como esto debería funcionar para esos dos:
function mouseMove(e)
{
var mouseX, mouseY;
if(e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if(e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
/* do something with mouseX/mouseY */
}
La respuesta aceptada no funcionará todo el tiempo. Si no usa la posición relativa, los atributos offsetX y offsetY pueden ser engañosos.
Debería 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);
Para la posición del mouse, suelo usar jQuery ya que normaliza algunos de los atributos del evento.
function getPosition(e) {
//this section is from http://www.quirksmode.org/js/events_properties.html
var targ;
if (!e)
e = window.event;
if (e.target)
targ = e.target;
else if (e.srcElement)
targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
// jQuery normalizes the pageX and pageY
// pageX,Y are the mouse positions relative to the document
// offset() returns the position of the element relative to the document
var x = e.pageX - $(targ).offset().left;
var y = e.pageY - $(targ).offset().top;
return {"x": x, "y": y};
};
// now just make sure you use this with jQuery
// obviously you can use other events other than click
$(elm).click(function(event) {
// jQuery would normalize the event
position = getPosition(event);
//now you can use the x and y positions
alert("X: " + position.x + " Y: " + position.y);
});
Esto funciona para mí en todos los navegadores.
EDITAR:
Copié el código de una de mis clases que estaba usando, por lo que la llamada de jQuery a this.canvas fue incorrecta. La función actualizada determina qué elemento DOM ( targ ) causó el evento y luego utiliza el desplazamiento de ese elemento para determinar la posición correcta.
Reste los desplazamientos X e Y del elemento DOM de lienzo desde la posición del mouse para obtener la posición local dentro del lienzo.
También tenga en cuenta que necesitará CSS:
posición: relativa;
establecer en su etiqueta de lona, para obtener la posición relativa del mouse dentro del lienzo.
Y el desplazamiento cambia si hay un borde
Yo usaría jQuery.
$(document).ready(function() {
$("#canvas_id").bind( "mousedown", function(e){ canvasClick(e); } );
}
function canvasClick( e ){
var x = e.offsetX;
var y = e.offsetY;
}
De esta manera, su lienzo puede estar en cualquier parte de su página, relativa o absoluta.
GEE es una biblioteca infinitamente útil para suavizar los problemas con el lienzo, incluida la ubicación del mouse.