Dibujar sobre una imagen usando Raphael.js

Question

¿Puedo colocar un lienzo Raphael.js sobre un elemento IMG? ¿Qué debo hacer para que este diseño funcione?

Answer 1

basta con colocar el lienzo Raphaël sobre la parte superior del elemento de imagen utilizando técnicas normales CSS:

#wrapper { 
    position: relative; 
    padding: 0; 
    outline: 1px solid #999; 
} 
#wrapper img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Entonces nido sus elementos como este:

<div id="wrapper"> 
    <img src="myimage.jpg"> 
    <div id="canvas"> 
    </div> 
</div> 

Here's a full example.

Answer 2

z-index: 2 o un número alto para el Raphael "papel" div (también conocido como el lienzo ... Raphael que usted se refiere a por:

papel var = Raphael ('somediv', 100, 400)

tan sólo tiene que ir a su css y al #somediv asegúrese de poner su índice z inferior y luego poner z-index de su div texto más alto ...