javascript - 使用 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>

这是一个完整的例子。

Answer 2

z-index:2 或 raphael “paper” div 的某个大数字（又名你的 raphael 画布……你指的是：

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

所以只要去你的CSS和#somediv确保你把它的z-index放低，然后把你的文本div的z-index放高......