Нарисуйте закругленную границу вокруг изображения, используя Рафаэля

Question

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

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

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

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

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

Answer 2

Я думаю, вы говорите об обтравочном контуре. Проверьте Обтравочный контур в Википедии . В двух шагах от Google, я нашел несколько печальных новостей от группы Google Рафаэля:

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

Таким образом, в итоге (IMHO) рафаэль только "может быть внутри" пересечения операций svg и операций VML.

(от Поддерживает ли RaphaelJS компоновку маскировки отсечения? , сообщение Себастьяна Гурина).

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

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