Краска округлой границы вокруг изображения с использованием Raphael

Question

Я использую библиотеку JavaScript Raphael. Я хотел бы нарисовать границу с закругленными краями вокруг изображения (который является объектом Рафаэля), но я не могу понять, как это сделать. Я попытался установить инсульт, но он не появляется.

У меня есть это:

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

Цените любую помощь я могу получить!

Answer 1

Я думаю, вы говорите об обтравочный контур. Выезд Clipping path on Wikipedia. Короткий Google прочь, я нашел некоторые неудачные новости из группы Google Рафаэля:

Приложение raphael должно запускаться в Internet Explorer без плагинов. [Обтравочный контур] доступны в SVG, но Internet Explorer не поддерживает svg. Вместо этого он использует проприетарный microsoft VML «стандарт» (http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

Итак, в резюме (IMHO) raphael только «может находиться внутри» пересечения операций svg и операций VML.

(From Does RaphaelJS support clipping masking compositing?, post by Sebastian Gurin).

Проверьте поток, если вы заинтересованы в использовании плагина, чтобы включить обрезку в браузерах, которые его поддерживают.

В качестве альтернативы, вы можете попробовать рисунок незаполненный, погладил прямоугольник с такими же размерами в том же самом месте, что и изображение, но с атрибутом r множества изображений, и stroke-width достаточно большой, чтобы компенсировать радиус (отметим, что это может привести к скрытию конечностей изображения).

Answer 2

Как насчет использования изображения в качестве заливки:

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