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

发布于 2024-09-29 04:45:43 字数 298 浏览 8 评论 0原文

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

感谢我能得到的任何帮助！

原文

I'm using the Raphael JavaScript library. I'd like to draw a border with rounded edges around an image (which is a Raphael object) but I can't seem to figure out how to do that. I tried to set a stroke but it doesn't appear.

I have this:

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

Appreciate any help I can get!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怕倦 2024-10-06 04:45:43

使用图像作为填充怎么样：

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

How about using image as a fill:

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

回复收藏 0 原文

徒留西风 2024-10-06 04:45:43

我认为你在谈论剪切路径。查看维基百科上的剪切路径。距离 Google 不远，我从 Raphaël 的 Google 群组中发现了一些不幸的消息：

raphael 应用程序必须在没有插件的 Internet Explorer 中运行。 SVG 中提供[剪切路径]，但 Internet Explorer 不支持 svg。相反，它使用专有的 Microsoft VML“标准”( http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)
所以总而言之（恕我直言）raphael 只能“位于”svg 操作和 VML 操作的交集内。

（摘自RaphaelJS 支持剪切遮罩合成吗？ ，塞巴斯蒂安·古林 (Sebastian Gurin) 发表)。

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

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