javascript - 使用 raphael js 绘制弧形矩形

Question

想知道如何用 raphael 绘制一个弯曲的 150 宽 x 4 高矩形形状，并使用 raphael 进行一组分组，我有这个轮廓，基本上需要在上面画一个漂亮的曲线微笑，但不知道该怎么做不使用 raphael.path("")，我创建了一个 http://jsfiddle.net/creativestudio/K3B3r/2/

Answer 1

我曾与拉斐尔合作过，并且必须按照您的要求制作独特的形状。不幸的是，如果它不是内置形状基元，您将不得不使用 raphael.path()。

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

如果您没有 Adob​​e 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 个圆圈必须淡入背景 - 这在你的例子中是一个渐变，这使得它很难做到)