Vẽ trên một hình ảnh bằng Raphael.js

Question

Tôi có thể đặt canvas Raphael.js lên thành phần IMG không? Tôi nên làm gì để bố cục này hoạt động?

Answer 1

Đơn giản chỉ cần đặt vải Raphaël trên đầu trang của các yếu tố hình ảnh sử dụng kỹ thuật CSS thường:

#wrapper { 
    position: relative; 
    padding: 0; 
    outline: 1px solid #999; 
} 
#wrapper img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Sau đó tổ yếu tố của bạn như thế này:

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

Here's a full example.

Answer 2

z-index: 2 hoặc một số số lượng lớn cho các raphael "giấy" div (aka raphael canvas của bạn ... mà bạn tham khảo theo:

var giấy = Raphael ('somediv', 100, 400)

vì vậy chỉ cần đi đến css của bạn và tại #somediv chắc chắn rằng bạn đặt nó là z-index thấp hơn và sau đó đặt z-index div văn bản của bạn cao hơn ...