[Java教程]快速上手RaphaelJS

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）是基于可扩展标记语言（
一个两头和三个字母的头疼事儿。
（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包。本人水平还低，原来将js引用都放置在前面head标签里面，这里暂时不深究，留待后续测试或者有大神读到这里可以指点一下，到底有没有必要把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。没接触过的，建议去翻阅一下资料。比

语法如下：

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”。在这种情况下，路径将平滑连接到它的起点。

上面这个表是我从RaphaelJS的中文指南上拿过来的。因为后面几个曲线我也尚未用过，不能说自己理解了。

语法如下：

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。由于本人美术天赋实在是愧对老天，而且inkscape也是刚开始用，下面的讲解的举例还是需要大家多多海涵。