使用Raphael.js绘制图像

Question

我可以将Raphael.js画布放在IMG元素上吗？我该怎么做才能使这个布局有效？

Answer 1

只需使用常规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;
}

然后嵌套你的元素：

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

Here's a full example

Answer 2

z-index：2或raphael“paper”div的高数字（又名你的raphael画布......你所指的是：

var paper = Raphael（'somediv'，100,400）

所以只需转到你的CSS并在#somediv确保你把它的z-index降低，然后把你的文本div的z-index放得更高......