Raziel_Ravenheart, gracias por la respuesta. Estoy pensando en lo que escribiste para ver adonde puedo arribar. Bien:
Cita: 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:
Cita: 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/