javascript - Paint rounded border around image using Raphael - Stack Overflow

admin管理员组

文章数量:1344225

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(".png", 10, 10, 200, 200);

Appreciate any help I can get!

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./images/logos/ps_logo2.png", 10, 10, 200, 200);

Appreciate any help I can get!

• javascript
• raphael

Share Improve this question Follow asked Oct 25, 2010 at 20:36 MarcMarc 17111 gold badge22 silver badges33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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./images/logos/ps_logo2.png)",
    "stroke-width": 2
});

I think you are talking about a clipping path. Check out Clipping path on Wikipedia. A short Google away, I found some unfortunate news from Raphaël's Google Group:

A raphael application must run in internet explorer without plugins. [Clipping paths] are available in SVG, but internet explorer doesn't support svg. Instead it uses the propietary microsoft VML "standard" (http://msdn.microsoft./en-us/library/bb263898(v=VS.85).aspx)

So in summary (IMHO) raphael only "can be inside" the intersection of svg operations and VML operations.

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

Check out the thread if you are interested in using a plugin to enable clipping in browsers that support it.

Alternatively, you could try drawing an unfilled, stroked rectangle with the same dimensions at the same location as the image, but with the r attribute of the image set, and the stroke-width large enough to pensate for the radius (note that this may result in hiding the extremities of the image).

本文标签： javascriptPaint rounded border around image using RaphaelStack Overflow