使用 Raphael.js 绘制图像答案

【问题标题】：Drawing over an image using Raphael.js使用 Raphael.js 绘制图像
【发布时间】：2010-08-04 15:51:38
【问题描述】：

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

【问题讨论】：

【解决方案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.

【讨论】：

不幸的是，在 HTML 上渲染它似乎无法与下面的东西交互。我放入 jQuery 并删除了图像并添加了文本 - svn 下的文本不可选择...img339.imageshack.us/img339/8051/pictureqy.png
@cwd See pointer-events: none

【解决方案2】：

z-index:2 或 raphael “paper” div（也就是你的 raphael 画布......你指的是：

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

所以只需转到您的 css 并在 #somediv 确保您将它的 z-index 放低，然后将您的文本 div 的 z-index 放高...

【讨论】：