[英]Drawing over an image using Raphael.js
Can I put a Raphael.js canvas over an IMG
element? 我可以将Raphael.js画布放在
IMG
元素上吗? 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: 只需使用常规CSS技术将Raphaël画布放在图像元素的顶部:
#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>
z-index:2 or some high number for the raphael "paper" div (aka your raphael canvas... which you refer to by: z-index:2或raphael“paper”div的高数字(又名你的raphael画布......你所指的:
var paper = Raphael('somediv', 100, 400) 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... 所以,只需转到你的css,在#somediv确保你把它的z-index降低,然后把你的文本div的z-index放得更高......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.