使用Raphael.js在圖像上繪圖

Question

我可以將Raphael.js畫布放在IMG元素上嗎？我應該做什麼使這個佈局工作？

Answer 1

拉斐爾帆布簡單地放在正常使用CSS技術的圖像元素的頂部：

#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或爲拉斐爾一些高數 「紙」 的div（又名你拉斐爾油畫...您的參考：

VAR紙=拉斐爾（ 'somediv'，100，400 ）

所以只是去你的CSS和#somediv確保你把它的z-index下，然後把你的文字div的z-index的高...