Drawing over an image using Raphael.js
Ca开发者_如何学Pythonn I put a Raphael.js canvas over an IMG
element? What should I do make this layout work?
Simply position the Raphaël canvas over the top of the image element using normal CSS techniques:
#wrapper {
position: relative;
padding: 0;
outline: 1px solid #999;
}
#wrapper img {
position: absolute;
top: 0;
left: 0;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
Then nest your elements like this:
<div id="wrapper">
<img src="myimage.jpg">
<div id="canvas">
</div>
</div>
Here's a full example.
z-index:2 or some high number for the raphael "paper" div (aka your raphael canvas... which you refer to by:
var paper = Raphael('somediv', 100, 400)
so just go to your css and at #somediv make sure you put it's z-index lower and then put your text div's z-index higher...
精彩评论