Vẽ đường viền tròn xung quanh hình ảnh bằng Raphael

Question

Tôi đang sử dụng thư viện JavaScript Raphael. Tôi muốn vẽ một đường viền với các cạnh tròn xung quanh một hình ảnh (mà là một đối tượng Raphael) nhưng tôi dường như không thể tìm ra cách để làm điều đó. Tôi đã cố gắng để đặt một cơn đột quỵ nhưng nó không xuất hiện.

Tôi có điều này:

var paper = Raphael(10, 50, 500, 500); 
var google_img = paper.image("http://www.google.com/images/logos/ps_logo2.png", 10, 10, 200, 200); 

Đánh giá cao sự giúp đỡ nào tôi có thể nhận được!

Answer 1

Tôi nghĩ bạn đang nói về một đường cắt. Hãy xem Clipping path on Wikipedia. Một Google ngắn đi, tôi tìm thấy một số tin tức đáng tiếc từ Nhóm Google của Raphaël:

Ứng dụng raphael phải chạy trong trình thám hiểm internet không có plugin. [Clipping đường dẫn] có sẵn trong SVG, nhưng internet explorer không hỗ trợ svg. Thay vào đó, nó sử dụng chuẩn VML "chuẩn" (http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

Vì vậy, tóm tắt (IMHO) raphael chỉ "có thể ở bên trong" giao điểm của các hoạt động svg và các hoạt động VML.

(Từ Does RaphaelJS support clipping masking compositing?, do Sebastian Gurin đăng).

Kiểm tra chuỗi nếu bạn quan tâm đến việc sử dụng plugin để bật cắt trong các trình duyệt hỗ trợ nó. Ngoài ra, bạn có thể thử vẽ một hình chữ nhật không có hình chữ nhật, không có kích thước với cùng kích thước tại cùng một vị trí với hình ảnh, nhưng với thuộc tính r của tập hợp hình ảnh và stroke-width đủ lớn để bù cho bán kính (lưu ý rằng điều này có thể dẫn đến ẩn các chi của hình ảnh).

Answer 2

Làm thế nào về việc sử dụng hình ảnh như một điền:

var paper = Raphael(10, 50, 500, 500); 
paper.rect(10, 10, 364, 126, 20).attr({ 
    fill: "url(http://www.google.com/images/logos/ps_logo2.png)", 
    "stroke-width": 2 
});