弯曲的矩形形状与raphael js

时间:2012-10-04 20:19:40

标签: javascript jquery html5 svg raphael

想知道如何使用raphael绘制一个弯曲的150宽x 4高矩形形状和raphael组,我有这个轮廓,基本上需要在它上画一个漂亮的曲线微笑,但无法想象如何做到这一点没有使用raphael.path(“”),我创建了一个http://jsfiddle.net/creativestudio/K3B3r/2/

1 个答案:

答案 0 :(得分:1)

我曾与拉斐尔合作,不得不制作像你要求的独特形状。不幸的是,如果它不是内置的形状原语,你将不得不使用raphael.path()。

创建这些路径可能有点噩梦,但是为了帮助你,我建议使用svg编辑器为你创建路径字符串。我会使用Adobe Illustrator,绘制我的形状,将其保存为svg文件,然后在文本编辑器中打开该svg文件并拉出路径字符串(它是路径标记的“d”属性)。您可能必须使用以“m”或“M”开头的第一个坐标(小写m是相对起点,大写是绝对的,我相信)并调整形状将在svg的上下文中开始的位置图片。这有点落后和错误。

如果您没有Adobe Illustrator,您可以使用像Inkscape这样的免费程序,甚至可以使用像这样的在线svg编辑器:http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html(选择左上方的“编辑源”按钮来抓取路径)

另外,我会在这里查看svg路径元素的规范:http://www.w3.org/TR/SVG/paths.html#PathElement

对不起它不是最简单的方法,但实际上是实现“微笑”形状的唯一方法(除非你的创意和第2层圆圈相互叠加,但是1个圆圈必须淡入背景 - 这在你的情况下是一个渐变,这使得很难做到)