快速上手RaphaelJS-Instant RaphaelJS Starter翻译（一）

   （目前发现一些文章被盗用的情况，我们将在每篇文章前面添加原文地址，本文源地址：http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter.html）

      Raphael Javascript是一个 Javascript的矢量库。

      它可以处理SVG、VML格式的矢量图，它使用SVG W3C推荐标准和VML作为创建图形的基础，你可以用Javascript 操作Dom 很容易的创建出复杂的柱状图、走势图、曲线图等各种图表，可以画图，可以画出任意复杂度的图像，以及图表或图像裁剪和旋转等复杂操作。

      目前网上已经可以找到对面RaphaelJS包代码的详解教材。在此将尝试对尚无中文版的RaphaelJS书进行翻译。第一部书定为《raphaeljs_starter》,本书网上可以搜到并下载。一共60多页的内容并不太多，适合对RaphaelJS的初步学习和认知。翻译的过程中将穿插一些自己学习过程中的新的和测试代码。另翻译中，比较口语化，没有按照原文逐词翻译，只是将贴近的汉语意思说了出来。

      本书前9页内容分别为封面、本书简介、作者简介、鸣谢、版权声明、致读者等内容，将不再进行翻译。

      第十页开始是目录页，我们从目录开始翻译：

                内容表格

 

快速上手RaphaelJS------- --------------------------------------------------------1

       RaphaelJS是什么?----------------------------------------------------------- 3

       双头和三字母---------------------------------------------------------------- 3  

       两个难题的结合以及RaphaleJS的诞生 ------------------------------------------3

            JavaScript – 求同存异 ----------------------------------------------------3

       浏览器支持 ------------------------------------------------------------------3

       什么是RaphaelJS，什么不是RaphaelJS?--------------------------------------- 4  

            一点关于矢量光栅图形的内容 -----------------------------------------------4  

            RaphaelJS作为一个矢量图形包--------------------------------------------- 5

       RapahaelJS所使用的x,y坐标系-------------------------------------------------5

安装------------------------------------------------------------------------------ 6

      第一步 – 我需要什么? ----------------------------------------------------------6  

      第二步 – 下载RaphaelJS------------------------------------------------------- 6  

      第三步 – 把它加载到HTML里面 --------------------------------------------------7

      这就是了! ---------------------------------------------------------------------7

快速入门 – 创建你第一个图形------------------------------------------------------- 8  

       第一步 – 建立一个用来绘制图形的画布------------------------------------------ 8  

            在你的浏览器视口中建立一个画布-------------------------------------------- 8

            在一个元素里面建立一个对象 (推荐) ------------------------------------------9

       第二步 – 绘制圆--------------------------------------------------------------- 9

             attr() 方法 --------------------------------------------------------------10

你需要知道的重要特征--------------------------------------------------------------12

      创建一个Raphael元素 ---------------------------------------------------------12

           基本图形 ------------------------------------------------------------------12

           复杂图形------------------------------------------------------------------ 15

      在一个编辑器里面提取和使用paths（path:路径）-------------------------------- 17

           矢量图形编辑器 ------------------------------------------------------------17

           创建文本-------------------------------------------------------------------20

      操作元素的样式---------------------------------------------------------------- 22

      转换一个元素------------------------------------------------------------------ 22

            操作一个图形-------------------------------------------------------------- 22

      赋予一个图形以生命（其实就是动画） --------------------------------------------26

      转换动画---------------------------------------------------------------------- 28

      给Raphael元素添加事件-------------------------------------------------------- 29

            鼠标点击事件--------------------------------------------------------------29

            鼠标悬停时间------------------------------------------------------------- 30

      你肯定想要知道和使用的方法--------------------------------------------------- 31

            对元素操作的方法--------------------------------------------------------- 31

            对画布操作的方法 ---------------------------------------------------------39

            Set方法------------------------------------------------------------------ 42

你该知道的人和地儿---------------------------------------------------------------- 45

      官方网站----------------------------------------------------------------------45  

      文章和教材------------------------------------------------------------------- 45  

      社区------------------------------------------------------------------------- 45

      博客------------------------------------------------------------------------- 46

      推特------------------------------------------------------------------------- 46

总结------------------------------------------------------------------------------47 

 

      题外话：其实从这个目录我们就能看出，RaphaelJS这个js包并不特别大，但是想要用得好并不简单。其实书中介绍的内容不过是：1、RaphaelJS能做什么（绘制矢量图）；2、怎么做（建立一个画布，调用方法创建图形）；3、图形怎么处理（赋予属性和转换图形）；4、绑定和处理事件：（点击和悬停）。

      前面我学了一段时间这个js包，直接调用方法画一些图形其实是非常简单的。难度在于如何建造复杂图形以及变换方法的活用以及事件的处理。Ok，我们继续。

 

本书第十二页是最目录的补充说明：

 

      快速上手RaphaelJS

     

欢迎阅读《快速上手RaphaelJS》。

本书是为需要上手RaphaelJS的你提供你需要的所有RaphaelJS的内容。你将会学习到RaphaelJS的基础知识、编写你的脚本并且去发掘RaphaelJS的技巧和骗局。本文包含下面这些部分：

RaphaelJS是什么？----弄清楚RaphaelJS到底是什么，你可以用它来做什么，为什么它so great（。。差点想翻译成:它为何如此之叼）

安装----学校如何去下载和安装RaphaelJS然后最快的搭建起来你的环境。

快速入门----这个部分将会带你领略RaphaelJS的核心任务：绘制图形。一步一步地去完成你使用RaphaelJS的大部分基础共奏：建立你自己的图形。

你需要知道的重要特征----这里你将学习到RaphaelJS最重要的特征。

你该知道的人和地儿---你应该知道的其它资源。

 

下面开始正文翻译。

 

什么是RaphaelJS?

RaphaelJS是一个矢量绘图包，用来在浏览器中绘制图形。

在这部分，我们将了解到RaphaelJS是什么、它与其它同类的绘图包有什么不同，它如何从html5 Canvas中脱颖而出。

 

双头和三个字母

差不多十年前，我们有一个技术大突破称为：可缩放矢量图形（SVG）。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。尽管SVG基于VML发展而来，但是SVG和VML不能在一个浏览器中同时协调工作。SVG可以运行在所有除了版本低于IE9的的IE之外的浏览器。

一个两头和三个字母的头疼事儿。

（IE就是喜欢鸡立鹤群！）

两个问题的结合以及RaphaelJS的诞生

SVG曾是一个美妙的新生儿，但是没人想要承受分娩之痛--使用SVG和VML进行跨浏览器的代码编写太难以致大部分开发者直接用图片去了。因为我们有两种不同的技术，但是他们用不同的语法去完成同样的事情，但是他们却不能共存在一个浏览器中。让它们在一个和谐相处有点困难。

Javascript--求同存异

Javascript最终解决了他俩不能和谐相处的问题，那就是RaphaelJS。

浏览器支持

绝大部分浏览器都支持SVG，ie的所有5.0以上版本都支持VML。而RaphaelJS可以让他们俩在所有浏览器上都运行。RaphaelJS---两栖动物！

什么事RaphaelJS，什么不是？

我们已经知道RaphaelJS是SVG和VML的结合并可以获得浏览器支持。它是万能而且可靠的。但是我们还得知道那些不是RaphaelJS处理的东西。

一些关于矢量图和位图的知识

 其实就是讲图形有两种类型：位图和矢量图，位图放大失真而矢量图放大不失真。因为位图是建立像素基础上的，所以放大失真。而矢量图是通过特殊数学算法来实现放大不失真。

 

 

如图所示，瓶子上面的字体放大仍旧很清晰的就是矢量图，模糊的就是位图。

 

RaphaelJS，一个矢量图包

RaphaelJS作为一个矢量图包，它所以绘制的内容是一个真正的DOM节点。因此它可以被动态的访问、操作、变化大小并敲打锤炼成为其它你想要的图形。更有意思的是它们可以绑定比如点击、悬停、移出等鼠标操作。RaphaelJS的功能简直令人难以置信。

 

RaphaelJS的x,y坐标系

RaphaelJS使用x,y坐标系去绘制图形。屏幕最左上角为0,0位置然后水平为x轴，垂直为y轴。

所以，如果代码里出现(15,20)意思就是这个点位于x轴15个点（水平），y轴20个点的位置（垂直）。

RaphaelJS作为一个矢量图包，绘制时根据浏览器选择使用SVG或者VML。因为绘制出来是一个实际存在的DOM节点，所以可以赋予点击、悬停等操作。这些都是很有趣的地方。

【RaphaelJS和HTML5 Canvas是2个截然不同的东西。尽管它们所做的事情很相似：绘画。但是它们的实现方式并不相同。RaphaelJS以矢量绘制为基础，而HTML5 Canvas则是以光栅为基础 】

 

安装

 安装和搭建RaphaelJS非常简单。你只要下载最新的RaphaelJS的版本然后它引用到html中就行了。

简单的3步，你就可以安装好RaphaelJS并且开始使用了。

第一步：我需要什么？

在你安装RaphaelJS之前，你需要检查你是不是准备好了如下的东西：

    1、浏览器；

    2、文本编辑器

第二步-下载RaphaelJS

最简单的获取方式就是从https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js 去下载。RaphaelJS和别的包不同，它没有其它任何依赖，就是这一个文件。这个链接让你下一个文本，所以你只要把它复制粘贴到一个文本文件改名叫做raphael.js或者其它名字就行了。

 raphael下载

第三步-添加RaphaelJS到html中

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphael Test</title>
    </head>
    <body>
        <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
        </div>
        <!--some html doms-->
        <!--some scripts-->
        <script type="text/javascript" src="../js/lib/raphael.js">
        </script>
    </body>
</html>

代码和原书细节可能不同，是我自己测试用例，总体按照原书来写的。

【注意这里，此书里面讲解了为什么要把引用raphael.js 放置在html元素的最下方。因为浏览器执行html的代码是顺序执行的。你如果把引用放在前面，浏览器会先加载它，导致中间有段时间页面会停滞，这里推荐你先加载dom元素再导入这个js包。】

到此位置，我们的下载和搭建就已经完成了。

在浏览器视口创建画布

创建raphael物体（对象），依赖于raphael的方法和function，如下所示：

var raphaelObj = Raphael(x,y,width,height);

Raphael function中4个参数分别是x坐标、y坐标、宽度、高度。

因为这个是在浏览器视口里面来创建的，所以画布的位置是绝对定位。因此，它会在所有html元素下面重叠。

比如：

// 在浏览器视口中创建画布
var paper = Raphael(20, 30, 650, 400);

这里的Raphael对象被初始化并且分配一个变量称为paper。这个变量被赋予RaphaelJS的所有权利。它从此以后成为Raphael画布对象。

在元素中创建Raphael对象(推荐)

要在一个元素中初始化一个Raphael对象，我们必须把这个元素的ID或者这个元素本身加入到坐标系(x,y)中。

我们举个例子：

//元素本身作为参数

//This line creates a Raphael paper inside 'my-canvas', which is 650pxin width and 400px in height

var elm= document.getElementById("my-canvas");

var paper = Raphael(elm, 650, 400);

//or

// 直接传递元素的ID作为参数

//This line also creates a Raphael paper inside 'my-canvas', which is 650px in width and 400px in height

var paper = Raphael("my-canvas", 650, 400);

这样我们就可以启动引擎开始跑了！

 第二步--绘制圆形

Raphael可以绘制的基本图形有圆形、矩形和椭圆等。

圆形可以通过调用circle()来发来进行。我们使用刚才的paper对象来进行调用。

语法如下：

var cir = paper.circle(x,y,r);

// x and y are the positioning co-ordinates, and "r" is the radius of the circle

//Here the circle is assigned to a variable called cir.

//Example

var cir = paper.circle(35,25,20);

// This will create a circle of 20 pixels in radius at 35,25 (X & Y axis).

circle()方法一共3个参数，分别是x,y坐标和半径。我们在刚才的代码中添加上面的操作。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphael Test</title>
    </head>
    <body>
        <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
        </div>
        <!--some html doms-->
        <!--some scripts-->
        <script type="text/javascript" src="../js/lib/raphael.js">
        </script>
        <script type="text/javascript">
            var paper = Raphael("my-canvas", 650, 400);
            var cir = paper.circle(30, 30, 10);
        </script>
    </body>
</html>

效果如上图所示，由于没有赋予paper和cir其它属性，所以没有颜色之类的属性，我们看起来不直观。下面将介绍attr()方法。

attr() 方法

attr()方法，将我们要添加或者修改的属性作为参数，属性其实就是键值对。如果你熟悉jQuery的话，你就明白attr()的语法与jquery的完全一致。进一步讲，就是JSON格式数据。做过js的童鞋们，或多或少应该接触过JSON。没接触过的，建议去翻阅一下资料。比XML更快的数据传递方式，以后肯定会大放异彩。

语法如下：

element.attr({
"Property1":value1,
"Property2":value2

})

//加入如下属性的键值对

var coloredCircle = paper.circle(35,25,20).attr({
"fill":"#17A9C6",
"stroke":"#2A6570",
"stroke-width":2

});

刚才这个例子添加到我们的Script里面就行了，这里不再截图和添加代码了。效果是：在坐标（35，25）位置出现一个半径为20的颜色为深绿的圆（本人色弱，颜色认错大家莫怪）。

当然，还有其它非常多的属性可以添加。有兴趣大家可以自己去查阅一下资料，这里暂不提及。本书最后部分会有涉及。

下面我们要讲的部分是本书的重点，也是学习Raphael.js的重点。上面讲了那么多其实不过是三两行代码就可以搞定的事情，前提是你正确的下载了包并引用了正确的路径。接下来我们要讲的是创建、操作、转换、动画、事件响应等内容，是Raphael的核心部分，也是工作涉及到的重要部分。

你需要了解的重要特性

创建一个Raphael的元素非常容易。为了更加方便，有些已经定义好的方法供生成一些基本的几何图形。

基本图形

RaphaelJS有3个基本图形，分别是 圆、椭圆和矩形。前面已经讲过圆形，这里我就不再赘述圆形了。

矩形

我们可以使用rect()方法来创建一个矩形。这个方法一共有4个必须参数和一个可选参数。5个参数按顺序分别是x坐标、y坐标、矩形宽度、矩形高度、圆角半径。

圆角半径默认为0，为可选参数。

语法如下：

paper.rect(X,Y,Width,Height,border-radius(optional));

var rect = paper.rect(35,25,170,100).attr({
"fill":"#17A9C6", //filling with background color
"stroke":"#2A6570", // border color of the rectangle
"stroke-width":2 // the width of the border

});

 圆角矩形：

var rect = paper.rect(35,25,170,100,20).attr({ 
"fill":"#17A9C6", //filling with background color 
"stroke":"#2A6570", // border color of the rectangle 
"stroke-width":2 // the width of the border

});

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphael Test</title>
    </head>
    <body>
        <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
        </div>
        <!--some html doms-->
        <!--some scripts-->
        <script type="text/javascript" src="../js/lib/raphael.js">
        </script>
        <script type="text/javascript">
            var paper = Raphael("my-canvas", 650, 400);
            var cir = paper.circle(30, 30, 10);
            var coloredCircle = paper.circle(55, 45, 20).attr({
                "fill": "#17A9C6",
                "stroke": "#2A6570",
                "stroke-width": 2
            });
            var rect = paper.rect(65, 65, 120, 80).attr({
                "fill": "#17A9C6", //filling with background color
                "stroke": "#2A6570", // border color of the rectangle
                "stroke-width": 2 // the width of the border
            });
             var rect1 = paper.rect(190, 65, 120, 80,20).attr({
                "fill": "#17A9C6", //filling with background color
                "stroke": "#2A6570", // border color of the rectangle
                "stroke-width": 2 // the width of the border
            });
        </script>
    </body>
</html>

效果如下：

 椭圆

椭圆的方法是ellipse(),有4个必要参数。分别是x坐标、y坐标、水平半径、垂直半径。水平半径和垂直半径其实就是椭圆的宽和高除以2。

语法如下：

paper.ellipse(X,Y,rX,rY);

var ellipse = paper.ellipse(195,125,170,100).attr({

"fill":"#17A9C6", // background color of the ellipse

"stroke":"#2A6570", // ellipse's border color
"stroke-width":2 // border width

});

 由于和上面矩形的代码几乎一致，除了参数意义。这里不再重复代码和截图。

 

复杂图形

 

    建立上面那种基本图形可以说非常简单。但是复杂图形，比如五角星、八角形等怎么办？它们根本不是圆或者矩形或者椭圆。

    这是Raphael的另外一个奇异之处。

    复杂图形的创建将使用path()方法。它只有一个参数，我们称它为pathString。看上去就是一串字母和数字的组合。其实它非常易于阅读和理解。

    在这之前，我们先想象一下自己画复杂图形的场景。其实你拿一支笔在纸上画画的话，就好像你从一个起点开始，不断的连线到构成你的图画。其实这里的机制就是如此，通过线的连接来构成复杂图形，连线可以使直线也可以是曲线。

Paper.path([pathString])

pathString SVG格式的路径字符串。

路径字符串由一个或多个命令组成。每个命令以一个字母开始，随后是逗号（“,”）分隔的参数。例如："M10,20L30,40"

我们看到两个命令：“M”与参数(10, 20)和“L”与参数(30, 40)大写字母的意思是命令是绝对的，小写是相对的。

这里是可用命令的简表，详细内容请参照：SVG路径字符串格式 。

命令	名称	参数
M	移动到（moveTo）	(x y)+
Z	闭合路径（closepath）	(none)
L	直线（lineTo）	(x y)+
H	水平直线	x+
V	垂直直线	y+
C	曲线（curveto）	(x1 y1 x2 y2 x y)+
S	平滑曲线	(x2 y2 x y)+
Q	二次贝赛尔曲线	(x1 y1 x y)+
T	平滑二次贝塞尔曲线	(x y)+
A	椭圆弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R	Catmull-Rom 曲线*	x1 y1 (x y)+

* “Catmull-Rom 曲线”不是标准SVG命令，在2.0版时被加入。 注：有种特殊情况，路径只包含三个命令：“M10,10R…z”。在这种情况下，路径将平滑连接到它的起点。

语法如下：

paper.path("pathString");

var tri = paper.path("M0,0L26,0L13,18L0,0").attr({

"fill":"#17A9C6", // filling the background color
"stroke":"#2A6570", // the color of the border
"stroke-width":2 // the size of the border

});

      具体例子的介绍稍后，这里先说明一下，上面的命令都是命令+参数这样子的。但是命令有大小写的区别，其效果也不同。大写表示绝对，小写为相对。比如(M20,20)表示从（0,0)位置来计算的，而(m20,20)则是相对画笔的位置（dom位置）来计算。

     在这里你可能会感觉很头大，因为这么多命令，还有几个挺难理解的曲线。再加上复杂图形怎么可能直接就写一串字符出来。其实不必担心，因为复杂图形你可以使用工具来进行绘制。在矢量图制作工具中制作完成然后导出svg格式就行了。推荐使用一个叫做inkscape的矢量图制作工具。

    （2014-01-07接上）

      首先说下，昨天文章里面有个内容是js的引用在body底下位置，这里其实如果你使用jquery或者dojo等框架，可以等document加载完成加入那些js就行了。比如$(document).ready(function(){})这样子的。

      下面举一些例子来讲解下path里面的那些命令。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphael Test</title>
    </head>
    <body>
        <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
        </div>
        <!--some html doms-->
        <!--some scripts-->
        <script type="text/javascript" src="../js/lib/raphael.js">
        </script>
        <script type="text/javascript">
            var paper = Raphael("my-canvas", 700, 600);
            //1、直线使用path命令L
            paper.path("M20,20L100,20z").attr({
                "fill": "#5DDEF4",
                "stroke": "#2A6570",
                "stroke-width": 2
            });
            //2、三角形使用Path命令L
            paper.path("M130,30 L200,30 L160,90 z").attr({
                "fill": "#5DDEF4",
                "stroke": "#2A6570",
                "stroke-width": 2
            });
            //3、T形使用Path命令H,V
            paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z").attr({
                "fill": "#5DDEF4",
                "stroke": "#2A6570",
                "stroke-width": 2
            });
            //4、2次贝塞尔曲线形，使用path命令Q
            paper.path("M240,40L300,40L300,100");
            paper.path("M240,40Q300,40 300,100").attr('stroke', 'red');
            //5、2次贝塞尔曲线形，使用path命令Q和T（第一个是正常绘制，第二个光滑连接）
            paper.path('M10,250 L90,130 L160,160 L250,190 L250,70');
            paper.path('M10,250 Q90,130 160,160 T250,70').attr('stroke', 'red');

            //6、绘制3次贝赛尔曲线，使用命令C，平滑画线使用命令S
            paper.path('M320,120 L350,180 L450,260 L480,140');
            paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red');
            paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow');
        </script>
    </body>
</html>

代码里面删除了上面文字里面的基本图形的绘制代码。为了节省空间，这里就使用这些绘制path的代码。上面代码中一共6个小模块，使用了path命令中最后2个之外的其它所有命令。最后两个待会儿解释。先解释上面几个。代码运行效果图如下：

    这里说明下，原书这里是去inkscape里面里面用inkscape自带的一些工具画了一些星星之类的图形，这里我们是直接写的path命令串，可以更加容易地加深对于path的理解。我们看运行效果图，一共有6个图形。我们上面的代码块也有6小块，分别对应浏览器上面的6个图形。

    绘制直线，准确的说是绘制连线，我们代码内容是这样的：

paper.path("M20,20L100,20z")

这里，pathString为M20,20L100,20z，我们查看上面的path命令表。发现执行情况是这样的：我们的笔移动到坐标(20,20)的位置，连一条线到(100,20),闭合path。也就是上面6个图形中的最左上角的那个线段。
接下来是那个三角形：

paper.path("M130,30 L200,30 L160,90 z")

三角形这个命令和上面线段是一致的，只是多连了一次，构成了一个三角形。这里我们是可以明白，只要你不断的用L命令去连接，其实可以构成任意复杂的图形。下面我们继续讲解第三个代码块：

 paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z")

这里我们用到了H和V命令，这俩命令我们通过查看path命令表可知道它们分别是横着和竖着连线。所以刚才上面那行代码的执行情况是：我们的笔移动到(40,40)，水平线连接到x坐标90，垂直线连接到60，水平线······如此反复，需要注意H和V后面跟的不是线的长度而是坐标，最后我们闭合path得到一个T的图形。这个其实使用上面那个L命令也可以做到，但是水平和垂直命令名对于这种0角度或者90度的线处理起来更加容易。
第四块代码如下：

paper.path("M240,40L300,40L300,100");
paper.path("M240,40Q300,40 300,100");

这里我们第一行代码是画两条线段，上面讲解到了，只不过这里没有z结尾来闭合path。第二行代码使用的坐标与第一个完全一致，只不过两个L命令换成了Q，我们查看命令表，Q表示二次贝塞尔曲线，效果大家可以看靠上位置的那个曲线和曲线附着的的线段。Q命令的后的坐标含义可以通过上面线段的坐标来得知。
第五个代码块如下：

paper.path('M10,250 L90,130 L160,160 L250,190 L250,70');
paper.path('M10,250 Q90,130 160,160 T250,70');

这里的效果图是上面图形中最大那个图形。其实如果理解了第四个图形，这个很好理解。唯一的不同就是这里使用了T命令，这个T和接下来的S命令很相似，就是分别对应Q和S的平滑曲线画法，生活他们中间的那个坐标，而直接使用后一（两）个坐标即可。

第六个代码块如下：

paper.path('M320,120 L350,180 L450,260 L480,140');
paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red');
paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow');

看到最后一幅图，我们看的到一条红色曲线和一条黄色，两个图形的区别就是命令中缺省第一个坐标的区别。上面第5个图形也可以做成类似第六幅图的曲线对比图，大家可以稍微修改一下代码就能搞定了。当然这里其实曲线的每个附着的线段是不是必要存在，为了加深理解，我们将它画了出来。

关于椭圆曲线，这里我直接引用http://lblovesnow-163-com.iteye.com/blog/1485388这个博客博主的测试用例吧。这个博主写的这些测试用例非常到位，我就借花献佛了。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphael Test</title>
    </head>
    <body>
        <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
        </div>
        <!--some html doms-->
        <!--some scripts-->
        <script type="text/javascript" src="../js/lib/raphael.js">
        </script>
        <script type="text/javascript">
            var paper = Raphael("my-canvas", 700, 600);
            //绘制左上的椭圆
            paper.ellipse(130,40,60,30);
            paper.ellipse(70,70,60,30);
            paper.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','yellow');
            paper.text(40,30,'start(70,40)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(160,80,'end(130,70)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });  

            paper.text(70,120,'large-arc-flag=0\nsweep-flag=0')
                .attr({
                    'font-size': 11,
                    'fill': 'green',
                    'text-anchor': 'start'
                });  

            //绘制右上的椭圆
            paper.ellipse(330,40,60,30);
            paper.ellipse(270,70,60,30);
            paper.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','yellow');
            paper.text(240,30,'start(270,40)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(360,80,'end(330,70)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(270,120,'large-arc-flag=0\nsweep-flag=1')
                .attr({
                    'font-size': 11,
                    'fill': 'green',
                    'text-anchor': 'start'
                });  

            //绘制左下的椭圆
            paper.ellipse(130,240,60,30);
            paper.ellipse(70,270,60,30);
            paper.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','yellow');
            paper.text(40,230,'start(70,240)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(160,280,'end(130,270)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(70,320,'large-arc-flag=1\nsweep-flag=0')
                .attr({
                    'font-size': 11,
                    'fill': 'green',
                    'text-anchor': 'start'
                });  

            //绘制右下的椭圆
            paper.ellipse(330,240,60,30);
            paper.ellipse(270,270,60,30);
            paper.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','yellow');
            paper.text(240,230,'start(270,240)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(360,280,'end(330,270)')
                .attr({
                    'font-size':11,
                    'fill':'blue'
                });
            paper.text(270,320,'large-arc-flag=1\nsweep-flag=1')
                .attr({
                    'font-size': 11,
                    'fill': 'green',
                    'text-anchor': 'start'
                });
        </script>
    </body>
</html>

其中有个paper.text方法正好我们解析来要讲解的内容，这里也算提前预览一下。

A(a)elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y) ；

参数含义：

rx：横轴的长度；

ry：纵轴的长度；

x-axis-rotation：椭圆的横轴与x轴的角度；

large-arc-flag：区分弧度的大小（0表示小角度弧度，1表示大角度弧度）；

sweep-flag：绘制弧度围绕椭圆中心的方向（0表示逆时针方向，1表示顺时针方向）；

x y：椭圆曲线终点坐标；

效果图如下：

图画上面有个A命令的参数含义，其实加上这位博主的参数含义的解释还是很好理解的。注意图中的黄色曲线，每个下面有2个参数的解释，忽略4组图形的开始和结束坐标，其实他们的区别就是在larget-arc-flag和sweep-flag的参数设置不同。

large-arc-flag：区分弧度的大小（0表示小角度弧度，1表示大角度弧度）；

sweep-flag：绘制弧度围绕椭圆中心的方向（0表示逆时针方向，1表示顺时针方向）；

是不是一目了然？larget-arc-flag就是画小弧还是大弧的区别、sweep-flag是逆时针还是顺时针。

“Catmull-Rom 曲线”不是SVG标准命令，这里不再赘述，有兴趣的可以自己去研究测试一下。

接下来我们讲解的方法是text方法。上例中出现了paper.text()，是用来显示文字内容的方法。语法其实很简单，就是x,y坐标和文字内容。

paper.text(X,Y,"Raphael JS Text");

var text = paper.text(40,55,"Raphael Text").attr({

"fill":"#17A9C6", // font-color

"font-size":75, // font size in pixels

"text-anchor":"start",

"font-family":"century gothic" // font family of the text

});

//text-anchor属性表明文字与坐标的关系，是从这个坐标开始、为中心还是为结尾。属性值可以设置 "start", "middle" or "end" 默认"middle"。

到此位置，我们已经讲解了创建画布、创建基本图形、创建复杂图形、text文本内容等方法。到现在位置其实我们都是在做静态图画的编辑，我们如果想要操作和添加事件,需要学习接下来的知识。接下来的内容将在下一篇博文中讲述。