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

我认为你在谈论裁剪路径。查看Clipping path on Wikipedia。我离开了Raphaël谷歌集团的一些不幸消息：

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

所以总结（恕我直言）raphael只能“在里面”svg操作和VML操作的交集。

（来自Does RaphaelJS support clipping masking compositing?，由Sebastian Gurin发布）。

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

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

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

2 个答案: