addEventListener u otro metodo.

[PercevalCiro]

Hola que tal, gracias de antemano.
Consulta, estoy pintando objetos en un canvas, con javascript, mas precisamente cirulos y cuadrados, lo que quiero ahora es poder seleccionarlo para moverlos. Realmente estoy trabado. Lo que quiero es que reconozca cuando haga click sobre esa area pintada.

Me imagino que tendria que poder realizarlo con el addEventListener, pero no me sale ni de casualidad. A quien le pongo el addEvent.. No se como utilizar correctamente el addEventListener, es decir, cada vez que pinto el objeto deberia crear un nuevo parametro para identificar la posicion.

Desde ya muchas gracias.

Saludos.

[Raziel_Ravenheart]

Pues te voy a colaborar de rapidez, ya que estoy haciendo lo mismo pero ahora estoy afanado, por ir a estudiar, y justo en estos días he estado haciendo eso, pero lo más interesante es el modo en que tienes que ver las cosas. Te lo voy a decir así, para que más adelante no tengas problemas y puedas analizar más a fondo la situación, y yo se que a veces no es por culpa de nosotros, si no que es por falta de conocer todas las herramientas del lenguaje de programación.

Arrastrar un elemento gráfico, que implica?
Supongamos que es una ventana, pero esta ventana solo puede ser arrastrada si se hace click en el área de título, no en el área de contenido. Esto implica tener 3 divs, el div contenedor, llamado ventana, y dentro de este, el div título, y el div contenido. Por medio de CSS o como quieras se aplica estilo para diferenciarlos y darle ese toque de sistemas con interfaz de ventanas. Claro está que puede ser un punto, un cuadrado, o todo el relleno como en tu caso, es solo un ejemplo.

Las acciones que se realizan con el ratón generalmente son click normal, click secundario, doble click, mover el mouse, oprimir cualquiera de los dos botones y soltarlo el botón para dejar de presionar, si estamos seleccionando algo.

Cuando estamos arrastrando un objeto visual con el raton, se realizan solo dos de estas acciones, hacer click con el mouse, pero sin soltar el boton, movemos el mouse. Finalmente para dejar el elemento en su posición final, solo soltamos el botón del mouse. Aquí tenemos tres eventos, que se pueden detectar fácilmente, estos son:

mouse down: cuando se oprime el botón, ojo solo oprimirlo, no soltarlo
mouse move: cuando se muevel el raton, sin importar que el boton este oprimido o no
mouse up: cuando se suelta el botón del mouse.

Ojo, el evento click hace referencia a mousedown y mouseup juntos, es decir, oprimir el boton y soltarlo, por eso no se utiliza.

por otro lado te hará falta reconocer la posición del mouse respecto al navegador cuando se generó un evento, esto lo haces con clientX y clientY de la clase event, y para reconocer la posición del elemento a mover, eso lo haces refiriendote al elemento por medio de

Código Javascript:

document.getElementById("areaCirculo").offsetTop;
document.getElementById("areaCirculo").offsetLeft;
 

offsetTop devuelve la posición del elemento en pixeles de acuerdo al margen superior del contenido
offsetLeft la devuelve con respecto a la margen izquierda.

luego lo que tienes que hacer es que mientras el boton del mouse está oprimido, es decir, mientras no se ha generado el evento mouseup, y se mueva el mouse, es decir se genera el mousemove, igualas las posicion en x e y del elemento con la del mouse.

Una vez se libera el botón del mouse, se cancela la función relacionada con el evento mousemove.

Estudia todos estos elementos, dale vuelta en la cabeza, y esta noche en clase, apenas lo logre te doy más tips, más entendibles, pero por ahora solo saca lo que importa, te resumo

mousedown + mousemove, y mientras esto sucede, posición del elemento se iguala a la del mouse, por medio de clientX/clientY (de event para el mouse), y offsetTop/offsetLeft para el elemento. Hay algo que no te estoy diciendo y espero que pronto te des cuenta.

Finalmente con mouseup, cancelas todas las actualizaciones de posición. Esto se hace con removeEventListener.

Los primeros eventos se los asignas al elemento que necesitas que reconozca el click del mouse, en este caso el relleno de las figuras, supongo que será un div o una imagen.

Otra cosa addEventListener funciona en todos menos en Internet Explorer
attachEvent funciona en internet explorer. Generalment yo no programo para internet explorer


Ojalá entiendas.. yo haré lo posible por ayudarte luego.. pero estudia lo que te dije con calma.. para que aprendas a desarrollar este estilo de problemas

Exitos

[PercevalCiro]

Raziel_Ravenheart, gracias por la respuesta. Estoy pensando en lo que escribiste para ver adonde puedo arribar. Bien:

Arrastrar un elemento gráfico, que implica?

En realidad, coincido y entiendo el punto, la respuesta seria borrarlo y redibujarlo para que de la sensación de movimiento, cuando en realidad no existe un desplazamiento real de los puntos, ni el objeto constituido.

Conocia sobre los eventos del raton, no habia tomado en cuenta este buen dato:

Ojo, el evento click hace referencia a mousedown y mouseup juntos, es decir, oprimir el boton y soltarlo, por eso no se utiliza.

Luego tocas la membrana sensible de mi problema:

Código:

document.getElementById("areaCirculo").offsetTop;

Hasta aqui vamos perfecto, pero yo esto lo puedo aplicar sobre el objeto canvas, pero no sobre lo que pinto, o es precisamente lo que no se. Mi pregunta era si existia algun metodo que contenga el contexto del objeto canvas que me diera esta posicion. Y en ese caso guardarla para que cuando se genere el evento puedo reconocer que es lo que debo hacer y sobre que objeto de los creados esta en particular.

He visto un ejemplo, que funciona correctamente:

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>

<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var canvas;
var ctx;
var x = 75;
var y = 50;
var dx = 5;
var dy = 3;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;

function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.closePath();
 ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");
 return setInterval(draw, 10);
}

function draw() {
 clear();
 ctx.fillStyle = "#FAF7F8";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "#444444";
 rect(x - 15, y - 15, 30, 30);
}

function myMove(e){
 if (dragok){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
 }
}

function myDown(e){
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
  dragok = true;
  canvas.onmousemove = myMove;
 }
}

function myUp(){
 dragok = false;
 canvas.onmousemove = null;
}

init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;

</script>

</section>
</body>
</html> 

Pero yo no se que es mejor, y estoy analizando cual es la mejor forma de crear "observadores" para los eventos. No quiero generar tampoco tantos. Me parece interesante en el ejemplo anterior el evento draw() llamado cada 10 milisegundos... no lo llama cada vez que ocurre algo, me pareció audaz, pero para el este tipo de proyecto, en lo que intento hacer son objetos con muchas propiedades particulares y muchos objetos distintos.


Muchisimas gracias por la respuesta de alto nivel.
Saludos.

Link del ejemplo: http://jsfiddle.net/h3BCq/1/