CODEWITHSUNDEEP
javascriptjqueryhtmlsvgraphael
user1547007
user1547007

Reputation: 267

Curved rectangle shape with raphael js

Wondering how to draw a curved 150width x 4 hight rectangle shape with raphael and group with a set using raphael, I have this outline and basically need to draw a nice curve smile on it, but can't figure how to do it with out using the raphael.path(""), I have created a http://jsfiddle.net/creativestudio/K3B3r/2/

Upvotes: 1

Views: 1302

Answers (1)

zgood
zgood

Reputation: 12571

I have worked with Raphael and have had to make unique shapes like you are requesting. Unfortunately, if its not a built in shape primitive you will have to use raphael.path().

Creating these paths can be a bit of a nightmare, but to help you out I would recommend using a svg editor to create the path string for you. I would use Adobe Illustrator, draw my shape, save it as a svg file then open up that svg file in a text editor and pull the path string out (its the "d" attribute of the path tag). You may have to play with the first coordinate which either starts with a "m" or "M" (lowercase m is relative starting point, and upper case is absolute I believe) and adjust where the shape will start in the context of your svg image. It's a bit of trail and error.

If you don't have Adobe Illustrator you could use a free program like Inkscape or even use an online svg editor like this one: http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html (select the "edit source" button in the top left to grab the path)

Also, I would check out the spec for the svg path element here: http://www.w3.org/TR/SVG/paths.html#PathElement

Sorry its not the easiest method, but is really the only way to achieve a "smile" shape (unless you get creative and layer 2 circles on top of each other, but 1 circle would have to fade into the background - which in your case is a gradient which makes it very hard to do)

Upvotes: 1

Related Questions