学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

前面3篇博文里面，我们讲解了一本叫做《Instant RaphaelJS Starter》的书，那本书里我们将RaphaelJS里面的基本内容都进行了比较详细的讲解。但是，坦白的说，那本书通俗易懂却太过浅显。现在我们下一本叫做《Learning Raphael JS Vector Graphics》的书，算是上一本的进阶。当然，它里面大部分篇幅也是基本内容。因为一本书不能去讲一个写复杂的业务问题，你所要做的也是学会基本内容然后自己去活用。我这里翻译此书的目的，第一是想加深对于RaphaelJS的理解，第二是本来也是要读这本书的，就顺带翻译了，或许还能给英语不拿手的同志们有点帮助，第三就是寻找一些突破的契机去解决我现在碰到的问题。好了，废话少说。新的一本书，大家可以去网上搜索一下，应该可以找到下载。

      和上本书一样，本书前面的几页是一些序言、版权声明等东西，这里我也略过不讲了。我们从目录页开始讲。如果你认真学习过前面3篇翻译上本书博文的内容，这本书的目录写出来的时候，你就应该能明白每个章节讲的是什么内容。

                         目录

序言 --------------------------------------------------- 1

第一章: Web图形---------------------------------------- 5

     在Web上绘制矢量图---------------------------------- 6

           矢量图形绘制包-----------------------------------7

     详述SVG-------------------------------------------- 8

           使用RaphaelJS包而不是直接使用SVG-------------- 9

     RaphaelJS的应用--------------------------------------9

     下载RaphaelJS-------------------------------------- 10

     创建RaphaelJS的Js项目------------------------------ 11

           项目的构建与优化 --------------------------------11

     小结-------------------------------------------------11

第二章: RaphaelJS基本图形绘制 --------------------------13

      绘制环境------------------------------------------- 13

           画布坐标系-------------------------------------- 15

      绘制基本图形---------------------------------------- 16

      导入图片--------------------------------------------18

      Raphael元素属性------------------------------------ 18

           简单（基础）填充-------------------------------- 19

           图片填充---------------------------------------- 19

           应用笔画---------------------------------------- 20

           其它属性---------------------------------------- 21

                 超链接--------------------------------------21

                 透明度--------------------------------------22

                 矩形裁剪------------------------------------22

           渐变应用----------------------------------------23

                线性渐变------------------------------------ 23

                径向渐变------------------------------------ 25

           元素分组---------------------------------------- 27

     使用文本-------------------------------------------- 28

           引用常用字体------------------------------------ 29

     小结-------------------------------------------------30

第三章: 绘制Path（路径）---------------------------- ----31

      Path绘制概念--------------------------------------- 32

      Path绘制命令--------------------------------------- 33

            "移动到"命令------------------------------------34

            "连接到"命令----------------------------------- 35

            "关闭路径"命令--------------------------------- 37

      绘制曲线------------------------------------------- 38

            二次贝塞尔曲线--------------------------------- 38

            三次贝塞尔曲线--------------------------------- 41

            绘制弧线--------------------------------------- 43

      Path中比较实用的方法------------------------------- 46

            Element.getTotalLength() ---------------------46

            Element.getPointAtLength(length) -------------47

            Element.getSubpath(from, to)----------------- 48

           Catmull-Rom弧线------------------------------- 49

       小结----------------------------------------------- 50

第四章: 变形转换和事件处理------------------------------ 51

      基本图形变换和事件处理------------------------------52

            基本图形变换------------------------------------52

                  平移----------------------------------------53

                  旋转--------------------------------------- 53

                  缩放----------------------------------------55

            基本事件响应----------------------------------- 55

                  注册基本事件响应 ---------------------------55

                  注销基本事件响应----------------------------57

       使用矩阵------------------------------------------- 58

             转换矩阵--------------------------------------- 58

             使用转换矩阵----------------------------------- 58

       拖放功能------------------------------------------- 60

             Element.drag() 方法 ---------------------------60

             onstart事件----------------------------------- 60

             onend事件------------------------------------ 60

             onmove事件---------------------------------- 60

                   拖动的例子-------------------------------- 61

        丢下元素------------------------------------------ 62

              边界框覆盖 -----------------------------------62

              边界框中的边界框 -----------------------------63

        小结--------------------------------------------- 64

第五章: 向量动画--------------------------------------- 65

           基本动画 ---------------------------------------66

      变换路径------------------------------------------ 67

      缓动类型 ------------------------------------------70

            内建的缓动算法规则 ----------------------------70

            使用三次贝塞尔公式的缓动 ----------------------71

       动画转换 ------------------------------------------72

       动画常用属性-------------------------------------- 73

             常用属性 --------------------------------------73

             随着一个长路径动画-----------------------------76

                  动画的暂停和重新开始-----------------------78

      小结------------------------------------------------79

第六章: 使用已经存在的SVG文件--------------------------81

      Inkscape ------------------------------------------82

           下载Inkscape-----------------------------------82

           开始使用Inkscape-------------------------------82

       检查path------------------------------------------87

             Inkscape的XML编辑器-------------------------87

             从存在的SVG图片中提取path-------------------89

       SVG转换到raphael对象的工具-----------------------90

             Ready Set Raphael ---------------------------90

             其它转换工具 ----------------------------------91

       等值域图 ------------------------------------------92

             创建等值域图 ----------------------------------92

             开源SVG文件---------------------------------- 96

       小结-----------------------------------------------96

第七章: 创建一个可视化社交媒体--------------------------97

      社交媒体应用--------------------------------------- 97

           开始--------------------------------------------98

           使用JQeury-------------------------------------99

           系统可用数据------------------------------------99

           绘制人型图表-----------------------------------100

           图表点击响应-----------------------------------101

           绘制一把钥匙-----------------------------------102

      随时间发布消息-------------------------------------103

            开始-------------------------------------------104

            推送的数据-------------------------------------104

（第七章这里有些专业术语，我在没读到这里之前，暂时不能获得准确的意思，抱歉，翻译到这里的时候讲把这里补充一下。）

 

     我们从正文第一章开始讲。

Web图形

     在当前浏览器的领域，图形的绘制是非常重要的。从图表到简单图片，从数学到视觉艺术，哪里都需要图形的绘制。所以浏览器对于这块功能的需求大增。所以以此衍生了很多相关技术。不止VML和SVG，HTML5 Canvas和WebGL.每个都有它们适用的领域，VML和SVG处理2D矢量图，HTML5Canvas的位图绘制以及WebGL的3D绘制渲染。

     本书讲述一个开源和轻量级的JS库，Raphael，它使用SVG和VML在浏览器中绘制矢量图形。 它提供了很多非常方便的用户绘制和变换矢量图的方法，在支持直接操作DOM的同时还支持导入位图以及文本的绘制。它就是SVG和VML的优秀合体。一位内它已经将底层封装完善，我们在使用时不需要去考虑SVG和VML的方面问题，只要集中精力搞好我们的Raphael就可以了。

     VML是微软设计并且在1998年提交给W3C，基于XML技术的在IE版本5+后绘制矢量图形。SVG使用W3C组织在2001自己推出的适量绘制图形技术。也是基于XML的文件组织，但是它适用于所有主流浏览器。IE在9以后的版本也开始支持SVG。

矢量图形绘制包

现在有很多比较成熟可用的矢量图形绘制JS包。除了RaphaelJS，还有两个非常流行的矢量图形绘制工具包，Paper.js和D3.js,每个都有它们各种优缺点。下面有一个简单的比较：

包名称          IE6,7,8支持            开箱即用（个人理解是开源）   低层次包（意味着你可以操作的空间更大）

Raphael           Yes                        Yes                                   Yes

D3.js               No                         No                                     No

Paper.js           No                         No                                     No

Raphael是为一个支持VML的矢量图形绘制包，其余的包都支持SVG，但是由于是高级包，在使用虽然可能简单一些，但是你操作性大减。当我们可以直接对底层内容进行操作时，你会发现我们可以做的事情要远比其它的多，当然代价就是学习周期长，难度大（实话说，如果你只是做比较普通的功能，Raphael还是非常简单的，但是对于复杂的操作有些引擎操作需要自己去实现，还是有难度的）。

 SVG说明

SVG是当今Web应用最广泛的矢量图形绘制技术。所有主流浏览器都提供了全方位的支持，甚至最新的手机浏览器都已经加入对SVG的支持。

SVG是基于XML的，就是标签对格式的。比如我们要画从坐标(50，50)的点画一个黑色实心线段到点(10,10)可以用下面的代码：

除了路径path之外，SVG还支持图形绘制、文本、填充、渐变、动画以及用户绑定的事件响应。你可以在http://raphaeljsvectorgraphics.com/the-graphical-web/raw-svg/网站上查看一些SVG的例子。

Raphael基本XML语言，所以这本书看完后，你会非常熟悉一些SVG的语法，特别是和path有关的。

使用Raphael而不要直接使用SVG

撇开浏览器支持不说，有一个非常好的原因让我们使用Raphael而不是直接写原生态的SVG，因为它让矢量绘制简单更多。举个例子，我门要画一个矩形并且让它的宽度从50px动画变成100px。原生态的SVG代码：

     

               attributeName="width"

               to="100"

               fill="freeze"

               dur="1s" />

我们在(10,10)坐标位置开始画一个宽50px，高30px的矩形也就是标签，然后需要在内部、嵌入一个标签，然后在animate标签里面，并且进行说明哪里要变、怎么变。还要有fill="freeze"来保持变换的形状，否则会被重置。这样看上去代码冗长而且不易操作。但是我们使用Raphael的话，只需要：

var rect = paper.rect(10, 10, 50, 30);

rect.animate({

      width: 100

      }, 1000);

我们的矩形创建和动画变动都更加简洁，而且如果你要变动的内容更多，那就对比更明显。另外Raphael可以很好与其它包整合，比如jQeury，这归功于Raphael声明一个全局的变量Raphael。

Raphael的应用

Raphael现在已经广泛应用在从地图制图Town Hall @ the White House event(http://askobama.twitter.com/)到网络小游戏比如Ebocs(http://www.dejapong.com/ebocs/).

Raphael特别适用于制图方面，因为RaphaelJS库为我们提供了直接操作DOM元素的能力并且我们还可以随意缩放而不担心图片的失真。你可以在http://raphaeljs.com/australia.html 找到一些很好的例子。

（接下来讲的内容是如何下载RaphaelJS并且搭建起来环境，我们在第一篇博文里面已经有说明大家可以去看那个，这里不再赘述。地址：http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter.html）。还有大家搭建项目的时候要规划好，特别是文件夹以及路径要管理规范。

 

第二章 使用Raphael绘制基本图形

      Raphael提供了图形绘制的基本元素：形状、图片和文本。图形有预定义的矩形、圆形、椭圆以及组合图形等。图形和文本是可以填充的。变框的填充只能是单色但是可以修改。填充可以是线性也可以是渐变的。

      绘制环境

      要绘制图形，我们需要一个绘制的环境。我们需要创建一个空间供我们去绘制和储存。就像艺术家一样，我们需要一个画布。浏览器的视口，就是我们的画布。SVG标准把视口认为是绘制区域自己，我们一般认为浏览器区域就是视口了。我们利用Raphael去创建画布的代码如下：

     var paper= Raphael(50,100,500,300);

它的效果如下：

 如上图所示，我们在视口的区域，离左上角x轴（横轴）50px，y轴（竖轴）100px的位置开始创建一个宽500，高300的矩形框，这就是我们的画布。也就是说，paper对象，就是我们的画布。我们更推荐，我们利用已经存在的dom元素来建立画布而不是直接利用视口。在这种情况下，我们的画布的位置就是相对DOM元素的位置来讲的：

我们可以根据如下代码来建立画布：

var paper=Raphael("my-canvas",500,300);

也就是我们根据一个DOM的id去建立画布。当然直接用Id也可以，获得DOM对象也可以：

Raphael(document.getElementById("my-canvas"),500,300);

画布坐标系

      我们可以根据下面的插图来理解画布的坐标系：

看图我们可以发现，坐标系原点在画布的左上角。（0,0）开始，x轴为从左到右，y轴为从上到下。另外如果出现负值，则位置如下：

这里是比较好理解的，但是需要注意的是，在负值的区域是不可见的：

Hidden:隐藏；Visible：可见的。

坐标系弄清楚以后，我们就可以开始绘制我们的图形了。

绘制基本图形

      Raphael提供了矩形、圆形、椭圆的作为基本图形的预定义绘制方法。我们创建的画布对象可以调用这些方法。Rect矩形的绘制语法：

Paper.rect(x,y,width,height,[r]);

我们可以看到paper.rect共有5个参数，其中前4个为必须参数，第五个为可选参数。前两个，x,y 其实参照我们创建画布就可以理解，这里的x,y是在画布坐标系的(x,y)位置开始绘制，绘制一个宽度为第三个参数width、高度为第四个参数height的矩形。如果第5个参数设置并且大于0，则为圆角矩形。[r]以为圆角的半径。代码示例将在下面贴出。我们先讲解圆形和椭圆。圆形的绘制语法：

Paper.circle(x,y,r);

在(x,y)位置绘制一个半径为r的的圆。椭圆的语法：

Paper.ellipse(x,y,x-radius,y-radius);

在(x,y)位置绘制一个横向半径为x-radius，竖向半径y-radius的椭圆。代码如下：

DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Raphael Testtitle>    head>    <body>        <div id="my-canvas" style="padding:0px;margin:0px;border:solid;">        div>                        <script type="text/javascript" src="../js/lib/raphael.js">        script>        <script type="text/javascript">            //在my-canvas节点上面创建画布            var paper = Raphael("my-canvas", 500, 300);            //在(20,20)位置创建一个宽100，高60的直角矩形            var rect = paper.rect(20, 20, 100, 60);            //在(140,20)位置创建一个宽100，高60，圆角半径10的圆角矩形            var rectR = paper.rect(160, 20, 100, 60, 10);            //在(50,150)位置绘制一个半径为40的圆形            var cir = paper.circle(50, 150, 40);            //在(150,150)绘制一个横向半径50，竖向半径35的椭圆            var ellipse = paper.ellipse(150, 150, 50, 35);            //位置提示            var tip = paper.text(5, 20, "(10,20)");            var tipR = paper.text(145, 20, "(160,20)");            var tipC = paper.text(50, 150, "(100,50)");            var tipE = paper.text(150, 150, "(100,140)");        script>    body>html>

 

效果图如下：

如上图，我们在代码中有每个图形的详细解释，这里不多解释，大家可以阅读代码中的注释。这里再引用原书的椭圆图形加深理解：

 导入图片

       Raphael允许我们导入位图至画布中。语法如下：

paper.image("a.png",50,50,200,200);

意味着我们在(50,50)的位置导入一个图片，图片被缩放到长200，宽200.图片的路径和名字为："a.png"。我们在上面的那段代码中加入：

//导入图片var agirl=paper.image("../images/mm.jpg",300,100,200,300);

 效果如下：

接下来我们继续介绍每个我们创建的元素自带的属性。

元素属性

      我们绘制的图形都可以有填充、边框属性以及其它的很多属性。我们创建图形的时候，每个方法返回一个图形对象，而这些对象就可以去赋予我们想要的属性。这些对象都有一个attr()方法，里面参数为键值对（json），键为元素属性名称，值为属性取值。

填充

     我们首先介绍填充属性。填充可以是基本填充或者图形填充。基本填充我们使用颜色去填充一个形状，颜色的格式可以是#rrggbb、简写#rgb、rgb(r,g,b)甚至是颜色的英文单词red、green等。我们在前面那段代码中添加如下代码测试：

  rect.attr({     fill: "#000"   });  rectR.attr({      fill:"rgb(0,0,0)"    });  cir.attr({      fill: "green"     });  ellipse.attr({      fill: "url(../images/mm.jpg)"    });

 效果图如下：

不过我们使用位图填充椭圆的时候，由于椭圆太小我们这里只有原位图的右上角被填充到了椭圆中。这里大家理解就好啦。

处理笔画（边框）

      元素的笔画有很多属性，最常用的是颜色和宽度。属性的键名就是"stroke","stroke-width"。因此，我们把刚才代码中添加几行新的代码：

var newcir = paper.circle(50, 250, 40);            newcir.attr({                fill: "green",                stroke: "red",                'stroke-width': "10"            });

我们可以通过比叫两个圆的不同来看到stroke笔画设置的不同。这里需要知道的是，我们代码里面的笔画宽度是10，其实这个10有一半也就是5是在图形内部，而剩余的则是在图形的外面。也就是在你设置的笔画宽度的中间是图形的真是大小（准确的说，是你期望的图形大小）。其实，即便我们不设置笔画属性，我们所绘制的所有图形都有自带的笔画属性，他们的宽度是1px。如果你确实不想设置笔画属性，那么你需要显式地设置stroke-width:none。当然还有其它一些stroke属性这里没有提及，大家如果想了解可以到RaphaelJS的官方网站去查阅资料。

其它属性

      herf

      元素上面添加一个链接，允许这个dom元素扮演一个超链接的角色。当点击这个图形时，它将打开一个新的链接。（为了演示方便，我们另起一份代码，刚才的代码内容已经比较繁杂）。代码：

 var paper = Raphael("my-canvas", 500, 400);            var rect = paper.rect(30, 30, 140, 140);            rect.attr({                fill: "green",                href: "http://www.baidu.com"            });

原书上讲，这里将创建一个表现为超链接的矩形。但是我实际测试中点击并没有作用，这里我还需要找找问题。我们暂时记下来，继续往下走。

      透明度

      元素透明度键名opacity,取值范围为0（完全不透明）到1（完全透明），也可以分别设置stroke-opacity和fill-opacity。我们前面说过，stroke是以中心来还，一半在外，一半在内。这里就会出现副作用，因为可以分别设置透明度而导致分开设置透明度会有一些限制。这里我们不再贴代码，原书的例子很好，我就直接贴出来了：

 矩形切割

       Raphael支持通过clip-rect属性来进行元素的矩形切割，它允许我们将图形切割出一部分下来。我们可以按照下面的代码来进行图形区域切割：

 var paper = Raphael("my-canvas", 500, 400);            var circle = paper.circle(100, 100, 80);            //原书是在attr里面直接加入了'clip-rect'属性，将圆的1/4切割下来，我们分开两步加入动画，以便理解。这里最终达到的效果与原书一致            circle.attr({                fill: "pink",                'stroke-width': 0,            });            circle.animate({                'clip-rect': '20,20,80,80'            }, 2000,'easeIn');

大家将这段代码替换上面那大段代码的js部分就可以看到效果了。效果如下：

2秒后：

clip-rect属性的4个参数与矩形创建是一致的，x,y坐标开始宽、高定制的矩形。原书辅助解释的图：

虚线圆就是我们创建的circle对象，粉红色的部分就是设置该属性后剩余的部分。

渐变

     Raphael支持线性和梯度渐变去填充图形，要达到这个效果，而不是直接用一个颜色的字符串去设置fill属性。我们需要指定了下面这种字符串的格式去做到线性渐变：

            -[-[:]]*-

下面的语法就是达到径向渐变的效果：

      r[(,)][-[:]]*-

好吧，我承认我也没看懂。我们来看例子帮助我这智五渣理解一下。

线性渐变

      最基本的线性渐变的格式：

            --

比如：

       var rect=paper.rect(20,20,160,160);

       rect.attr({

               'stroke-width':0,

               fill:'0-#f00-#000'

             })

我们去实验一下：

            var paper = Raphael("my-canvas", 500, 400);            var rect = paper.rect(50, 50, 100, 100);            var rect1 = paper.rect(200, 50, 100, 100);            var rect2 = paper.rect(350, 50, 100, 100);            rect.attr({                'stroke-width': 0,                fill: '0-#f00-#000'            });            rect1.attr({                'stroke-width': 0,                fill: '90-#f00-#000'            });            rect2.attr({                'stroke-width': 0,                fill: '45-#f00-#000'            })

 还是把这段复制到js部分就可以了，我们的运行效果图：

3个矩形，我们分别按照0度角、90度角、45度角实现从红色到黑色的渐变。嘿嘿，似乎上面那段奇怪的代码也不怎么难嘛。

     注意，我们的角度计算是从x轴正方向沿逆时针方向来定义角度（--这句话其实就是说角度和我们脑子里的原始想法一致，不要去纠结其它）。

     线性渐变可以有任意个数的颜色和这些颜色组成线性渐变的点，定义为offsets 。也就是有了下面的语法结构：

           [-[:]]*

在这里，任何个数的-color:offset组合可以用来创建。比如，我们使用下面的string来看看：

      fill:"0-#00a9e0-#323490:20-#ea1688:40-#eb2e2e:60-#fde92d:80-#009e54"

我们用上面那行字符串可以建立一个彩虹样式的矩形，每个颜色相比前一个颜色多占据20%。下面的字符串可以达到相同效果：

      "0-#00a9e0-#323490-#ea1688-#eb2e2e-#fde92d-#009e54"

这里只要把字符串贴到上面我们js代码的fill属性就行了，就不再截图举例了。

径向渐变

      径向渐变与线性渐变相似，但是径向渐变绘制的时候是放射式的，从一个点开始（默认图形的中心点），最基本的径向渐变的语法：

      r-

      比如，我们在代码里面加入：

    var paper = Raphael("my-canvas", 500, 400);            var circle = paper.circle(150, 150, 100);            circle.attr({                'stroke-width': 0,                fill: 'r#f00-000'            })

 

我们可以得到：

 

我们得到一个从中心为红色渐变到边缘为黑色的圆形。根据我们上面线性渐变的描述，我们根据offsets属性去“分段”定义颜色渐变，我们试验一下径向渐变的offsets效果：

  circle.attr({                'stroke-width': 0,                fill: 'r#f00-000:80-#f00'            })

我们把上面的circle对象attr方法修改为上面的这句，效果如下：

 呶？看出来区别了吧。那么估计有童鞋要问了，我不想从中心点开始画啊，我想随意的点，记得前面语法出现的fx和fy吗，它们就是来做这个的。这里我就不详细举代码例子了，袁术的配图真是不错，一看就可以明白：

我们发现我在r命令后面的括号里面添加好fx和fy的值，可以获得不同效果。fx和fy很容易能看出来取值范围为[0,1]，其实就是中心点在图形的x和y最大值的比例位置。这里很容易理解，不多做解释了。

     最后，提一点，path对象是不能用径向渐变的。这是因为VML在这里有bug，所以这里的径向渐变只适用于基本图形。