使用Raphael.js在图像上绘图

Question

我可以把一个Raphael.js画布放在一个元素上面吗？我该怎么做才能让这个布局工作？

- Vitor Py

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>

这是一个完整的示例。

- robertc

---

不幸的是，似乎将其呈现在HTML顶部使得无法与下面的内容进行交互。我加入了jQuery并删除了图像并添加了文本 - svn下面的文本无法选择... http://img339.imageshack.us/img339/8051/pictureqy.png - cwd

@cwd 查看pointer-events: none - robertc

Answer 2

对于raphael“paper” div（也就是您的raphael画布），z-index应该设置为2或其他较高的数字，您可以通过以下方式引用它：

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

所以只需进入您的CSS，在#somediv处确保将其z-index设置为较低，然后将文本div的z-index设置为较高即可...

- aaron p