Estoy trabajando en una prueba de concepto para un point-and-click. Tengo todo el material y sé cómo hacerlo, excepto que no consigo absolutamente nada cuando intento hacer una función que devuelva la posición del cursor (Relativa a un canvas de HTML5). Empecé ayer, mi plan era terminarlo en un día y aún no he conseguido eso. ¿Alguien puede echarme una mano?
Si consigo que eso funcione seguramente lo acabe hoy y lo ponga por aquí.
#2 Me pasé día y medio mirando páginas como esa, pero no funcionaba nada. Resulta que hay que llamar a la función que quieras sin ningún parámetro, y luego en la definición de la función usar el parámetro del evento.
No tiene ningún sentido pero bueno, ahora funciona. Gracias de todas formas 
Aquí está, una vez adivinadas ciertas cosas sobre JS no es nada difícil.
http://achi.se/projects/software/point-and-click/door/door.zip
#3 No entiendo muy bien esta frase:
Resulta que hay que llamar a la función que quieras sin ningún parámetro, y luego en la definición de la función usar el parámetro del evento.
Pero creo que no entiendes JS, la parte de código que obtiene la posición es esta:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
Función:
La función te devuelve, la posición relativa del ratón dentro del canvas, siendo la esquina TOP-LEFT = 0,0
Parametros:
evt -> Es el evento que dispara el navegador (Un evento de ratón, si no no funcionará) con las coordenadas del raton.
canvas -> El canvas donde quieres la posición relativa del "click."
Código:
canvas.getBoundingClientRect(); -> Esto te devuelve un objeto js (rect), con la posición del canvas dentro de "la web", siendo rect.left (el margen izquierdo) y rect.top (el margen superior).
return { .... };
Y después contruye un objeto js con el resultado, restandole a las coordenadas del raton los margenes del canvas, así la esquina top-left del canvas es la coordenada 0,0.
El resultado de la función es un objeto js:
{ x : 34,2 , y : 13,4 }
Puede tener valores negativos, no te indica si está fuera del canvas.
#5 A lo que me refiero es que tienes que especificar el handler del evento sin parámetros
c.addEventListener("mousedown",lope,false)y luego pasarle el parámettro 'env', o 'ev', o como lo quieras llamar, que no aparece por ninguna otra parte ni se define en ningún sitio.
function lope(ev){ <hacer cosas> }Eso era lo que me confundía.
Eso es porque "lope" es una función, las funciones se pueden llamar con o sin parametros.
Defines la función:
var lope = function(uno, dos, tres, cuatro) {
}; Puedes hacer:
lope(); // uno ,dos, tres, cuatro = undefined
lope(a); // uno = a, dos,tres,cuatro = undefined
lope(a, b, c, d); // uno = a, dos = b, tres = c, cuatro = dTambién puedes declarar una función lambda:
c.addEventListener("mousedown", function(event) { /* hacer cosas */ } ,false)No puedes hacer sin embargo :
c.addEventListener("mousedown", lope() , false)
A no ser, que la función lope te devuelva otra función.
Aquí lo que haces es:
Cuando ocurra el e vento "mousedown" llama al a función "lope".
En el evento mousedown del browser habrá algo así :
function mousedown(listener) { // listener es tu "lope"
var mouseEvent= { /* algo */};
if (listener) {
try { listener(mouseEvent); } catch (err) { /*... */ }
}
}Cuando mousedown se ejecuta, llama a esa funcion, con un parametro "MouseEvent", y el contenido pues depende del navegador.
Si quieres saber que tiene el objeto que te pasan por parametro:
Abres la consola de chrome, y pones un breakpoint en tu código, y lo verás en los watch.
Otra forma es :
if (typeof(console) != 'undefined') { console.log(event); }