Zeichnen über ein Bild mit Raphael.js

Question

Kann ich eine Raphael.js Leinwand über ein IMG Element setzen? Was soll ich tun, damit dieses Layout funktioniert?

Answer 1

positionieren Sie einfach den Raphaël Leinwand über der Oberseite des Bildelements mit normalen CSS-Techniken:

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

Dann nisten Ihre Elemente wie folgt aus:

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

Here's a full example.

Answer 2

z-index: 2 oder eine hohe Zahl für die raphael "Papier" div (auch bekannt als Ihre raphael Leinwand ..., die Sie sich beziehen von:

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

so einfach zu Ihrem CSS gehen und bei #somediv stellen Sie sicher, es ist niedriger z-Index setzen und dann höher ... leider