MouseOver en rectángulos de canvas

[xinxan22]

Buenos días,

tengo creado un gráfico con canvas con varios rectángulos en horizontal uno detrás de otro.

Me gustaría poder hacer "mouseover" encima de cada rectángulo para mostrar, por ejemplo una div.

Gracias.

Saludos

[Alexis88]

Tomas el elemento a afectar con el evento mouseover y le añades dicho evento, en donde, cuando se produzca, ejecute una función.

Código HTML:

<canvas id = "miCanvas"></canvas>
<div id = "miDiv"></div>
 

Código CSS:

#miDiv {
    display: none;
}
 

Código Javascript:

var miCanvas = document.getElementById("miCanvas"),
    miDiv = document.getElementById("miDiv");
 
//Para mostrar el Div
miCanvas.addEventListener("mouseover", function(){
    miDiv.style.display =  "block";
}, false);
 
//Para ocultar el Div
miCanvas.addEventListener("mouseout", function(){
    miDiv.style.display =  "none";
}, false);
 

Saludos

[xinxan22]

Hola,

gracias por la respuesta pero lo necesitaría para cada rectángulo dibujado.

Saludos

[caricatos]

Hola:

No he visto como poner dinamismo a las imágenes canvas (supongo que será posible), pero con el formato svg sí que se puede hacer: SVG: creación dinámica...

Saludos

[xinxan22]

Hola,

sino encuentro solución para canvas intentaré pasarlo a svg

Saludos

gracias.

[Alexis88]

Si lo necesitas para cada figura, pues toma todos los elementos canvas y aplícales los eventos.

Código HTML:

<section>
    <canvas></canvas>
    <div>UNO</div>
</section>
  
<section>
    <canvas></canvas>
    <div>DOS</div>
</section>
  
<section>
    <canvas></canvas>
    <div>TRES</div>
</section>
 

Código Javascript:

var misCanvas = document.getElementsByTagName("canvas"),
    misDivs = document.getElementsByTagName("div");
 
for (i = 0, limite = misCanvas.length; i < limite; i++) {
    (function(fig){
        //Formamos la figura
        var figura = misCanvas[fig].getContext("2d");
        figura.fillStyle = "#f00";
        figura.fillRect(0, 0, 80, 100);
       
        //Para mostrar el Div
        misCanvas[fig].addEventListener("mouseover", function(){
            misDivs[fig].style.display =  "block";
        }, false);
 
        //Para ocultar el Div
        misCanvas[fig].addEventListener("mouseout", function(){
            misDivs[fig].style.display =  "none";
        }, false); 
    })(i);  
}
 

Básicamente, tomo todos los canvas y Divs del documento y con ayuda de un bucle, voy formando las figuras de los canvas y les aplico los eventos mouseover y mouseout para que se muestre el Div respectivo al posar el puntero del mouse en cada figura. Utilizo una función anónima auto-ejecutable para aplicar correctamente los eventos y creación de figuras a cada canvas.

Aquí puedes ver cómo funciona esto.

Saludos

[xinxan22]

Hola,

muchas gracias por el trabajo pero solo estoy creando un canvas y en él dibujo varios rectángulos:

Código HTML:

context=canvas.getContext("2d");

for....
    context.fillStyle = color;
    context.fillRect(izquierda,arriba,ancho,alto); 
..

Necesito el onmouseover y onmouseout de cada rectángulo (por ejemplo 6 rectángulos) dibujados en 1 canvas.

Saludos

[Panino5001]

Normalmente, lo que se hace es obtener las coordenadas del mouse sobre el canvas (para eso pueden usarse offsetLeft y offsetTop o las poropidades de event: layerX y layerY u offsetX y offsetY -estas últimas para Explorer-). Una vez que se tienen las coordenadas del mouse, con la propiedad data de getImageData podés obtener el color del pixel sobre el que se encuentra el mouse y así manejar el rollOver de manera condicional:

Código:

//en pseudocódigo:
if(color==rojo){
    hacer lo que quiero que pase cuando estoy en rectángulo rojo
}else if(color==verde){
     hacer lo que quiero que pase cuando estoy en rectángulo verde
}

[marlanga]

Los rectángulos de tu gráfica se describirán y se dibujarán por su coordenada superior izquierda, un ancho y un alto.
Por otro lado, ya te han dicho cómo obtener la posición del ratón sobre un elemento CANVAS. Oséase, un punto, una coordenada.

Pues bien, con un sencillísimo algoritmos de detección de colisiones entre un rectángulo y un punto, que cualquiera debería poder programar, podrás saber sobre qué rectángulo tiene el usuario colocado el ratón.

De hecho, así funciona el motor interno de todas las aplicaciones gráficas que quieran detectar eventos del ratón, incluídos navegadores, escritorios de sistemas operativos, aplicaciones de escritorio, etc.

[xinxan22]

Hola,

gracias por las respuestas.

Esperaba encontrar algo como lo que comentó caricatos con SVG y el ejemplo del enlace que publicó pero si no hay otra opción lo haré por la posición del ratón y píxeles tal como decís.

Saludos

[caricatos]

Hola:

No sé las razones para usar canvas, pero lo que quieres supongo que puede conseguirse de otras maneras... cuadrados pueden simularse con simples capas (div) con posicionamiento absoluto... o con los clásicos mapas de imágenes... sabiendo las coordenadas (si creas un canvas, seguro que las sabes...)

En mi página también puedes encontrar un mapa de España con imágenes de sustitución para el efecto rollover...

Saludos

[xinxan22]

Buenos días,

la idea era hacer un gráfico de barras horizontal acumulativo en una misma fila (como una barra de progreso).

Miré con canvas la facilidad de hacer rectángulos y me puse a ello. Una vez lo tengo todo montado me doy cuenta que necesitaría algo de interactividad como pasar el ratón por encima e indicar valores y esas cosas.

Bueno ahora tengo varios casos para probar. O puedo hacer con svg o mediante coordenadas/pixeles.

Quizás otra opción podrían ser las simples divs utilizando ...addEventListener("mouseover", function(){...

Gracias por las respuestas.

Saludos