Malowanie zaokrąglone obramowanie wokół obrazu za pomocą Raphaela

Question

Używam biblioteki JavaScript Raphael. Chciałbym narysować obramowanie z zaokrąglonymi krawędziami wokół obrazu (który jest obiektem Rafaela), ale nie potrafię wymyślić, jak to zrobić. Próbowałem ustawić obrys, ale nie pojawia się.

mam to:

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); 

wdzięczni za każdą pomoc mogę dostać!

Answer 1

Myślę, że mówisz o ścieżce przycinającej. Sprawdź Clipping path on Wikipedia. Krótko od Google znalazłem kilka niefortunnych wiadomości z Grupy Google Raphaëla:

Aplikacja raphael musi działać w przeglądarce Internet Explorer bez wtyczek. [Ścieżki przycinające] są dostępne w SVG, ale przeglądarka internetowa nie obsługuje formatu SVG. Zamiast tego używa zastrzeżonego microsoftowego standardu VML (http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

Tak więc w skrócie (IMHO) raphael "może znajdować się wewnątrz" przecięcia operacji svg i operacji VML.

(od Does RaphaelJS support clipping masking compositing?, stanowisko: Sebastian Gurin).

Sprawdź wątek, jeśli chcesz użyć wtyczki, aby włączyć obcinanie w przeglądarkach, które ją obsługują.

Alternatywnie, można spróbować rysunek niewypełniona, pogłaskał prostokąt o tych samych wymiarach w tym samym miejscu co obraz, ale z atrybutem r zestawu obrazu, a stroke-width wystarczająco duży, aby zrekompensować promienia (zauważmy, że może to spowodować ukrycie kończyn obrazu).

Answer 2

Jak na temat korzystania zdjęcie jako wypełnienia:

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 
});