Raphael Js矢量库API简介：

Raphael Js矢量库API简介：
Raphael Javascript 是一个 Javascript的矢量库。

2010年6月15日，著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch，以及SVG、VML处理库Raphael合并，形成新的库Sencha。主要应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。

Raphael Javascript 的创始人 Dmitry Baranovskiy也加入ExtJS。

ExtJS 是一个强大的Javascript 框架，它重组件化，很容易做出强大的、可媲美客户端的界面（这个框架是收费的，所以国内用的人比jQuery少多了）。

jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。

 

Raphael Javascript 的作者就是大名鼎鼎的前端大牛 Dmitry Baranovskiy。

他出过几道有意思的 Javascript 题目：《你真的已经搞懂JavaScript了吗？》

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

同时它是跨浏览器的，完全支持 Internet Explorer 6.0+。
Raphael Javascript 目前支持的浏览器有：
Firefox 3.0+
Chrome 3.0+
Safari 3.0+
Opera 9.5+
Internet Explorer 6.0+
PS：新版本的遨游、QQ浏览器、TT浏览器（已经被腾讯放弃了）、猎豹浏览器、360浏览器 的内核都是 webkit（ Chrome 就是Webkit ），至于别的国产浏览器，都是在Internet Explorer 外面嵌套了一层壳而已

-----------------------------------------------------------
简而言之： Raphael是一个强大易用的矢量图形JS库

------------------------- 动画 -------------------------

>> 动画 Animation ~~~动画对象的方法调用
> Animation.delay(t); 创建现有的动画对象的副本，并且可以指定延迟时间。
参数
t:number 动画延迟执行的时间，单位：毫秒ms
返回
新的动画对象
例子：
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); //调用静态方法animation创建一个动画对象 2秒内 圆心坐标移动到位置(10,20)处
var paper = Raphael(100, 100, 300, 400); //在页面位置(100,100)处，创建300*400大小的画布
//在画布位置(40, 40)处画一个半径50的圆, 并填充红色 Raphael的语法和jq十分类似，同样支持链式调用风格
var circle = paper.circle(40, 40, 50).attr("fill","red");
circle.animate(anim); //立即执行动画
circle.animate(anim.delay(500)); // 延时500毫秒执行动画

> Animation.repeat(n); 创建现有动画对象的副本，并指定重复频率。
参数
n:number 动画迭代次数。如果传入 0，表示动画会一直执行
返回
新的动画对象
例子
circle.animate(anim.repeat(2));
circle.animate(anim.delay(500).repeat(2)); //链式调用

~~~所有Element的方法默认都返回元素自身，以便链式调用。
> Element.animate(...); 为指定元素创建动画，并执行。
参数：
params:object 元素的最终属性，请参照：Element.attr
ms:number 动画持续时间，单位：毫秒ms
easing:string 缓动类型。接受Raphael.easing_formulas其中之一，或CSS格式：cubic-bezier(XX, XX, XX, XX)
callback:fn 回调函数。动画结束时将被调用。
或
animation:object 动画对象，请参照：Raphael.animation

返回
原始元素

> Element.animateWith(...); 作用与 Element.animate 类似，但保证动画与另一元素的同步执行。 ~~参数中需额外指定需要同步动画的原速度
参数
el:object 要同步的元素
anim: object 要同步的动画
params:
ms:
easing:
callback:
或
el:
anim:
animation:
返回
原始元素

> Element.pause([anim]) 暂停执行动画，稍后可以恢复执行。

> Element.resume([anim]);

> Element.setTime(anim, value) ~~~设置元素动画跳到指定时间点
以毫秒为单位给元素设置动画的状态。类似Element.status方法。
参数
anim object 动画对象
value number 动画持续的毫秒数
返回：object如果value被指定则返回原始元素

请注意，在动画过程中会触发下列事件：在每个动画帧anim.frame.<id> ，在开始时anim.start.<id>结束时anim.finish.<id> 。

> Element.status([anim], [value]);获取或设置元素的动画状态。
* Element.status(anim, value); value取值 0 - 1。如果指定，方法就像一个setter，并设置指定动画的状态为指定值。这将导致动画跳转到指定位置。
* Element.status() 返回{ anima:.., status:..}
* Element.status(value);

> Element.stop([anim]); 停止执行动画。

------------------------- 元素属性attr -------------------------

> Element.attr(...); 设置或读取元素的属性。类似 jQuery.fn.attr();
Element.attr(attrName,value);
Element.attr({attr1:v1, attr2:v2});

Element.attr(attrName);
Element.attr(attrNames); 参数为attrNames数组 则返回指定属性名的当前值组成的数组

Elment.attr(); //返回属性对象
元素的属性有以下这些：（ 请参阅解释这些参数的SVG规范 。）
~~~ 位置大小
height: number 高度
width: number
x : number
y: number
r : number 圆、椭圆或圆角矩形的半径
cx : number 圆或椭圆的圆心的x轴坐标
cy : number 圆或椭圆的圆心的y轴坐标
rx : number 椭圆的横向半径
ry: number 椭圆的垂直半径

~~~ 背景描边透明度等
opacity : number 透明度
fill: string 填充。颜色、渐变或图像
fill-opacity: number 填充不透明度
stroke ： string 笔触颜色
stroke-width : number 笔触宽度（像素，默认为1）
stroke-opacity: number

stroke-dasharray ： string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap ： string [“butt”, “square”, “round”]
stroke-linejoin : string [“bevel”, “round”, “miter”]
stroke-miterlimit : number

~~~ 图象文本超链接等
text : string 文本元素的内容。使用\n换行
text-anchor : string [“start”, “middle”, “end”]，默认为 “middle”

title : string 工具提示内容
src ； string 图像的URL，只适用于Element.image元素

href : string URL。指定时，元素表现为超链接
target : string 与 href 一起使用

cursor : string 光标css类型
paths: tring SVG的路径字符串格式
transform : string 请参照：Element.transform

~~~ 字体以及其他属性
font : string 文本特性
font-family : string 字体
font-size : number 字体大小（像素）
font-weight: string 字体粗细

arrow-end : string 路径的末尾显示箭头。
clip-rect : string 剪贴矩形。逗号或空格分隔的值：x，y，宽度和高度

>> 线性渐变和径向渐变
> 线性渐变值的格式 <angle>-<color>-[<color>[:<offset>]]*-<color>
el.attr({"fill": "90-#fff-#000"}); //90°线性渐变从白色到黑色；
el.attr({"fill": "0-#fff-#f00:20-#000"}); //0°从白色通过红色（20％位置）渐变为黑色。

> 径向渐变值的格式 ： r[(<fx>, <fy>)]<color>[-<color>[:<offset>]]*-<color>
~~~跟线性渐变值格式基本相同 只不过是角度变为可选的渐变起点
径向渐变只适用于圆形和椭圆形。
circle.attr({"fill": "r#fff-#000"}); //从白色到黑色；
circle.attr({"fill": "r(0.25, 0.75)#f00-#000"}); //从白色渐变到黑色，焦点在0.25，0.75。焦点坐标的外围是0 .. 1。

颜色解析
颜色名称： red,green...等
十六进制颜色值：#fc00, #fad0ea
颜色函数：
rgb(), hsb(), hsl(),三种色彩模式的函数，参数值为整数或百分比
rgba(), hsba(), hsla() 都支持透明度
例子:
rgb(200,200,10) , rgb(100%,10%,20%)
rgba(200,200,3, .5), rgba(100%, 20%, 10%, 50%)
hsb(0.5, 0.25, 1), hsb(50%, 20%, 100%)
hsba()

------------------------- 事件 -------------------------
> Element.click(handler); //handler内部 this指向元素自身，注意在这里元素和节点是不同的，它们的关系类似jQuery对象和封装的dom对象

> Element.dblclick(handler);

> Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext]);
onmove:fn 移动处理函数 函数内部可获得 dx dy x y event (位移距离deltaX deltaY 鼠标坐标 dom事件对象)
onstart:fn 拖拽开始的处理函数 函数内部可获得 x y event (鼠标坐标和dom事件对象)
onend: fn 拖拽结束处理函数 函数内部可获得 event (dom事件对象)
mcontext : object 移动处理函数环境（上下文）
scontext : object 拖拽开始处理函数环境
econtext : object 拖拽结束处理函数环境

> Element.hover(fn_in, fn_out, [icontext], [ocontext]); ~~~同 jq hover，icontext ocontext指定方法体内的上下文

> Element.mousedown(handler);

> Element.mousemove(handler);

> Element.mouseup(handler);

> Element.mouseout(handler);

> Element.mouseover(handler);

> Element.onDragOver(handler) 为元素分配drag.over.<id>事件处理程序的快捷方式，其中id是元素的id
handler 传入的第一个参数是你拖拽的元素

~~~~~ Raphael支持触屏事件

> Element.touchstart(handler)

> Elment.touchmove(handler)

> Element.touchend(handler);

> Element.touchcancel(handler);

~~~~~取消事件绑定 在原函数前加un...
> Element.unclick(handler) undblclick unhover unmousemove untouchstart untouchmove ....

> eve(name, scope, varArgs); ~~~触发事件 name 事件名称，点（.）或斜线（/）分隔; varArgs 将被发送到事件处理程序其余的参数
使用指定的name、作用域和参数触发事件。

> eve.listeners(name); 内部方法，返回监听指定name事件的回调函数组成的数组。

> eve.nt([subname]);
在事件处理程序内使用，可以获取事件的实际名称。
参数
subnamestring
事件的子名称
返回：string名称的事件，如果没有指定subname
或
返回：booleantrue ，如果当前事件的名称中包含subname

> eve.off(name, f); 从指定名称的事件监听器列表中删除指定的函数。

> eve.unbind(name, f) ~~~同 eve.off(name, f);

> eve.on(name, f); 为给定的名称绑定一个事件处理程序。可以在名称中使用通配符“ * “：
返回 function 返回的函数接受一个数字参数，表示处理程序的z-index。这是一个可选功能，只有当你需要使用，以确保处理程序的一些子集被设置为特定的调用顺序，而不使用指派顺序。
例子：
eve.on('*.under.*',f);
eve("mouse.under.floor"); //触发f

eve.on("mouse",eat)(2);
eve.on("mouse",scream);
eve.on("mouse", catch)(1);
这将确保catch函数将被在eat 之前调用。如果你想要把你的处理程序放在未索引的处理程序之前，指定一个负值。注：我假设大部分的时间你不需要担心的z-index，但很高兴有此功能来“以防万一”

> eve.once(name, f); 为给定的名称绑定一个一次性事件处理程序。只运行一次，然后解除本身。
返回 function ，与eve.on返回的函数类似
eve.once("login", f);
eve("login"); //触发f
eve("login"); //没有监听 不会触发f

> eve.stop(); 用于在事件处理程序内停止事件，防止触发任何后续监听器。

> eve.version(); 返回当前库的版本。
------------------------- 元素操作 -------------------------
> Element.clone(); //复制元素，画布源元素位置有个一样的副本

> Element.remove(); ~~~从画布删除元素

> Element.id 元素的唯一的ID。当你要监听元素的事件时尤其有用。因为所有的事件被以下面的格式触发：<module>.<action>.<id> 。对Paper.getById方法也有用。 ~~~元素在画布中的id?

> Element.insertAfter()

> Element.insertBefore()

> Element.isPointInside(x, y); 确定指定点在当前元素的形状内

> Element.matrix 矩阵对象，它代表元素的变换

> Element.next 返回层次结构中的下一个元素的引用。 ~~~下一个同辈元素?

> Element.prev

> Element.toBack(); 将元素向下移动。 ~~堆叠层次?

>Element.toFront();

> Element.node 返回DOM对象的引用。 ~~~类似 jQuery对象包装着dom对象，不同的是 jQuery对象默认是包装一组dom对象，而Raphael元素默认包装一个dom对象 Elenent.node.onclick = function(){ .. } 类似html Dom对象
circle.node.onclick = function(){ c.attr('fill', 'red')};

> Elment.paper 返回绘制对象的“画布”的内部引用。主要用于插件和元素扩展。
例子：
Raphael.el.cross = function(){ //Raphael.el 类似 Raphael构造函数的原型对象
this.attr({fill: 'red'});
this.paper.path('M10,10L50,50M50,10L10,50')
.attr({stroke: 'red'});
};

> Element.raphael Raphael对象的内部引用。即使它目前不可用。 ~~~对构造函数Raphael的引用?
例子：
Raphael.el.red = function(){
var hsb = this.paper.raphael.rgb2hsb(this.attr('fill'));
hsb.h = 1;
this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex });
}

>Element.getSubpath(from, to); //获取指定路径上指定长度的子路径。只适用于“路径”类型的元素。
~~~返回子路径的路径字符串

>Eelement.getTotalLength(); 返回路径的长度，以像素为单位。只适用于“路径”类型的元素。

> Element.glow([options]) 为指定元素添加类似光晕的效果，返回创建的光晕元素组。请参照：Paper.set.
注：光晕不与元素关联。如果你改变元素的属性，它并不会自我调整。
options={
width: number 光晕大小 默认10
fill: boolean 是否填充 默认false
opacity: number 透明度 默认 0.5
offsetx: number 横向偏移 0
offsety: number 垂直偏移 0
color: string 发光颜色 默认black
}

> Element.hide(); ~~ 隐藏元素 对应的方法 Element.show()

>

------------------------- 画布对象 -------------------------

> Paper.add(json); 导入JSON格式的元素。格式：{type: type, <attributes>}
例子：
var paper = Raphael(100, 100, 300, 400);
paper.add([
{type:"circle", cx:10, cy:10, r:5},
{type:"rect", x:10, y:10, width:100, height:100, fill:'green'}
]);

> Paper.bottom 指向画布上的底层元素

> Paper.top 指向画布上的顶端元素

> Paper.ca Paper.customAttributes的引用 ~~~自定义属性的引用

~~~~ 画布上绘图相关
> Paper.circle(x,y,r); ~~~圆心坐标x,y 半径
例子：
var paper = Raphael('test', 400, 400);
var c = paper.circle(100, 100, 50);

> Paper.rect(x, y, width, height, [r]) ; ~~~左上角坐标x,y 宽高 圆角半径

> Paper.ellipse(x, y, rx, ry); ~~~椭圆中心的坐标x,y 长短半径

> Paper.image(src, x, y, width, height); 在画布中插入一张图片
例子：
var p = Raphael('test2', 300, 300);
p.image('1.jpg', 20, 20, 100, 300);

> Paper.text(x, y, text); ~~~坐标x,y 处 text文字内容 返回 Raphael元素对象，类型为“文本”
绘制一个文本字符串。如果你需要换行，使用“\n”。
例子：
var t = paper.text(50, 50, 'welcome new day');
t.attr({'font-size':30, fill:'blue'});

> paper.path([pathString]); 由指定的路径字符串创建一个路径元素。
路径字符串由一个或多个命令组成。每个命令以一个字母开始，随后是逗号（“,”）分隔的参数。例如："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.print(x, y, string, font, [size], [origin], [letter_spacing])⚓➭
创建路径，表示指定字体，指定大小，在指定位置的指定文本。该方法的结果是路径元素，它包含整个文本作为一个单独的路径。

> Paper.clear(); // 清除画布上所有元素。

> Paper.customAttributes ~~~自定义属性对象 你可以添加自定义属性来方便设置一批属性：
例子：
var paper = Raphael(10,10, 300, 300);
paper.customAttributes.hue = function(){ //~~~ hue相当于一个 setter函数
num = num % 1;
return {fill: "hsb(" + num + ",0.8,1)"};
}

var c = paper.circle(10, 10, 10).attr({hue: .45}); //~~~指定setting函数和需传入的参数

// or like this
c.animate({hue: 1}, 1e3);

自定义属性(~~~本质上为setting函数) 也可以接受多个参数
paper.custromAttributes.hsb = function(h, s, b){
return {fill: "hsb(" + [h,s,b].join(',') + ")"};
}

c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1,0,0.3]}, 1e3); ~~~多参数时，参数以空格分隔字符串 或 数组元素的形式呈现

> Paper.forEach(callback, thisArg); thisArg为回调函数的上下文环境
为画布上每个元素执行指定函数，如果回调函数返回false则会停止循环。
例子：
var p = Raphael(20, 20, 300, 400);
p.forEach(function(el){
el.attr({stroke: 'blue'});
});

> Paper.getElementByPoint(x, y); ~~~提供相对于窗口的坐标x,y 返回位于该指定位置的最上层元素

> Paper.getElementsByPoint(x, y); 返回位于指定位置的所有元素集合 x,y是相对于窗口坐标

> Paper.getFont(family, [weight], [style], [stretch])⚓➭
根据指定的参数从注册字体中获取字体对象。您可以只指定字体名称中的一部分，像“Myriad”，“Myriad Pro”

> Paper.getById(id) 返回匹配指定id的元素

> Paper.remove(); 从DOM中删除画布

> Paper.renderfix()
修复Firefox和IE9的像素渲染的问题。如果画布依赖于其他元素，换行后，它可能会移动半像素导致线条失去细节。这个方法解决此问题。

> Paper.safari()
Safari（WebKit）有一个不方便的渲染错误：有时需要强制渲染。此方法对于处理此错误应该有帮助。

> Paper.set() ~~~创建元素集合 元素的方法都适用元素集合
创建类数组对象，保存和一次操作其中的多个元素。PS: 它不创建任何元素，只是分组已存在的元素。“集合”充当伪元素 - 所有元素可用的方法，都可以在集合上使用。
例子：
var paper = Raphael('test', 300, 300);
var set = paper.set();
set.push(
paper.circle(10, 10, 100);
paper.circle(40,40, 100);
);
set.attr({fill:'blue'}); //~~~隐式迭代

> Paper.setStart() ~~~群组元素
创建Paper.set 。调用此方法之后到调用Paper.setFinish方法之前创建的所有元素都会被添加到集合内。
例子：
paper.setStart();
paper.circle(10, 10, 100);
paper.circle(50, 50, 100);
var set = paper.setFinish();
set.attr({fill:'red'});

> Paper.setFinish()
请参照：Paper.setStart 。此方法结束捕获并返回元素集合。

> Paper.setSize(width, height); 改变画布尺寸

> Paper.setViewBox(x, y, w, h, fit) ~~~可视框(类似PHOTOSHOP导航器的红框，通过调整可视框的位置大小查看屏幕元素)的左上角坐标x,y 和宽高 fit逻辑值 是否想要图形适应新的边界框
设置画布的视框。实际上，你可以通过指定新的边界来缩放和平移整个画布。

------------------------- 数据缓存 -------------------------
> Element.data(key, [value]); 添加或检索与给定的键关联的值。请参照：Element.removeData
~~~ 类似jQuery.fn.data()方法，保存或读取数据
例子：
for(var i=0; i<5; i++){
var paper = Raphael('sample1', 200, 200);//在id=sample1的元素上 创建画布
paper.circle(10+15*i, 10, 10)
.attr({"fill": "#000"})
.data("i",i);
.click(function(){
alert(this.data("i")); //事件处理函数内部 this指向元素自身
});
}

> Element.removeData([key]); 删除元素与指定键相关联的值。如果不提供关键，则删除元素中的所有数据。

------------------------- 元素位置大小变形 -------------------------
> Element.getBBox(isWithoutTransform); 返回指定元素的边界框
isWithoutTransform : boolean 如果你想得到变换之前的边界，使用true。默认值为 false。
返回 边界对象 { x:n, y:n, x2:n, y2:n, width:n, height:n} ~~~ 左上角坐标(x,y) 右下角坐标(x2,y2) 宽 高

> Element.getPointAtLength(length); 返回在指定路径上指定长度的坐标点。只适用于“路径”类型的元素。
返回 { x:n, y:n, alpha:切线的角度} ~~~返回路径上某点的坐标 和 切线角度

~~~~ 元素变形
> Element.rotate(deg, [cx], [cy]) 建议不要使用！使用Element.transform代替。围绕指定的点旋转指定角度。
指定角度 和 旋转中心(默认 形状中心)

> Element.scale(sx, sy, [cx], [cy]); 建议不要使用。使用Element.transform代替。为元素添加缩放。
水平缩放值 垂直缩放值 缩放中心 cx,cy

> Element.translate(dx, dy); 建议不要使用。使用Element.transform代替。为元素增加平移变换。 deltaX deltaY

>>> Element.transform([tstr]);
为元素增加变换，这是独立于其他属性的变换，即变换不改变矩形的x或y。变换字符串跟路径字符串的语法类似：
"t100,100r30,100,100s2,2,100,100r45s1.5"
每个字母是一个命令。有四个命令：t是平移，r是旋转，s是缩放，m是矩阵。

也有另类的“绝对”平移、旋转和缩放：T、R和S。他们不会考虑到以前的变换。例如：...T100,0总会横向移动元素100px，而...t100,0会垂直移动如果之前有r90。比较以下r90t100,0和r90T100,0的结果。~~~ t以元素自身的坐标方向做平移 T以画布的坐标方向做平移

所以，上面的例子可以读作“平移100,100；围绕100,100旋转30°；围绕100,100缩放两倍；围绕中心旋转45°；相对中心缩放1.5倍“。正如你可以看到旋转和缩放命令的原点坐标为可选参数，默认的是该元素的中心点。

m矩阵接受六个参数。

例子:
var rt = paper.rect(10, 20, 300, 200);
rt.transform('t100,100r45t-100,0'); //参照元素自身的坐标方向 平移100,100 旋转45度 平移-100,0
rt.transform('...t50,50'); // ... 表示在之前变换基础上 追加 ~~~...表示已经执行的变换效果
rt.transform('s2...'); //之前补充变换
rt.transform('t50,50...t-50,-50'); //同时 补充和追加变换效果
rt.transform(''); //重置变换 撤销所有的变换效果
console.log(rt.transform()); //返回变换字符串分割生成的二维数组

----------------------------- 矩阵 -----------------------------

> Matrix.add(a, b, c, d, e, f, matrix) 为现有矩阵增加一个矩阵。

> Matrix.clone();

> Matrix.invert(); 返回矩阵的反转版本

> Matrix.rotate(a, x, y); 旋转矩阵

> Matrix.scale(x, [y], [cx], [cy]);

> Matrix.split(); 将矩阵分割成简单的变换
返回 对象
{
dx: number 水平平移
dy: number 垂直平移y
scalex: number 水平缩放
scaley number 垂直缩放
shear number 剪切
rotate number 旋转角度
isSimple boolean 是否可以简单变换代替
}

> Matrix.toTransformString(); 返回转换字符串

> Matrix.translate(x, y); 平移矩阵

> Matrix.x(x, y); 返回给定点在经过变换之后的x坐标。请参照：Matrix.y

> Matrix.y(x, y);

------------------------ Raphael构造函数对象 -------------------------
> Raphael(...); ~~~创建画布 用于绘图 你必须第一步就这么做，该实例将来调用的所有绘图方法都被绑定到这个画布。
Raphael(dom|id, width, height, callback) ; 在指定的html元素里创建画布 callback是创建完画布的回调函数 ，其上下文对象为新画布

Raphael(x, y, width, height, callback); 在页面指定的坐标x,y 处创建画布

Raphael( array, callback ) array前3个或4个数组元素对应 [containerID,width,height]或[x,y,width,height]。其余数组元素是元素描述{type:类型,<属性>}）。请参照：Paper.add 。 ~~~~这种方法可以创建画布的同时添加元素

Raphael( onReadyCallback ); DOM ready事件回调。你也可以使用eve的“DOMLoad”事件。在这种情况下该方法将返回undefined。
例子：
var p1 = Raphael(10, 50, 320, 200);
var p2 = Raphael('id', 320, 200); ~~// (注意：当节点有属性： dir="rtl"，会从右上角开始创建)
var p3 = Raphael(document.getElementById('id'), 320, 200);
var p4 = Raphael(["id", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);

> Raphael.angel(x1, y1, x2, y2, [x3], [y3]); 返回两个或三个点之间的角度 返回 角度: number

> Raphael.animation(params, ms, [easing], [callback])
创建一个动画对象可以传递给Element.animate或Element.animateWith方法。请参照：Animation.delay和Animation.repeat。

> Raphael.bezierBBox(…)
返回指定三次贝赛尔曲线的边界框

> Raphael.color(clr) 解析指定颜色字符串并返回包含全部值的颜色对象。{r:.., g:.., b:.., hex:.., error:.., h:.., s:.., v:...}

> Raphael.getColor([value]); value 为亮度值默认0.75 返回颜色的十六进制表示。
每次调用返回色谱中的下一个颜色。要重置回红色，调用Raphael.getColor.reset

> Raphael.getColor.reset()
复位色谱位置 Raphael.getColor

> Raphael.getRGB(color); 将颜色字符串解析为RGB对象 {r: ,g: ,b: ,hex: ,error:}

> Raphael.rgb(r, g, b); 将RGB值转换为十六进制颜色

> Raphael.rgb2hsb(r, g, b) 将RGB值转换为HSB对象。

> Raphael.rgb2hsl(r, g, b)将RGB值转换为HSL对象。

> Raphael.hsb(h, s, b); HSB值转换为十六进制颜色。

> Raphael.hsb2rgb(h, s, v); HSB值转换为RGB对象。

> Raphael.hsl(h, s, l); HSL值转换为十六进制颜色。

> Raphael.hsl2rgb(h, s, l); HSL值转换为RGB对象。

> Raphael.deg(deg); 弧度转角度

> Raphae.rad(deg); 角度转弧度

> Raphael.easing_formulas⚓➭
对象，其中包含动画过渡公式。你可以自己扩展。默认情况下，它含有以下过渡：

“linear”（线性）
“<”或“easeIn”或“ease-in” （由慢到快）
“>”或“easeOut”或“ease-out”（又快到慢）
“<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
“backIn”或“back-in”（开始时回弹）
“backOut”或“back-out”（结束时回弹）
“elastic”（橡皮筋）
“bounce”（弹跳）

> Raphael.el ~~~~Element.prototype的别名?
你可以给元素添加自己的方法。当你要修改默认功能或要在一个方法中包装一些常见的变换或属性，这很有用。与画布方法不同，你可以随时重新定义元素的方法。扩展元素的方法，不会影响元素集合。
例子：
Raphael.el.red = function(){
this.attr({fill:'red'});
}

paper.circle(100,100,200).red();

> Raphael.fn ~~~~Raphael.prototype的别名？paper是构造函数Raphael的实例
你可以为画布添加你自己的方法。例如：如果你想画一个饼图，可以创建自己的饼图函数然后作为Raphael插件。要这么做，你需要扩展Raphael.fn对象。您应该在Raphael实例被创建之前修改fn对象，否则将没有任何效果。请注意：Raphael2.0移除了为插件提供命名空间的功能。应该由插件确保命名空间负责保证适当的环境的安全。
例子：
Raphael.fn.arrow = function(x1, y1, x2, y2, size){
return this.path(...);
}
//创建命名空间
Raphael.fn.mystuff = {
arrow: function(){...},
star: function(){...}
}
var paper = Raphael(10, 10, 300,300);
paper.arrow(10, 10, 30, 30, 5).attr({fill: "green"});
paper.mystuff.arrow();
paper.mystuff.star();

> Raphael.format(token, …) ~~~ 类似printf()
简单的格式化功能。将“ {<number>} “结构替换为相应的参数。
var x = 10, y=20, width=40, height=50;
// 将会绘制一个矩形，它的效果等同于： "M10,20h40v50h-40z"
paper.path("M{0},{1}h{2}v{3}h{4}z", x, y, width, height, -width);

> Raphael.fullfill(token, json)
比Raphael.format更先进一点点的格式化功能。将“ {<name>} “结构替换为相应的参数。
例子：
//将会绘制一个矩形，它的效果等同于： "M10,20h40v50h-40z"
paper.path(Raphael.fullfill("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
x: 10,
y: 20,
dim: {
width: 40,
height: 50,
"negative width": -40
}
}));
> Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)
在给定的三次贝赛尔曲线上查找给定位置的点的坐标。

> Raphael.getPointAtLength(path, length); 返回位于路径上给定长度的点的坐标。点 {x: , y: , alpha: }

> Raphael.getSubpath(path, from, to); ~~~~静态功能函数方法化 path.getSubpath(from, to);
从指定路径获取一段子路径，指定起始和结束位置。返回子路径的路径字符串

> Raphael.getTotalLength(path); ~~~同上 静态功能函数方法化为 path.getTotalLength();
返回在指定路径的长度（像素）。

> Raphael.is(o, type); 代替typeof操作符。 ~~~数据类型判断

> Raphael.isBBoxIntersect(bbox1, bbox2); 返回true ，如果两个边界框相交

> Raphael.isPointInsideBBox(bbox, x, y); 返回true，如果给定的点在边界框内。

> Raphael.isPointInsidePath(path, x, y); 返回true，如果指定的点在给定的封闭路径内。

> Raphael.mapPath(path, matrix); 用指定矩阵变换路径

> Raphael.matrix(a,b,c,d,e,f); 用指定的参数生成矩阵

> Raphael.ninja() 返回：object Raphael对象 ~~~调用该方法后 全局环境中将没有Raphael这个构造函数。
如果你不想保留Raphael的痕迹（Raphael只创建一个全局变量Raphael），可使用ninja方法。请注意，在这种情况下，插件可能会停止工作，因为它们依赖全局变量的存在。

用法
(function (local_raphael) {
var paper = local_raphael(10, 10, 320, 200);
…
})(Raphael.ninja());

> Raphael.parsePathString(pathString); ~~~解析路径字符串 为一个路径段数组
将指定路径字符串解析成一个数组，其中的元素是路径段数组。

> Raphael.parseTransformString(TString); ~~~解析指定路径字符串为变换数组。

> Raphael.path2curve(pathString); 将指定路径转换为新路径，新路径的所有片段都是三次贝赛尔曲线。

> Raphael.pathBBox(path); 返回指定路径的边界框

> Raphael.pathIntersection(path1, path2); 查找两条路径的交点

> Raphael.pathToRelative(pathString); 将路径转换为相对形式 路径段数组组成的数组

> Raphael.registerFont(font)
给Raphael字体注册指定字体。应当作为Cufón字体文件的内部调用。返回原来的参数，所以它可以链式操作。

> Raphael.setWindow(newwin); 需要在<iframe>绘制时使用。切换窗口为iframe。newwin为新的窗口对象

> Raphael.snapTo(values, value, tolerance); 将给定值对齐到指定网格。

> Raphael.st ~~~Set.prototype的别名？ 给元素自定义方法后 最好也给集合定义一个相同方法以便直接在集合上隐式迭代
你可以为元素和集合添加自己的方法。为给元素添加的每个方法写一个集合方法是明智的，你就可以在集合上调用同样的方法。请参照：Raphael.el 。
例子：
Raphael.el.red = function(){
this.attr({fill: 'red'});
};
Raphael.st.red = function(){
this.forEach(function(el){ el.red(); });
};

paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();

> Raphael.svg ~~~检测浏览器是否支持svg 如果浏览器支持SVG则为true。

> Raphael.type ~~~返回Raphel用什么方式绘图 可以是“SVG”，“VML”或为空，依赖于浏览器的支持。

> Raphael.vml ~~~true，如果浏览器支持VML。ie支持vml chrome不支持

> Raphael.transformPath(path, transform); 返回指定路径经过指定变换后的路径

--------------------------- Set 集合 ----------------------------

> Set.clear(); 移除集合中的全部元素

> Set.exclude(element); 从集合中删除指定元素 返回true，如果对象存在并且 已经被删除

> Set.forEach(callback, thisArg) 为集合中的每个元素执行指定函数。如果函数返回false则停止循环运行。

> Set.pop(); ~~类似数组的方法 删除最后一个元素并返回它。

> Set.push(); 加入一个元素

> Set.splice(index, count, [insertion]); 从集合中插入/删除/替换指定元素

 

 

转载于:https://www.cnblogs.com/stephenykk/p/3553690.html