使用Raphael在图像周围绘制圆形边框

Question

我正在使用Raphael 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

如何使用图像作为填充:

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 不远，我从 Rapha\xc3\xabl\ 的 Google 群组中发现了一些不幸的消息：

\n

\n

raphael 应用程序必须在没有插件的 Internet Explorer 中运行。[剪切路径] 在 SVG 中可用，但 Internet Explorer 不支持 svg。相反，它使用专有的微软VML“标准”（http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx）

\n

所以总而言之（恕我直言）raphael 只能“位于”svg 操作和 VML 操作的交集内部。

\n

\n

（来自RaphaelJS 支持剪切蒙版合成吗？，Sebastian Gurin 发表）。

\n

如果您有兴趣使用插件在支持它的浏览器中启用剪辑，请查看该线程。

\n

或者，您可以尝试在与图像相同的位置绘制一个具有相同尺寸的未填充的描边矩形，但具有r图像集的属性，并且足够stroke-width大以补偿半径（请注意，这可能会导致隐藏图像的四肢）。

\n