您的位置：首页 > Web前端

Raphaël Reference 中文帮助文档(API)

2014-11-04 16:25 537 查看
本人技术刚开始研究Raphael，对英文文档比较反感，好不容易在网友的博客（http://blog.csdn.net/yw1688/article/details/19338687）中看到Raphael中文文档，特此纪念一下。



关于 Raphael


Raphael是什么？

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了吗？》

英文原版官网：http://raphaeljs.com

英文原版文档：http://raphaeljs.com/reference.html


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 外面嵌套了一层壳而已


Demos

Raphaël
Playground

Reflection

Image
rotation

Text
rotation

GitHub-a-like
impact chart

GitHub-a-like
punch chart

GitHub-a-like
languages chart

Raphaël
Analytics chart

Polar
Clock

Dynamic
Spinner

Australian
Map

Multichart

Animation

Tiger

Hand

Interactive
Chart

Diagram

Custom Fonts

Animation
Easing

Gradients
Example

Curver

Animation
along the path demo

3D Shooter

Colour Picker

Growing
Pie

Bounce

World Map

小图标


关于本文翻译

前端工程师，王子墨

世上本没有路，走的人多了，也就成了路。---鲁迅

我们通常会记住创始者、发明者，比如哥伦布，乔布斯，他们的名字在人类历史中留下了很深的印记。

再如jQuery，Mootools以及那么多技术类发明者创造了很多有价值的东西。我们普通人或许一生都做不了什么大事，但是我们可以不断改变自己，做很多有意义的事情，造福于他人。

网页矢量图形处理的领域，一直很空白。而Raphaël 这个优秀的插件，在国内几乎没有名气，更谈不上会有中文帮助文档。但事实上，这是一个强大、易用的矢量图形Javascript 库，而且现在又ExtJS（收费前端库） 的支持，会让他不断更新，而且最重要的是它兼容低版本的Internet Explorer（IE）浏览器。很多优秀的、基于HTML5 的矢量图形Javascript处理库并不支持低版本的Internet Explorer（IE）浏览器。———— 大隐于市

最近我正在基于Raphaël Javascript 封装了一个新插件，设法去改变当今某个传统行业的竞争规则。

如果你也爱好音乐，或者执着于编程，加我QQ、一起交流。



莫等闲白了少年头。

活着，就要改变世界。

———— 王子墨 翻译于 2012/12/21 China ShenZhen


动画
Animation⚓


Animation.delay(delay)⚓➭

创建现有的动画对象的副本，并且可以指定延迟时间。

参数

delaynumber
动画延迟执行的时间，单位：毫秒ms

返回：object新的动画对象
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> anim<span class="s" style="color: rgb(231, 190, 97);"> = </span>Raphael.animation({cx: <span class="d" style="color: rgb(207, 106, 76);">10</span>, cy: <span class="d" style="color: rgb(207, 106, 76);">20</span>}, <span class="d" style="color: rgb(207, 106, 76);">2e3</span>);
circle1.animate(anim); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 立即执行</span>
circle2.animate(anim.delay(<span class="d" style="color: rgb(207, 106, 76);">500</span>)); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 0.5秒之后再执行</span>
</code>



Animation.repeat(repeat)⚓➭

创建现有动画对象的副本，并指定重复频率。

参数

repeatnumber
动画迭代次数。
如果传入 0
，表示动画会一直执行

返回：object新的动画对象


元素
Element⚓


Element.animate(…)⚓➭

为指定元素创建动画，并执行。

参数

paramsobject
元素的最终属性，请参照：Element.attr
msnumber
动画持续时间，单位：毫秒ms
easingstring
缓动类型。接受Raphael.easing_formulas其中之一，或CSS格式：
cubic-bezier(XX,
XX, XX, XX)

callbackfunction
回调函数。动画结束时将被调用。

或

animationobject
动画对象，请参照：Raphael.animation

返回：object原始元素


Element.animateWith(…)⚓➭

作用与 Element.animate 类似，但保证动画与另一元素的同步执行。

参数

elobject
要同步的元素
animobject
要同步的动画
paramsobject
元素的最终属性，请参照：Element.attr
msnumber
动画持续的时间，单位毫秒ms
easingstring
缓动类型。接受Raphael.easing_formulas或CSS格式： 
cubic‐bezier(XX,
XX, XX, XX)

callbackfunction
回调函数。动画结束时将被调用。

或

elementobject
要同步的元素
animobject
要同步的动画
animationobject
动画对象，请参照：Raphael.animation

返回：object原始元素


Element.attr(…)⚓➭

设置元素的属性。

参数

attrNamestring
属性名称
valuestring
值

或

paramsobject
名称/值对

或

attrNamestring
属性的名称

或

attrNamesarray
在这种情况下，方法返回指定属性名的当前值组成的数组

返回：objectElement ，如果传入
attrsName 和 value 或者 params。

返回：...属性的值，如果只有attrsName被传入。

返回：array属性值的数组，如果
attrsNames被传入。

返回：object属性对象，如果没有传入任何参数。

可能的参数

请参阅解释这些参数的SVG规范 。

arrow-endstring路径的末尾显示箭头。字符串格式是
<type>[-<width>[-<length>]]
。可能的类型：
classic
、
block
、
open
、
oval
、
diamond
、
none
，宽：
wide
、
narrow
、
midium
，长：
long
、
short
、
midium
。
clip-rectstring剪贴矩形。逗号或空格分隔的值：x，y，宽度和高度
cursorstring光标的CSS类型
cxnumber圆或椭圆的圆心的x轴坐标
cynumber圆或椭圆的圆心的y轴坐标
fillstring填充。颜色、渐变或图像
fill-opacitynumber填充不透明度
fontstring文本特性
font-familystring字体
font-sizenumber字体大小（像素）
font-weightstring字体粗细
heightnumber高度
hrefstringURL。指定时，元素表现为超链接
opacitynumber透明度
pathstringSVG的路径字符串格式
rnumber圆、椭圆或圆角矩形的半径
rxnumber椭圆的横向半径
rynumber椭圆的垂直半径
srcstring图像的URL，只适用于Element.image元素
strokestring笔触颜色
stroke-dasharraystring[“”,
“
-
”, “
.
”, “
-.
”,
“
-..
”, “
.
”, “
-
”,
“
--
”, “
-.
”, “
--.
”,
“
--..
”]
stroke-linecapstring[“
butt
”,
“
square
”, “
round
”]
stroke-linejoinstring[“
bevel
”,
“
round
”, “
miter
”]
stroke-miterlimitnumber
stroke-opacitynumber
stroke-widthnumber笔触宽度（像素，默认为1）
targetstring与
href 一起使用
textstring文本元素的内容。使用
\n
换行
text-anchorstring[“
start
”,
“
middle
”, “
end
”]，默认为 “
middle
”
titlestring工具提示内容
transformstring请参照：Element.transform
widthnumber
xnumber
ynumber

线性渐变

线性渐变的格式：“
‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›
”，例如：“
90-#fff-#000
”90°线性渐变从白色到黑色；“
0-#fff-#f00:20-#000
”
0°从白色通过红色（20％位置）渐变为黑色。

径向渐变：“
r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›
”，例如：“
r#fff-#000
”从白色到黑色；“
r(0.25,
0.75)#fff-#000
”从白色渐变到黑色，焦点在0.25，0.75。焦点坐标的外围是0 .. 1。径向渐变只适用于圆形和椭圆形。

路径字符串

请参考SVG文件路径字符串 ，Raphael完全支持它。

颜色解析

颜色的名称（“
red
“，“
green
“，“
cornflowerblue
“等）
#•••——缩写HTML颜色：（“
#000
”，“
#fc0
”等）
#••••••——HTML颜色：（“
#000000
”，“
#bd2300
”）
rgb(•••, •••, •••)——红色、绿色和蓝色通道值：（“
rgb(200, 100, 0)
”）
rgb(•••%, •••%, •••%)——和上面一样，但是用百分比：（“
rgb(100%, 175%, 0%)
”）
rgba(•••, •••, •••, •••)——红色、绿色、蓝色通道值：（“
rgba(200, 100, 0, .5)
”）
rgba(•••%, •••%, •••%, •••%)——和上面一样，但是用百分比：（“
rgba(100%, 175%, 0%, 50%)
”）
hsb(•••, •••, •••)——色相、饱和度和亮度值：（“
hsb(0.5, 0.25, 1)
”）
hsb(•••%, •••%, •••%) ——和上面一样，但是用百分比
hsba(•••, •••, •••, •••)——和上面一样，但是有透明度
hsl(•••, •••, •••)——基本和HSB相同，请参照：维基百科
hsl(•••%, •••%, •••%)——和上面一样，但是用百分比
hsla(•••, •••, •••, •••)——和上面一样，但是有透明度
对于HSB及HSL，你可以指定色相度数：“
hsl(240deg, 1, .5)
”，或者“
hsl(240°, 1, .5)
”


Element.click(handler)⚓➭

为元素添加click事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.clone()⚓➭

返回：object给定的元素的一个克隆元素


Element.data(key,
[value])⚓➭

添加或检索与给定的键关联的值。请参照：Element.removeData

参数

keystring
数据的键
valueany
数据的值

返回：object元素

或者，如果该值未指定：

返回：any值

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">for</span> (<span style="color: rgb(233, 223, 143);">var</span> i<span class="s" style="color: rgb(231, 190, 97);"> = </span><span class="d" style="color: rgb(207, 106, 76);">0</span>, i < <span class="d" style="color: rgb(207, 106, 76);">5</span>, i++) {
paper.circle(<span class="d" style="color: rgb(207, 106, 76);">10</span><span class="s" style="color: rgb(231, 190, 97);"> + </span><span class="d" style="color: rgb(207, 106, 76);">15</span><span class="s" style="color: rgb(231, 190, 97);"> * </span>i, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>)
.attr({fill: <span style="color: rgb(139, 153, 103);">"#<span class="d">000</span>"</span>})
.data(<span style="color: rgb(139, 153, 103);">"i"</span>, i)
.click(<span style="color: rgb(233, 223, 143);">function</span> () {
alert(<span style="color: rgb(233, 223, 143);">this</span>.data(<span style="color: rgb(139, 153, 103);">"i"</span>));
});
}
</code>



Element.dblclick(handler)⚓➭

为元素添加dblclick事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.drag(onmove,
onstart, onend, [mcontext], [scontext], [econtext])⚓➭

为元素添加drag事件的处理程序。

参数

onmovefunction
移动处理函数
onstartfunction
拖拽开始的处理函数
onendfunction
拖拽结束处理函数
mcontextobject
移动处理函数环境（上下文）
scontextobject
拖拽开始处理函数环境
econtextobject
拖拽结束处理函数环境

下面额外的
drag
事件会被触发：开始时
drag.start.<id>
；结束时
drag.end.<id>
；每次移动时
drag.move.<id>
。当元素被拖入了另一个元素
drag.over.<id>
将被触发。

拖拽开始事件和拖拽开始处理函数将在指定的环境内调用，或在包含以下元素的环境内调用：

xnumber鼠标的
x轴位置
ynumber鼠标的
y轴位置
eventobjectDOM事件对象

移动事件和移动处理函数将在指定的环境内调用，或在包含以下元素的环境内调用：

dxnumber相对起始点的x位移
dynumber相对起始点的y位移
xnumber鼠标的
x轴位置
ynumber鼠标的
y轴位置
eventobjectDOM事件对象

拖拽结束事件和拖拽结束处理函数将在指定的环境内调用，或在包含以下元素的环境内调用：

eventobjectDOM事件对象

返回：object元素


Element.getBBox(isWithoutTransform)⚓➭

返回指定元素的边界框

参数

isWithoutTransformboolean
如果你想得到变换之前的边界，使用
true
。默认值为 
false
。

返回：object边界框对象：

{

x:number左上角
x
y:number左上角y
x2:number右下角
x
y2:number右下角
y
width:number宽
height:number高

}


Element.getPointAtLength(length)⚓➭

返回在指定路径上指定长度的坐标点。只适用于“路径”类型的元素。

参数

lengthnumber

返回：object名称：值

{

x:numberx
坐标
y:numbery
坐标
alpha:number导数（切线）的角度

}


Element.getSubpath(from,
to)⚓➭

返回在指定路径上指定长度定子路径。只适用于“路径”类型的元素。

参数

fromnumber
片段开始位置
tonumber
片段结束的位置

返回：string段的路径字符串


Element.getTotalLength()⚓➭

返回路径的长度，以像素为单位。只适用于“路径”类型的元素。

返回：number长度。


Element.glow([glow])⚓➭

为指定元素添加类似光晕的效果，返回创建的光晕元素组。请参照：Paper.set.

注：光晕不与元素关联。如果你改变元素的属性，它并不会自我调整。

参数

glowobject
参数对象（所有属性可选）：

{

widthnumber光晕大小，默认是
10

fillboolean是否填充，默认是
false

opacitynumber透明度，默认是
0.5

offsetxnumber横向偏移，默认为
0

offsetynumber垂直偏移，默认为
0

colorstring发光颜色，默认为
black


}

返回：object表示光晕的元素组，请参照：Paper.set


Element.hide()⚓➭

隐藏指定元素。请参照：Element.show.

返回：object元素


Element.hover(f_in,
f_out, [icontext], [ocontext])⚓➭

为元素增加hover事件的处理程序。

参数

f_infunction
悬停进入处理句柄
f_outfunction
悬停离开处理句柄
icontextobject
悬停进入处理句柄环境
ocontextobject
悬停离开处理句柄环境

返回：object元素


Element.id⚓➭

数字

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


Element.insertAfter() ⚓ ➭

在指定对象后插入当前对象。

返回：object元素


Element.insertBefore() ⚓ ➭

在指定对象前插入当前对象。

返回：object元素


Element.isPointInside(x,
y)⚓➭

确定指定点在当前元素的形状内

参数

xnumber
点的x坐标
ynumber
点的y坐标

返回：boolean
true
如果点在形状内


Element.matrix⚓➭

object

矩阵对象，它代表元素的变换


Element.mousedown(handler)⚓➭

为元素添加mousedown事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.mousemove(handler)⚓➭

为元素添加mousemove事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.mouseout(handler)⚓➭

为元素添加mouseout的事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.mouseover(handler)⚓➭

为元素添加mouseover事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.mouseup(handler)⚓➭

为元素添加mouseup事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.next⚓➭

object

层次结构中的下一个元素的引用。


Element.node⚓➭

object

DOM对象的引用。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 在画布上，画一个圆，圆心坐标为：X:10 , Y:10 ,圆的半径：10</span>
<span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.circle(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>);
c.node.onclick<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> () {
c.attr(<span style="color: rgb(139, 153, 103);">"fill"</span>, <span style="color: rgb(139, 153, 103);">"red"</span>);
};
</code>



Element.onDragOver(f)⚓➭

为元素分配
drag.over.<id>
事件处理程序的快捷方式，其中id是元素的id（请参照：Element.id ）。

参数

ffunction
事件的处理程序，第一个参数是你拖拽的元素


Element.paper⚓➭

object

绘制对象的“画布”的内部引用。主要用于插件和元素扩展。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">Raphael.el.cross<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> () {
<span style="color: rgb(233, 223, 143);">this</span>.attr({fill: <span style="color: rgb(139, 153, 103);">"red"</span>});
<span style="color: rgb(233, 223, 143);">this</span>.paper.path(<span style="color: rgb(139, 153, 103);">"M10,10L50,50M50,10L10,<span class="d">50</span>"</span>)
.attr({stroke: <span style="color: rgb(139, 153, 103);">"red"</span>});
}
</code>



Element.pause([anim])⚓➭

暂停执行动画，稍后可以恢复执行。

参数

animobject
动画对象

返回：object原始元素


Element.prev⚓➭

object

层次结构中前一个元素的引用。


Element.raphael⚓➭

object

Raphael对象的内部引用。即使它目前不可用。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">Raphael.el.red<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> () {
<span style="color: rgb(233, 223, 143);">var</span> hsb<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">this</span>.paper.raphael.rgb2hsb(<span style="color: rgb(233, 223, 143);">this</span>.attr(<span style="color: rgb(139, 153, 103);">"fill"</span>));
hsb.h<span class="s" style="color: rgb(231, 190, 97);"> = </span><span class="d" style="color: rgb(207, 106, 76);">1</span>;
<span style="color: rgb(233, 223, 143);">this</span>.attr({fill: <span style="color: rgb(233, 223, 143);">this</span>.paper.raphael.hsb2rgb(hsb).hex});
}
</code>



Element.remove()⚓➭

从画布上移除元素。


Element.removeData([key])⚓➭

删除元素与指定键相关联的值。如果不提供关键，则删除元素中的所有数据。

参数

keystring
键

返回：object元素


Element.resume([anim])⚓➭

恢复动画，如果它被Element.pause方法暂停。

参数

animobject
动画对象

返回：object原始元素


Element.rotate(deg,
[cx], [cy])⚓➭

建议不要使用！使用Element.transform代替。围绕指定的点旋转指定角度。

参数

degnumber
角度
cxnumber
旋转中心的x坐标
cynumber
旋转中心的y坐标

如果cx和cy没有指定，形状的中心将作为旋转中心。

返回：object元素


Element.scale(sx,
sy, [cx], [cy])⚓➭

建议不要使用。使用Element.transform代替。为元素添加缩放。

参数

sxnumber
水平缩放值
synumber
垂直缩放值
cxnumber
缩放中心的x坐标
cynumber
缩放中心的y坐标

如果cx和cy没有指定，则使用形状的中心。

返回：object元素


Element.setTime(anim,
value)⚓➭

以毫秒为单位给元素设置动画的状态。类似Element.status方法。

参数

animobject
动画对象
valuenumber
动画持续的毫秒数

返回：object如果
value
被指定则返回原始元素

请注意，在动画过程中会触发下列事件：

在每个动画帧
anim.frame.<id>
，在开始时
anim.start.<id>
结束时
anim.finish.<id>
。


Element.show()⚓➭

使元素可见。请参照：Element.hide 。

返回：object元素


Element.status([anim],
[value])⚓➭

获取或设置元素的动画状态。

参数

animobject
动画对象
值number
0 -1。如果指定，方法就像一个setter，并设置指定动画的状态为指定值。这将导致动画跳转到指定位置。

返回：number状态

或

返回：array状态，如果
anim
未指定。对象数组：

{

anim:object动画对象
status:number状态

}

或

返回：object如果
value
被指定则返回原始元素


Element.stop([anim])⚓➭

停止执行动画。

参数

animobject
动画对象

返回：object原始元素


Element.toBack()⚓➭

将元素向下移动。

返回：object元素


Element.toFront()⚓➭

将元素向上移动。

返回：object元素


Element.touchcancel(handler)⚓➭

为元素添加touchcancel事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.touchend(handler)⚓➭

为元素添加touchend事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.touchmove(handler)⚓➭

为元素添加touchmove事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.touchstart(handler)⚓➭

为元素添加touchstart事件的处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.transform([tstr])⚓➭

为元素增加变换，这是独立于其他属性的变换，即变换不改变矩形的
x
或
y
。变换字符串跟路径字符串的语法类似：
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(139, 153, 103);">"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</span>
</code>


每个字母是一个命令。有四个命令：
t
是平移，
r
是旋转，
s
是缩放，
m
是矩阵。

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

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

矩阵接受六个参数。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> el<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.rect(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">20</span>, <span class="d" style="color: rgb(207, 106, 76);">300</span>, <span class="d" style="color: rgb(207, 106, 76);">200</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 转换 <span class="d">100</span>, <span class="d">100</span>, 旋转 <span class="d">45</span>°, 转换 -<span class="d">100</span>, <span class="d">0</span></span>
el.transform(<span style="color: rgb(139, 153, 103);">"t100,100r45t-<span class="d">100</span>,<span class="d">0</span>"</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 可以追加，或者预先转换</span>
el.transform(<span style="color: rgb(139, 153, 103);">"...t50,<span class="d">50</span>"</span>);
el.transform(<span style="color: rgb(139, 153, 103);">"s2..."</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 或者包裹</span>
el.transform(<span style="color: rgb(139, 153, 103);">"t50,<span class="d">50</span>...t-<span class="d">50</span>-<span class="d">50</span>"</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 重置转换</span>
el.transform(<span style="color: rgb(139, 153, 103);">""</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 获取不带参数的当前值</span>
console.log(el.transform());
</code>


参数

tstrstring
变换字符串

如果未指定 tstr

返回：string转换字符串

else

返回：object元素


Element.translate(dx,
dy)⚓➭

建议不要使用。使用Element.transform代替。为元素增加平移变换。

参数

dxnumber
水平位移
dynumber
垂直位移

返回：object元素


Element.unclick(handler)⚓➭

移除元素的单击事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.undblclick(handler)⚓➭

移除元素的dblclick事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.undrag()⚓➭

移除元素的drag事件处理程序。


Element.unhover(f_in,
f_out)⚓➭

移除元素的hover事件处理程序。

参数

f_infunction
开始悬停的处理程序
f_outfunction
结束悬停的处理程序

返回：object元素


Element.unmousedown(handler)⚓➭

删除元素的mousedown事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.unmousemove(handler)⚓➭

删除元素的mousemove事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.unmouseout(handler)⚓➭

删除元素的mouseout事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.unmouseover(handler)⚓➭

移除元素的mouseover事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.unmouseup(handler)⚓➭

删除元素的mouseup事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.untouchcancel(handler)⚓➭

移除元素的touchcancel事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.untouchend(handler)⚓➭

移除元素的touchend事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.untouchmove(handler)⚓➭

移除元素的touchmove事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


Element.untouchstart(handler)⚓➭

移除元素touchstart的事件处理程序。

参数

handlerfunction
事件处理函数

返回：object元素


矩阵⚓


Matrix.add(a,
b, c, d, e, f, matrix)⚓➭

为现有矩阵增加一个矩阵。

参数

anumber

bnumber

cnumber

dnumber

enumber

fnumber

matrixobject
矩阵


Matrix.clone()⚓➭

返回矩阵的副本

返回：object矩阵


Matrix.invert()⚓➭

返回矩阵的反转版本

返回：object矩阵


Matrix.rotate(a,
x, y)⚓➭

旋转矩阵

参数

anumber

xnumber

ynumber


Matrix.scale(x,
[y], [cx], [cy])⚓➭

缩放矩阵

参数

xnumber

ynumber

cxnumber

cynumber


Matrix.split() ⚓ ➭

将矩阵分割成简单的变换

返回：object格式：

dxnumber水平平移
dynumber垂直平移y
scalexnumber水平缩放
scaleynumber垂直缩放
shearnumber剪切
rotatenumber旋转角度
isSimpleboolean是否可以简单变换代替


Matrix.toTransformString()⚓➭

返回转换字符串

返回：string转换字符串


Matrix.translate(x,
y)⚓➭

平移矩阵

参数

xnumber

ynumber


Matrix.x(x,
y)⚓➭

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

参数

xnumber

ynumber

返回：数字x


Matrix.y(x,
y)⚓➭

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

参数

xnumber

ynumber

返回：数字y


画布⚓


Paper.add(json)⚓➭

导入JSON格式的元素。格式：
{type: type, <attributes>}


参数

jsonarray

返回object导入的元素集合

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">paper.add([
{
type: <span style="color: rgb(139, 153, 103);">"circle"</span>,
cx: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
cy: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
r: <span class="d" style="color: rgb(207, 106, 76);">5</span>
},
{
type: <span style="color: rgb(139, 153, 103);">"rect"</span>,
x: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
y: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
width: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
height: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
fill: <span style="color: rgb(139, 153, 103);">"#fc0"</span>
}
]);
</code>



Paper.bottom⚓➭

指向画布上的底层元素


Paper.ca⚓➭

object

Paper.customAttributes的引用


Paper.circle(x,
y, r)⚓➭

绘制一个圆。

参数

xnumber
圆心的x坐标
ynumber
圆心的y坐标
rnumber
半径,半径距离

返回：objectRaphael元素对象，类型为“圆”

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.circle(<span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">40</span>);
</code>



Paper.clear()⚓➭

清空画布，即删除所有画布上的元素。


Paper.customAttributes⚓➭

object

你可以添加自定义属性来方便设置一批属性：

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">paper.customAttributes.hue<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> (num) {
num<span class="s" style="color: rgb(231, 190, 97);"> = </span>num<span class="s" style="color: rgb(231, 190, 97);"> % </span><span class="d" style="color: rgb(207, 106, 76);">1</span>;
<span style="color: rgb(233, 223, 143);">return</span> {fill: <span style="color: rgb(139, 153, 103);">"hsb("</span><span class="s" style="color: rgb(231, 190, 97);"> + </span>num<span class="s" style="color: rgb(231, 190, 97);"> + </span><span style="color: rgb(139, 153, 103);">", <span class="d">0.75</span>, <span class="d">1</span>)"</span>};
};
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 自定义属性 “hue” 会改变填充</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 得到固定的色相与饱和度和亮度。</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 可以这样：</span>
<span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.circle(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>).attr({hue: <span class="d" style="color: rgb(207, 106, 76);">.45</span>});
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 甚至这样：</span>
c.animate({hue: <span class="d" style="color: rgb(207, 106, 76);">1</span>}, <span class="d" style="color: rgb(207, 106, 76);">1e3</span>);

<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 你也可以创建自定义属性</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 也可以多个参数</span>
paper.customAttributes.hsb<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> (h, s, b) {
<span style="color: rgb(233, 223, 143);">return</span> {fill: <span style="color: rgb(139, 153, 103);">"hsb("</span><span class="s" style="color: rgb(231, 190, 97);"> + </span>[h, s, b].join(<span style="color: rgb(139, 153, 103);">","</span>)<span class="s" style="color: rgb(231, 190, 97);"> + </span><span style="color: rgb(139, 153, 103);">")"</span>};
};
c.attr({hsb: <span style="color: rgb(139, 153, 103);">"<span class="d">0.5</span> <span class="d">.8</span> <span class="d">1</span>"</span>});
c.animate({hsb: [<span class="d" style="color: rgb(207, 106, 76);">1</span>, <span class="d" style="color: rgb(207, 106, 76);">0</span>, <span class="d" style="color: rgb(207, 106, 76);">0.5</span>]}, <span class="d" style="color: rgb(207, 106, 76);">1e3</span>);
</code>



Paper.ellipse(x,
y, rx, ry)⚓➭

绘制一个椭圆。

参数

xnumber
该中心的x坐标
ynumber
y坐标的中心
rxnumber
水平半径
rynumber
垂直半径

返回：objectRaphael元素对象，类型为“椭圆”

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.ellipse(<span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">40</span>, <span class="d" style="color: rgb(207, 106, 76);">20</span>);
</code>



Paper.forEach(callback,
thisArg)⚓➭

为画布上每个元素执行指定函数

如果回调函数返回
false
则会停止循环。

参数

callbackfunction
函数运行
thisArgobject
回调函数的环境

返回：object画布对象

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">paper.forEach(<span style="color: rgb(233, 223, 143);">function</span> (el) {
el.attr({ stroke: <span style="color: rgb(139, 153, 103);">"blue"</span> });
});
</code>



Paper.getById(id)⚓➭

返回匹配指定ID的元素。

参数

idnumber
ID

返回：objectRaphael元素对象


Paper.getElementByPoint(x,
y)⚓➭

返回位于指定位置的最上层元素

返回：objectRaphael元素对象

参数

xnumber
相对窗口左上角的x坐标
ynumber
相对窗口左上角的y坐标

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">paper.getElementByPoint(mouseX, mouseY).attr({stroke: <span style="color: rgb(139, 153, 103);">"#f00"</span>});
</code>



Paper.getElementsByPoint(x,
y)⚓➭

返回位于指定位置的所有元素集合

参数

xnumber
点的x坐标
ynumber
点的y坐标

返回：object集合


Paper.getFont(family,
[weight], [style], [stretch])⚓➭

根据指定的参数从注册字体中获取字体对象。您可以只指定字体名称中的一部分，像“Myriad”，“Myriad Pro”。

参数

familystring
字体名称或其中的任何单词
weightstring
字体粗细
stylestring
字体样式
stretchstring
字体变形

返回：object字体对象

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">paper.print(<span class="d" style="color: rgb(207, 106, 76);">100</span>, <span class="d" style="color: rgb(207, 106, 76);">100</span>, <span style="color: rgb(139, 153, 103);">"Test string"</span>, paper.getFont(<span style="color: rgb(139, 153, 103);">"Times"</span>, <span class="d" style="color: rgb(207, 106, 76);">800</span>), <span class="d" style="color: rgb(207, 106, 76);">30</span>);
</code>



Paper.image(src,
x, y, width, height)⚓➭

嵌入一张图像。

参数

srcstring
源图像的URI
xnumber
x坐标
ynumber
y坐标
widthnumber
图像的宽度
heightnumber
图像的高度

返回：objectRaphael元素对象，类型为“图像”

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.image(<span style="color: rgb(139, 153, 103);">"apple.png"</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">80</span>, <span class="d" style="color: rgb(207, 106, 76);">80</span>);
</code>



Paper.path([pathString])⚓➭

由指定的路径字符串创建一个路径元素。

参数

pathStringstring
SVG格式的路径字符串。

路径字符串由一个或多个命令组成。每个命令以一个字母开始，随后是逗号（“,”）分隔的参数。例如：
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(139, 153, 103);">"M10,20L30,<span class="d">40</span>"</span>
</code>


我们看到两个命令：“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)+
RCatmull-Rom 曲线*x1 y1 (x y)+
* “Catmull-Rom 曲线”不是标准SVG命令，在2.0版时被加入。 注：有种特殊情况，路径只包含三个命令：“M10,10R…z”。在这种情况下，路径将平滑连接到它的起点。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.path(<span style="color: rgb(139, 153, 103);">"M10 10L90 <span class="d">90</span>"</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// draw a diagonal line:</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
</code>


路径字符串的例子可以查看这些图标：http://lab.julying.com/raphael-js/docs/icons/icons.html


Paper.print(x,
y, string, font, [size], [origin], [letter_spacing])⚓➭

创建路径，表示指定字体，指定大小，在指定位置的指定文本。该方法的结果是路径元素，它包含整个文本作为一个单独的路径。

参数

xnumber
x坐标
ynumber
y坐标
stringstring
显示文本
fontobject
字体对象，请参照：Paper.getFont
sizenumber
字体大小，默认是
16

originstring
文本垂直对齐方式
"baseline"
或
"middle"
，默认为
"middle"

letter_spacingnumber
范围
-1..1
，默认为
0


返回：object产生的路径元素，其中包括所有字母

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> txt<span class="s" style="color: rgb(231, 190, 97);"> = </span>r.print(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span style="color: rgb(139, 153, 103);">"print"</span>, r.getFont(<span style="color: rgb(139, 153, 103);">"Museo"</span>), <span class="d" style="color: rgb(207, 106, 76);">30</span>).attr({fill: <span style="color: rgb(139, 153, 103);">"#fff"</span>});
</code>



Paper.raphael⚓➭

指向Raphael对象


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

绘制一个矩形。

参数

xnumber
左上角的x坐标
ynumber
左上角的y坐标
widthnumber
宽度
heightnumber
高度
rnumber
圆角半径，默认为​​0

返回：objectRaphael元素对象，类型为“矩形”

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 规则的矩形</span>
<span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.rect(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 带圆角的矩形</span>
<span style="color: rgb(233, 223, 143);">var</span> c<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.rect(<span class="d" style="color: rgb(207, 106, 76);">40</span>, <span class="d" style="color: rgb(207, 106, 76);">40</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>);
</code>



Paper.remove()⚓➭

从DOM中删除的画布。


Paper.renderfix()⚓➭

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


Paper.safari()⚓➭

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


Paper.set()⚓➭

创建类数组对象，保存和一次操作其中的多个元素。警告：它不创建任何元素，只是分组已存在的元素。“集合”充当伪元素 -所有元素可用的方法，都可以在集合上使用。

返回：object类数组对象表示元素集合

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> st<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.set();
st.push(
paper.circle(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">5</span>),
paper.circle(<span class="d" style="color: rgb(207, 106, 76);">30</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">5</span>)
);
st.attr({fill: <span style="color: rgb(139, 153, 103);">"red"</span>}); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 改变两个圆的填充</span>
</code>



Paper.setFinish()⚓➭

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

返回：object集合


Paper.setSize(width,
height)⚓➭

改变画布尺寸

参数

widthnumber
新的画布宽度
heightnumber
新的画布高度


Paper.setStart() ⚓ ➭

创建Paper.set 。调用此方法之后到调用Paper.setFinish方法之前创建的所有元素都会被添加到集合内。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">paper.setStart();
paper.circle(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">5</span>),
paper.circle(<span class="d" style="color: rgb(207, 106, 76);">30</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">5</span>)
<span style="color: rgb(233, 223, 143);">var</span> st<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.setFinish();
st.attr({fill: <span style="color: rgb(139, 153, 103);">"red"</span>}); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 改变两个圆的填充</span>
</code>



Paper.setViewBox(x,
y, w, h, fit)⚓➭

设置画布的视框。实际上，你可以通过指定新的边界来缩放和平移整个画布。

参数

xnumber
新x坐标，默认为
0

ynumber
新y坐标，默认为
0

wnumber
新的画布宽度
hnumber
新的画布高度
適合boolean
设置
true
，如果你想要图形适应新的边界框


Paper.text(x,
y, text)⚓➭

绘制一个文本字符串。如果你需要换行，使用“\n”。

参数

xnumber
x坐标
ynumber
y坐标
textstring
文本字符串

返回：objectRaphael元素对象，类型为“文本”

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> t<span class="s" style="color: rgb(231, 190, 97);"> = </span>paper.text(<span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span style="color: rgb(139, 153, 103);">"王子墨!\n http://julying.com"</span>); </code>



Paper.top⚓➭

指向画布上的顶端元素


Raphael（...） ⚓ ⚓

创建一个画布对象用来绘制。你必须第一步就这么做，该实例将来调用的所有绘图方法都被绑定到这个画布。

参数

containerHTML元素string
DOM元素或它的ID，这将是绘图表面的父级节点
widthnumber

heightnumber

callbackfunction
回调函数，新创建的画布将成为该函数的环境

或

xnumber

ynumber

widthnumber

heightnumber

callbackfunction
回调函数，新创建的画布将成为该函数的环境

或

allarray
（前3个或4个数组元素对应 [containerID,width,height]或[x,y,width,height]。其余数组元素是元素描述{type:类型,<属性>}）。请参照：Paper.add 。
callbackfunction
回调函数，新创建的画布将成为该函数的环境

或

onReadyCallbackfunction
DOM ready事件回调。你也可以使用eve的“DOMLoad”事件。在这种情况下该方法将返回
undefined
。

返回：object画布

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 每个示例都创建一个画布</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 画布的尺寸是：宽 320px x 高 200px.</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 画布开始于 <span class="d">10</span>,<span class="d">50</span> .</span>
<span style="color: rgb(233, 223, 143);">var</span> paper<span class="s" style="color: rgb(231, 190, 97);"> = </span>Raphael(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">50</span>, <span class="d" style="color: rgb(207, 106, 76);">320</span>, <span class="d" style="color: rgb(207, 106, 76);">200</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 画布开始于  左上角，并且在 id=“notepad” 的元素里面创建</span>
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// (注意：当节点有属性： dir=<em>"rtl"</em>，会从右上角开始创建)</span>
<span style="color: rgb(233, 223, 143);">var</span> paper<span class="s" style="color: rgb(231, 190, 97);"> = </span>Raphael(document.getElementById(<span style="color: rgb(139, 153, 103);">"notepad"</span>), <span class="d" style="color: rgb(207, 106, 76);">320</span>, <span class="d" style="color: rgb(207, 106, 76);">200</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 同上</span>
<span style="color: rgb(233, 223, 143);">var</span> paper<span class="s" style="color: rgb(231, 190, 97);"> = </span>Raphael(<span style="color: rgb(139, 153, 103);">"notepad"</span>, <span class="d" style="color: rgb(207, 106, 76);">320</span>, <span class="d" style="color: rgb(207, 106, 76);">200</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 图像</span>
<span style="color: rgb(233, 223, 143);">var</span> set<span class="s" style="color: rgb(231, 190, 97);"> = </span>Raphael([<span style="color: rgb(139, 153, 103);">"notepad"</span>, <span class="d" style="color: rgb(207, 106, 76);">320</span>, <span class="d" style="color: rgb(207, 106, 76);">200</span>, {
type: <span style="color: rgb(139, 153, 103);">"rect"</span>,
x: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
y: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
width: <span class="d" style="color: rgb(207, 106, 76);">25</span>,
height: <span class="d" style="color: rgb(207, 106, 76);">25</span>,
stroke: <span style="color: rgb(139, 153, 103);">"#f00"</span>
}, {
type: <span style="color: rgb(139, 153, 103);">"text"</span>,
x: <span class="d" style="color: rgb(207, 106, 76);">30</span>,
y: <span class="d" style="color: rgb(207, 106, 76);">40</span>,
text: <span style="color: rgb(139, 153, 103);">"Dump"</span>
}]);
</code>



Raphael.angle(x1,
y1, x2, y2, [x3], [y3])⚓➭

返回两个或三个点之间的角度

参数

x1number
第一点的x坐标
y1number
第一点的y坐标
x2number
第二点的x坐标
y2number
第二点的y坐标
x3number
第三点的x坐标
y3number
第三点的y坐标

返回：number度角


Raphael.animation(params,
ms, [easing], [callback])⚓➭

创建一个动画对象可以传递给Element.animate或Element.animateWith方法。请参照：Animation.delay和Animation.repeat。

参数

paramsobject
元素的最终属性，请参照：Element.attr
msnumber
动画持续的时间，单位毫秒ms
easingstring
缓动类型。接受Raphael.easing_formulas其中之一，或CSS格式： 
cubic-bezier(XX,
XX, XX, XX)

callbackfunction
回调函数。动画结束时将被调用。

返回：object动画


Raphael.bezierBBox(…)⚓➭

返回指定三次贝赛尔曲线的边界框

参数

p1xnumber
第一点的x坐标
p1ynumber
第一点的y坐标
c1xnumber
第一个锚点的x坐标
c1ynumber
第一个锚点的y坐标
c2xnumber
第二个锚点的x坐标
c2ynumber
第二个锚点的y坐标
p2xnumber
第二点的x坐标
p2ynumber
第二点的y坐标

或

bezarray
贝赛尔曲线的6个点组成的数组

返回：object点，格式：

{

min: {

x:number最左边点的x坐标
y:number最上边点的y坐标

}
max: {

x:number最右边点的x坐标
y:number最下边点的y坐标

}

}


Raphael.color(clr)⚓➭

解析指定颜色字符串并返回包含全部值的颜色对象。

参数

CLRstring
颜色字符串，支持的格式请参照：Raphael.getRGB

返回：objectRGB 和 HSB
组合对象：

{

rnumber红色,
gnumber绿色,
bnumber蓝色,
hexstring颜色的
HTML/CSS 格式：#••••••,
errorboolean
true
，如果无法解析字符串,
h字符串色相,
s字符串饱和度,
v字符串色调,
l字符串亮度

}


Raphael.createUUID()⚓➭

返回RFC4122，第4版ID


Raphael.deg(deg)⚓➭

弧度转角度

参数

degnumber
弧度值

返回：number角度值


Raphael.easing_formulas⚓➭

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

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

请参照：过渡示例.


Raphael.el⚓➭

object

你可以给元素添加自己的方法。当你要修改默认功能或要在一个方法中包装一些常见的变换或属性，这很有用。与画布方法不同，你可以随时重新定义元素的方法。扩展元素的方法，不会影响元素集合。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">Raphael.el.red<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> () {
<span style="color: rgb(233, 223, 143);">this</span>.attr({fill: <span style="color: rgb(139, 153, 103);">"#f00"</span>});
};
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 开始使用参数</span>
paper.circle(<span class="d" style="color: rgb(207, 106, 76);">100</span>, <span class="d" style="color: rgb(207, 106, 76);">100</span>, <span class="d" style="color: rgb(207, 106, 76);">20</span>).red();
</code>



Raphael.findDotsAtSegment(p1x,
p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭

在给定的三次贝赛尔曲线上查找给定位置的点的坐标。

参数

p1xnumber
第一点的x坐标
p1ynumber
第一点的y坐标
c1xnumber
第一个锚点的x坐标
c1ynumber
第一个锚点的y坐标
c2xnumber
第二个锚点的x坐标
c2ynumber
第二个锚点的y坐标
p2xnumber
第二点的x坐标
p2ynumber
第二点的y坐标
ţnumber
曲线上的位置（0 .. 1）

返回：object点，格式：

{

x:number点的x坐标
y:number点的y坐标
m: {

x:number左锚的x坐标
y:number左锚的y坐标

}
n: {

x:number右锚的x坐标
y:number右锚的y坐标

}
start: {

x:number曲线起点的x坐标
y:number曲线起点的y坐标

}
end: {

x:number曲线终点的x坐标
y:number曲线终点的y坐标

}
alpha:number曲线上该点导数（切线）的角度

}


Raphael.fn⚓➭

object

你可以为画布添加你自己的方法。例如：如果你想画一个饼图，可以创建自己的饼图函数然后作为Raphael插件。要这么做，你需要扩展
Raphael.fn
对象。您应该在Raphael实例被创建之前修改
fn
对象，否则将没有任何效果。请注意：Raphael2.0移除了为插件提供命名空间的功能。应该由插件确保命名空间负责保证适当的环境的安全。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">Raphael.fn.arrow<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> (x1, y1, x2, y2, size) {
<span style="color: rgb(233, 223, 143);">return this</span>.path( ... );
};
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 或者创建命名空间</span>
Raphael.fn.mystuff<span class="s" style="color: rgb(231, 190, 97);"> = </span>{
arrow: <span style="color: rgb(233, 223, 143);">function</span> () {…},
star: <span style="color: rgb(233, 223, 143);">function</span> () {…},
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// etc…</span>
};
<span style="color: rgb(233, 223, 143);">var</span> paper<span class="s" style="color: rgb(231, 190, 97);"> = </span>Raphael(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">630</span>, <span class="d" style="color: rgb(207, 106, 76);">480</span>);
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 开始使用</span>
paper.arrow(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">30</span>, <span class="d" style="color: rgb(207, 106, 76);">30</span>, <span class="d" style="color: rgb(207, 106, 76);">5</span>).attr({fill: <span style="color: rgb(139, 153, 103);">"#f00"</span>});
paper.mystuff.arrow();
paper.mystuff.star();
</code>



Raphael.format(token,
…)⚓➭

简单的格式化功能。将“ 
{<number>}
“结构替换为相应的参数。

参数

tokenstring
格式字符串
…string
参数的其余部分将被视为替换参数

返回：string经过格式化的字符串

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span style="color: rgb(233, 223, 143);">var</span> x<span class="s" style="color: rgb(231, 190, 97);"> = </span><span class="d" style="color: rgb(207, 106, 76);">10</span>,
y<span class="s" style="color: rgb(231, 190, 97);"> = </span><span class="d" style="color: rgb(207, 106, 76);">20</span>,
width<span class="s" style="color: rgb(231, 190, 97);"> = </span><span class="d" style="color: rgb(207, 106, 76);">40</span>,
height<span class="s" style="color: rgb(231, 190, 97);"> = </span><span class="d" style="color: rgb(207, 106, 76);">50</span>;
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 将会绘制一个矩形，它的效果等同于： <em>"M10,20h40v50h-40z"</em></span>
paper.path(Raphael.format(<span style="color: rgb(139, 153, 103);">"M{<span class="d">0</span>},{<span class="d">1</span>}h{<span class="d">2</span>}v{<span class="d">3</span>}h{<span class="d">4</span>}z"</span>, x, y, width, height, -width));
</code>



Raphael.fullfill(token,
json)⚓➭

比Raphael.format更先进一点点的格式化功能。将“ 
{<name>}
“结构替换为相应的参数。

参数

tokenstring
格式
jsonobject
对象，其属性将被用来做替换

返回：string经过格式化的字符串

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;"><span class="c" style="color: rgb(153, 153, 153); font-style: italic;">//将会绘制一个矩形，它的效果等同于： <em>"M10,20h40v50h-40z"</em></span>
paper.path(Raphael.fullfill(<span style="color: rgb(139, 153, 103);">"M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z"</span>, {
x: <span class="d" style="color: rgb(207, 106, 76);">10</span>,
y: <span class="d" style="color: rgb(207, 106, 76);">20</span>,
dim: {
width: <span class="d" style="color: rgb(207, 106, 76);">40</span>,
height: <span class="d" style="color: rgb(207, 106, 76);">50</span>,
<span style="color: rgb(139, 153, 103);">"negative width"</span>: -<span class="d" style="color: rgb(207, 106, 76);">40</span>
}
}));
</code>



Raphael.getColor([value])⚓➭

每次调用返回色谱中的下一个颜色。要重置回红色，调用Raphael.getColor.reset

参数

值number
亮度，默认为
0.75


返回：string颜色的十六进制表示。


Raphael.getColor.reset()⚓⚓

复位色谱位置 Raphael.getColor


Raphael.getPointAtLength(path,
length)⚓➭

返回位于路径上给定长度的点的坐标。

参数

pathstring
SVG路径字符串
lengthnumber

返回：object点：

{

x:numberx
坐标
y:numbery
坐标
alpha:number导数（切线）的角度

}


Raphael.getRGB(colour)⚓➭

将颜色字符串解析为RGB对象

参数

colourstring
颜色字符串，格式：

颜色的名称（“
red
“，“
green
“，“
cornflowerblue
“等）
#•••——HTML颜色缩写：（“
#000
”，“
#fc0
”等）
#••••••——HTML颜色：（“
#000000
”，“
#bd2300
”）
rgb(•••, •••, •••)——红色、绿色和蓝色通道值：（“
rgb(200, 100, 0)
”） RGB（•••••••••） -红色，绿色和蓝色通道值（ 
rgb(200, 100,
0)

rgb(•••%, •••%, •••%)——和上面一样，但是用百分比：（“
rgb(100%, 175%, 0%)
”）
hsb(•••, •••, •••)——色相、饱和度和亮度值：（“
hsb(0.5, 0.25, 1)
”）
hsb(•••%, •••%, •••%) ——和上面一样，但是用百分比
hsl(•••, •••, •••) ——和HSB类似
hsl(•••%, •••%, •••%) ——和HSB类似

返回：objectRGB对象，格式：

{

rnumber红色,
gnumber绿色,
bnumber蓝色
hexstring颜色的
HTML/CSS 格式：#••••••,
errorbooleantrue，如果不能解析

}


Raphael.getSubpath(path,
from, to)⚓➭

从指定路径获取一段子路径，指定起始和结束位置。

参数

pathstring
SVG路径字符串
fromnumber
片段开始位置
tonumber
片段结束的位置

返回：string段的路径字符串


Raphael.getTotalLength(path)⚓➭

返回在指定路径的长度（像素）。

参数

pathstring
SVG的路径字符串。

返回：number长度


Raphael.hsb(h,
s, b)⚓➭

HSB值转换为十六进制颜色。

参数

hnumber
色相
snumber
饱和度
bnumber
色调或明度

返回：string颜色的十六进制表示。


Raphael.hsb2rgb(h,
s, v)⚓➭

HSB值转换为RGB对象。

参数

hnumber
色相
snumber
饱和度
vnumber
色调或明度

返回：objectRGB对象，格式：

{

rnumber红色,
gnumber绿色,
bnumber蓝色,
hexstringHTML/CSS颜色格式：
#••••••

}


Raphael.hsl(h,
s, l)⚓➭

HSL值转换为十六进制颜色。

参数

hnumber
色相
snumber
饱和度
lnumber
亮度

返回：string颜色的十六进制表示。


Raphael.hsl2rgb(h,
s, l)⚓➭

HSL值转换为RGB对象。

参数

hnumber
色相
snumber
饱和度
lnumber
亮度

返回：objectRGB对象，格式：

{

rnumber红色,
gnumber绿色,
bnumber蓝色,
hexstringHTML/CSS颜色格式：
#••••••

}


Raphael.is(o,
type)⚓➭

代替
typeof
操作符。

参数

o...
任何对象或基本类型变量
typestring
类型，即“string”，“function”，“number”等名称

返回：boolean指定值是指定的类型


Raphael.isBBoxIntersect(bbox1,
bbox2)⚓➭

返回
true
，如果两个边界框相交

参数

bbox1string
第一个边界框
bbox2string
第二个边界框

返回：boolean
true
，如果它们相交


Raphael.isPointInsideBBox(bbox,
x, y)⚓➭

返回
true
，如果给定的点在边界框内。

参数

bboxstring
边界框
xstring
点的x坐标
ystring
点的y坐标

返回：boolean
true
，如果点在边界框内


Raphael.isPointInsidePath(path,
x, y)⚓➭

返回
true
，如果指定的点在给定的封闭路径内。

参数

路径string
路径字符串
xnumber
点的x坐标
ynumber
点的y坐标

Returns:booleantrue，如果点在闭合路径内


Raphael.mapPath(path,
matrix)⚓➭

用指定矩阵变换路径

参数

pathstring
路径字符串
matrixobject
请参照：矩阵

返回：string经过变换的路径字符串


Raphael.matrix(a,
b, c, d, e, f)⚓➭

用指定的参数生成矩阵

参数

anumber

bnumber

cnumber

dnumber

enumber

fnumber

返回：object矩阵


Raphael.ninja()⚓➭

如果你不想保留Raphael的痕迹（Raphael只创建一个全局变量
Raphael
），可使用
ninja
方法。请注意，在这种情况下，插件可能会停止工作，因为它们依赖全局变量的存在。

返回：objectRaphael对象

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">(<span style="color: rgb(233, 223, 143);">function</span> (local_raphael) {
<span style="color: rgb(233, 223, 143);">var</span> paper<span class="s" style="color: rgb(231, 190, 97);"> = </span>local_raphael(<span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">10</span>, <span class="d" style="color: rgb(207, 106, 76);">320</span>, <span class="d" style="color: rgb(207, 106, 76);">200</span>);
…
})(Raphael.ninja());
</code>



Raphael.parsePathString(pathString)⚓➭

将指定路径字符串解析成一个数组，其中的元素是路径段数组。

参数

pathStringstringarray
路径字符串或路径段数组（在后一种情况下，将马上返回）

返回：array路径段数组。


Raphael.parseTransformString(TString)⚓➭

解析指定路径字符串为变换数组。

参数

TStringstringarray
变换字符串或变换数组（在后一种情况下，将马上返回）

返回：array变换数组。


Raphael.path2curve(pathString)⚓➭

将指定路径转换为新路径，新路径的所有片段都是三次贝赛尔曲线。

参数

pathStringstringarray
路径字符串或路径段数组

返回：array路径段数组


Raphael.pathBBox(path)⚓➭

返回指定路径的边界框

参数

pathstring
路径字符串

返回：object边界框

{

x:number框左上角的x坐标
y:number框左上角的y坐标
x2:number框右下角的x坐标
y2:number框右下角的y坐标
width:number框的宽度
height:number框的高度

}


Raphael.pathIntersection(path1,
path2)⚓➭

查找两条路径的交点

参数

path1string
路径字符串
path2string
路径字符串

Returns:array交点

[
{

x:number点的x坐标
y:number点的y坐标
t1:numberpath1部分路径段的t值
t2:numberpath2部分路径段的t值
segment1:numberpath1部分路径段的顺序
segment2:numberpath2部分路径段的顺序
bez1:arraypath1部分路径段的贝赛尔曲线，表示为8个坐标
bez2:arraypath2部分路径段的贝赛尔曲线，表示为8个坐标

}
]


Raphael.pathToRelative(pathString)⚓➭

将路径转换为相对形式

参数

pathStringstringarray
路径字符串或路径段数组

返回：array路径段数组组成的数组


Raphael.rad(deg)⚓➭

角度转弧度

参数

degnumber
角度

Returns:number弧度值。


Raphael.registerFont(font)⚓➭

给Raphael字体注册指定字体。应当作为Cufón字体文件的内部调用。返回原来的参数，所以它可以链式操作。
关于Cufón如何从TTF，OTF等转换字体形式到JavaScript文件

参数

fontobject
注册的字体

返回：object传入的字体

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">Cufon.registerFont(Raphael.registerFont({…}));
</code>



Raphael.rgb(r,
g, b)⚓➭

将RGB值转换为十六进制颜色。

参数

rnumber
红色
gnumber
绿色
bnumber
蓝色

返回：string颜色的十六进制表示。


Raphael.rgb2hsb(r,
g, b)⚓➭

将RGB值转换为HSB对象。

参数

rnumber
红色
gnumber
绿色
bnumber
蓝色

返回：objectHSB对象，格式：

{

hnumber色相
snumber饱和度
bnumber明度

}


Raphael.rgb2hsl(r,
g, b)⚓➭

将RGB值转换为HSL对象。

参数

rnumber
红色
gnumber
绿色
bnumber
蓝色

返回objectHSL对象，格式：

{

hnumber色相
snumber饱和度
lnumber亮度

}


Raphael.setWindow(newwin)⚓➭

需要在
<iframe>
绘制时使用。切换窗口为iframe。

参数

newwin窗口
新的窗口对象


Raphael.snapTo(values,
value, [tolerance])⚓➭

将给定值对齐到指定网格。

参数

valuesarraynumber
指定值的数组或网格的梯级
valuenumber
要调整的值
tolerancenumber
对齐的阈值默认值是
10
。

返回：数量经过调整的值。


Raphael.st⚓➭

object

你可以为元素和集合添加自己的方法。为给元素添加的每个方法写一个集合方法是明智的，你就可以在集合上调用同样的方法。请参照：Raphael.el 。

用法
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">Raphael.el.red<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> () {
<span style="color: rgb(233, 223, 143);">this</span>.attr({fill: <span style="color: rgb(139, 153, 103);">"#f00"</span>});
};
Raphael.st.red<span class="s" style="color: rgb(231, 190, 97);"> = </span><span style="color: rgb(233, 223, 143);">function</span> () {
<span style="color: rgb(233, 223, 143);">this</span>.forEach(<span style="color: rgb(233, 223, 143);">function</span> (el) {
el.red();
});
};
<span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 使用</span>
paper.set(paper.circle(<span class="d" style="color: rgb(207, 106, 76);">100</span>, <span class="d" style="color: rgb(207, 106, 76);">100</span>, <span class="d" style="color: rgb(207, 106, 76);">20</span>), paper.circle(<span class="d" style="color: rgb(207, 106, 76);">110</span>, <span class="d" style="color: rgb(207, 106, 76);">100</span>, <span class="d" style="color: rgb(207, 106, 76);">20</span>)).red();
</code>



Raphael.svg⚓➭

布尔

如果浏览器支持SVG则为
true
。


Raphael.toMatrix(path,
transform)⚓➭

返回指定路径所应用的变换矩阵

参数

pathstring
路径字符串
transformstringarray
变换字符串

返回：object矩阵


Raphael.transformPath(path,
transform)⚓➭

返回指定路径经过指定变换后的路径

参数

pathstring
路径字符串
transformstringarray
变换字符串

返回：string路径


Raphael.type⚓➭

string

可以是“SVG”，“VML”或为空，依赖于浏览器的支持。


Raphael.vml⚓➭

布尔

true
，如果浏览器支持VML。


集合⚓


set.clear() ⚓ ➭

移除集合中的全部元素


Set.exclude(element)⚓➭

从集合中删除指定元素

参数

elementobject
要删除的元素

Returns:boolean
true
，如果对象存在并且 已经被删除


Set.forEach(callback,
thisArg)⚓➭

为集合中的每个元素执行指定函数。

如果函数返回
false
则停止循环运行。

参数

callbackfunction
回调函数
thisArgobject
回调函数的环境

返回：对象集合对象


Set.pop()⚓➭

删除最后一个元素并返回它。

返回：object元素


Set.push()⚓➭

加入一个元素

返回：object原始元素


Set.splice(index,
count, [insertion…])⚓➭

从集合中删除指定元素

参数

indexnumber
开始删除的位置
countnumber
删除个数
insertion…object
要在删除位置插入的元素

Returns:object被删除的元素


eve(name,
scope, varargs)⚓⚓

使用指定的
name
、作用域和参数触发事件。

参数

namestring
事件名称，点（
.
）或斜线（
/
）分隔
scopeobject
事件处理程序的环境
varargs...
其余的参数将被发送到事件处理程序

Returns:object监听器返回值组成的数组


eve.listeners(name)⚓➭

内部方法，返回监听指定
name
事件的回调函数组成的数组。

参数

namestring
事件名称，点（
.
）或斜线（
/
）分隔

返回：array事件处理程序的数组


eve.nt([subname])⚓➭

在事件处理程序内使用，可以获取事件的实际名称。

参数

subnamestring
事件的子名称

返回：string名称的事件，如果没有指定
subname


或

返回：boolean
true
，如果当前事件的名称中包含
subname



eve.off(name,
f)⚓➭

从指定名称的事件监听器列表中删除指定的函数。

参数

namestring
事件名称，点（
.
）或斜线（
/
）分隔，可以用通配符
ffunction
事件处理函数


eve.on(name,
f)⚓➭

为给定的名称绑定一个事件处理程序。可以在名称中使用通配符“ 
*
“：
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">eve.on(<span style="color: rgb(139, 153, 103);">"*.under.*"</span>, f);
eve(<span style="color: rgb(139, 153, 103);">"mouse.under.floor"</span>); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">//  触发 f</span>
</code>


使用eve触发监听。

参数

namestring
事件名称，点（
.
）或斜线（
/
）分隔，可以用通配符
ffunction
事件处理函数

返回：function返回的函数接受一个数字参数，表示处理程序的z-index。这是一个可选功能，只有当你需要使用，以确保处理程序的一些子集被设置为特定的调用顺序，而不使用指派顺序。

例如：
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">eve.on(<span style="color: rgb(139, 153, 103);">"mouse"</span>, eat)(<span class="d" style="color: rgb(207, 106, 76);">2</span>);
eve.on(<span style="color: rgb(139, 153, 103);">"mouse"</span>, scream);
eve.on(<span style="color: rgb(139, 153, 103);">"mouse"</span>, <span style="color: rgb(233, 223, 143);">catch</span>)(<span class="d" style="color: rgb(207, 106, 76);">1</span>);
</code>


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


eve.once(name,
f)⚓➭

为给定的名称绑定一个一次性事件处理程序。只运行一次，然后解除本身。
<code style="font-family: Menlo, Consolas, Monaco, 'Lucida Console', monospace;">eve.once(<span style="color: rgb(139, 153, 103);">"login"</span>, f);
eve(<span style="color: rgb(139, 153, 103);">"login"</span>); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 触发 f</span>
eve(<span style="color: rgb(139, 153, 103);">"login"</span>); <span class="c" style="color: rgb(153, 153, 153); font-style: italic;">// 没有监听</span>
</code>


使用eve触发监听。

参数

namestring
事件名称，点（
.
）或斜线（
/
）分隔，可以用通配符
ffunction
事件处理函数

返回：function与eve.on返回的函数类似


eve.stop()⚓➭

用于在事件处理程序内停止事件，防止触发任何后续监听器。


eve.unbind() ⚓ ➭

请参照：eve.off


eve.version⚓➭

string

当前库的版本
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端 文档 api
相关文章推荐
新的分享
章节导航