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

最新推荐文章于 2024-04-18 09:43:47 发布
最新推荐文章于 2024-04-18 09:43:47 发布
阅读量2.2k 收藏
点赞数
文章标签： 前端 文档 api
本人技术刚开始研究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

关于本文翻译

前端工程师，王子墨

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

我们通常会记住创始者、发明者，比如哥伦布，乔布斯，他们的名字在人类历史中留下了很深的印记。
再如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)⚓➭

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

参数

delay
number
动画延迟执行的时间，单位：毫秒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)⚓➭

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

参数

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

返回：object新的动画对象

元素 Element⚓

Element.animate(…)⚓➭

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

参数

params
object
元素的最终属性，请参照： Element.attr
ms
number
动画持续时间，单位：毫秒ms
easing
string
缓动类型。接受 Raphael.easing_formulas其中之一，或CSS格式： cubic-bezier(XX, XX, XX, XX)
callback
function
回调函数。动画结束时将被调用。

或

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

返回：object原始元素

Element.animateWith(…)⚓➭

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

参数

el
object
要同步的元素
anim
object
要同步的动画
params
object
元素的最终属性，请参照： Element.attr
ms
number
动画持续的时间，单位毫秒ms
easing
string
缓动类型。接受 Raphael.easing_formulas或CSS格式：  cubic‐bezier(XX, XX, XX, XX)
callback
function
回调函数。动画结束时将被调用。

或

element
object
要同步的元素
anim
object
要同步的动画
animation
object
动画对象，请参照： Raphael.animation

返回：object原始元素

Element.attr(…)⚓➭

设置元素的属性。

参数

attrName
string
属性名称
value
string
值

或

params
object
名称/值对

或

attrName
string
属性的名称

或

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

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

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

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

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

可能的参数

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

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

参数

handler
function
事件处理函数

返回：object元素

Element.clone()⚓➭

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

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

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

参数

key
string
数据的键
value
any
数据的值

返回：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事件的处理程序。

参数

handler
function
事件处理函数

返回：object元素

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

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

参数

onmove
function
移动处理函数
onstart
function
拖拽开始的处理函数
onend
function
拖拽结束处理函数
mcontext
object
移动处理函数环境（上下文）
scontext
object
拖拽开始处理函数环境
econtext
object
拖拽结束处理函数环境

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

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

  1. xnumber鼠标的 x轴位置
  2. ynumber鼠标的 y轴位置
  3. eventobjectDOM事件对象

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

  1. dxnumber相对起始点的x位移
  2. dynumber相对起始点的y位移
  3. xnumber鼠标的 x轴位置
  4. ynumber鼠标的 y轴位置
  5. eventobjectDOM事件对象

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

  1. eventobjectDOM事件对象

返回：object元素

Element.getBBox(isWithoutTransform)⚓➭

返回指定元素的边界框

参数

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

返回：object边界框对象：

  1. {
    1. x:number左上角 x
    2. y:number左上角y
    3. x2:number右下角 x
    4. y2:number右下角 y
    5. width:number宽
    6. height:number高
    }

Element.getPointAtLength(length)⚓➭

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

参数

length
number
 

返回：object名称：值

  1. {
    1. x:numberx 坐标
    2. y:numbery 坐标
    3. alpha:number导数（切线）的角度
    }

Element.getSubpath(from, to)⚓➭

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

参数

from
number
片段开始位置
to
number
片段结束的位置

返回：string段的路径字符串

Element.getTotalLength()⚓➭

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

返回：number长度。

Element.glow([glow])⚓➭

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

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

参数

glow
object
参数对象（所有属性可选）：
  1. {
    1. widthnumber光晕大小，默认是10
    2. fillboolean是否填充，默认是false
    3. opacitynumber透明度，默认是0.5
    4. offsetxnumber横向偏移，默认为0
    5. offsetynumber垂直偏移，默认为0
    6. colorstring发光颜色，默认为black
  2. }

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

Element.hide()⚓➭

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

返回：object元素

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

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

参数

f_in
function
悬停进入处理句柄
f_out
function
悬停离开处理句柄
icontext
object
悬停进入处理句柄环境
ocontext
object
悬停离开处理句柄环境

返回：object元素

Element.id⚓➭

数字

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

Element.insertAfter() ⚓ ➭

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

返回：object元素

Element.insertBefore() ⚓ ➭

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

返回：object元素

Element.isPointInside(x, y)⚓➭

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

参数

x
number
点的x坐标
y
number
点的y坐标

返回：booleantrue 如果点在形状内

Element.matrix⚓➭

object

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

Element.mousedown(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.mousemove(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.mouseout(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.mouseover(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.mouseup(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：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 ）。

参数

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

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])⚓➭

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

参数

anim
object
动画对象

返回：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])⚓➭

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

参数

key
string
键

返回：object元素

Element.resume([anim])⚓➭

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

参数

anim
object
动画对象

返回：object原始元素

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

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

参数

deg
number
角度
cx
number
旋转中心的x坐标
cy
number
旋转中心的y坐标

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

返回：object元素

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

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

参数

sx
number
水平缩放值
sy
number
垂直缩放值
cx
number
缩放中心的x坐标
cy
number
缩放中心的y坐标

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

返回：object元素

Element.setTime(anim, value)⚓➭

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

参数

anim
object
动画对象
value
number
动画持续的毫秒数

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

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

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

Element.show()⚓➭

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

返回：object元素

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

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

参数

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

返回：number状态

或

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

  1. {
    1. anim:object动画对象
    2. status:number状态
  2. }

或

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

Element.stop([anim])⚓➭

停止执行动画。

参数

anim
object
动画对象

返回：object原始元素

Element.toBack()⚓➭

将元素向下移动。

返回：object元素

Element.toFront()⚓➭

将元素向上移动。

返回：object元素

Element.touchcancel(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.touchend(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.touchmove(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.touchstart(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：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>

参数

tstr
string
变换字符串

如果未指定 tstr

返回：string转换字符串

else

返回：object元素

Element.translate(dx, dy)⚓➭

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

参数

dx
number
水平位移
dy
number
垂直位移

返回：object元素

Element.unclick(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.undblclick(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.undrag()⚓➭

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

Element.unhover(f_in, f_out)⚓➭

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

参数

f_in
function
开始悬停的处理程序
f_out
function
结束悬停的处理程序

返回：object元素

Element.unmousedown(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.unmousemove(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.unmouseout(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.unmouseover(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.unmouseup(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.untouchcancel(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.untouchend(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.untouchmove(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

Element.untouchstart(handler)⚓➭

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

参数

handler
function
事件处理函数

返回：object元素

矩阵⚓

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

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

参数

a
number
 
b
number
 
c
number
 
d
number
 
e
number
 
f
number
 
matrix
object
矩阵

Matrix.clone()⚓➭

返回矩阵的副本

返回：object矩阵

Matrix.invert()⚓➭

返回矩阵的反转版本

返回：object矩阵

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

旋转矩阵

参数

a
number
 
x
number
 
y
number
 

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

缩放矩阵

参数

x
number
 
y
number
 
cx
number
 
cy
number
 

Matrix.split() ⚓ ➭

将矩阵分割成简单的变换

返回：object格式：

  1. dxnumber水平平移
  2. dynumber垂直平移y
  3. scalexnumber水平缩放
  4. scaleynumber垂直缩放
  5. shearnumber剪切
  6. rotatenumber旋转角度
  7. isSimpleboolean是否可以简单变换代替

Matrix.toTransformString()⚓➭

返回转换字符串

返回：string转换字符串

Matrix.translate(x, y)⚓➭

平移矩阵

参数

x
number
 
y
number
 

Matrix.x(x, y)⚓➭

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

参数

x
number
 
y
number
 

返回：数字x

Matrix.y(x, y)⚓➭

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

参数

x
number
 
y
number
 

返回：数字y

画布⚓

Paper.add(json)⚓➭

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

参数

json
array
 

返回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)⚓➭

绘制一个圆。

参数

x
number
圆心的x坐标
y
number
圆心的y坐标
r
number
半径,半径距离

返回：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)⚓➭

绘制一个椭圆。

参数

x
number
该中心的x坐标
y
number
y坐标的中心
rx
number
水平半径
ry
number
垂直半径

返回：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则会停止循环。

参数

callback
function
函数运行
thisArg
object
回调函数的环境

返回：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的元素。

参数

id
number
ID

返回：objectRaphael元素对象

Paper.getElementByPoint(x, y)⚓➭

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

返回：objectRaphael元素对象

参数

x
number
相对窗口左上角的x坐标
y
number
相对窗口左上角的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)⚓➭

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

参数

x
number
点的x坐标
y
number
点的y坐标

返回：object集合

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

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

参数

family
string
字体名称或其中的任何单词
weight
string
字体粗细
style
string
字体样式
stretch
string
字体变形

返回：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)⚓➭

嵌入一张图像。

参数

src
string
源图像的URI
x
number
x坐标
y
number
y坐标
width
number
图像的宽度
height
number
图像的高度

返回：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])⚓➭

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

参数

pathString
string
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])⚓➭

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

参数

x
number
x坐标
y
number
y坐标
string
string
显示文本
font
object
字体对象，请参照： Paper.getFont
size
number
字体大小，默认是 16
origin
string
文本垂直对齐方式 "baseline"或 "middle" ，默认为 "middle"
letter_spacing
number
范围 -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])⚓➭

绘制一个矩形。

参数

x
number
左上角的x坐标
y
number
左上角的y坐标
width
number
宽度
height
number
高度
r
number
圆角半径，默认为​​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)⚓➭

改变画布尺寸

参数

width
number
新的画布宽度
height
number
新的画布高度

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)⚓➭

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

参数

x
number
新x坐标，默认为 0
y
number
新y坐标，默认为 0
w
number
新的画布宽度
h
number
新的画布高度
適合
boolean
设置 true，如果你想要图形适应新的边界框

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

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

参数

x
number
x坐标
y
number
y坐标
text
string
文本字符串

返回：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（...） ⚓ ⚓

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

参数

container
HTML元素string
DOM元素或它的ID，这将是绘图表面的父级节点
width
number
 
height
number
 
callback
function
回调函数，新创建的画布将成为该函数的环境

或

x
number
 
y
number
 
width
number
 
height
number
 
callback
function
回调函数，新创建的画布将成为该函数的环境

或

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

或

onReadyCallback
function
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])⚓➭

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

参数

x1
number
第一点的x坐标
y1
number
第一点的y坐标
x2
number
第二点的x坐标
y2
number
第二点的y坐标
x3
number
第三点的x坐标
y3
number
第三点的y坐标

返回：number度角

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

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

参数

params
object
元素的最终属性，请参照： Element.attr
ms
number
动画持续的时间，单位毫秒ms
easing
string
缓动类型。接受 Raphael.easing_formulas其中之一，或CSS格式：  cubic-bezier(XX, XX, XX, XX)
callback
function
回调函数。动画结束时将被调用。

返回：object动画

Raphael.bezierBBox(…)⚓➭

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

参数

p1x
number
第一点的x坐标
p1y
number
第一点的y坐标
c1x
number
第一个锚点的x坐标
c1y
number
第一个锚点的y坐标
c2x
number
第二个锚点的x坐标
c2y
number
第二个锚点的y坐标
p2x
number
第二点的x坐标
p2y
number
第二点的y坐标

或

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

返回：object点，格式：

  1. {
    1. min: {
      1. x:number最左边点的x坐标
      2. y:number最上边点的y坐标
    2. }
    3. max: {
      1. x:number最右边点的x坐标
      2. y:number最下边点的y坐标
    4. }
  2. }

Raphael.color(clr)⚓➭

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

参数

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

返回：objectRGB 和 HSB 组合对象：

  1. {
    1. rnumber红色,
    2. gnumber绿色,
    3. bnumber蓝色,
    4. hexstring颜色的 HTML/CSS 格式：#••••••,
    5. errorbooleantrue，如果无法解析字符串,
    6. h字符串色相,
    7. s字符串饱和度,
    8. v字符串色调,
    9. l字符串亮度
    }

Raphael.createUUID()⚓➭

返回RFC4122，第4版ID

Raphael.deg(deg)⚓➭

弧度转角度

参数

deg
number
弧度值

返回：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)⚓➭

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

参数

p1x
number
第一点的x坐标
p1y
number
第一点的y坐标
c1x
number
第一个锚点的x坐标
c1y
number
第一个锚点的y坐标
c2x
number
第二个锚点的x坐标
c2y
number
第二个锚点的y坐标
p2x
number
第二点的x坐标
p2y
number
第二点的y坐标
ţ
number
曲线上的位置（0 .. 1）

返回：object点，格式：

  1. {
    1. x:number点的x坐标
    2. y:number点的y坐标
    3. m: {
      1. x:number左锚的x坐标
      2. y:number左锚的y坐标
    4. }
    5. n: {
      1. x:number右锚的x坐标
      2. y:number右锚的y坐标
    6. }
    7. start: {
      1. x:number曲线起点的x坐标
      2. y:number曲线起点的y坐标
    8. }
    9. end: {
      1. x:number曲线终点的x坐标
      2. y:number曲线终点的y坐标
    10. }
    11. alpha:number曲线上该点导数（切线）的角度
  2. }

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>} “结构替换为相应的参数。

参数

token
string
格式字符串
…
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>} “结构替换为相应的参数。

参数

token
string
格式
json
object
对象，其属性将被用来做替换

返回：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)⚓➭

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

参数

path
string
SVG路径字符串
length
number
 

返回：object点：

  1. {
    1. x:numberx 坐标
    2. y:numbery 坐标
    3. alpha:number导数（切线）的角度
  2. }

Raphael.getRGB(colour)⚓➭

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

参数

colour
string
颜色字符串，格式：
  • 颜色的名称（“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对象，格式：

  1. {
    1. rnumber红色,
    2. gnumber绿色,
    3. bnumber蓝色
    4. hexstring颜色的 HTML/CSS 格式：#••••••,
    5. errorbooleantrue，如果不能解析
  2. }

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

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

参数

path
string
SVG路径字符串
from
number
片段开始位置
to
number
片段结束的位置

返回：string段的路径字符串

Raphael.getTotalLength(path)⚓➭

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

参数

path
string
SVG的路径字符串。

返回：number长度

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

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

参数

h
number
色相
s
number
饱和度
b
number
色调或明度

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

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

HSB值转换为RGB对象。

参数

h
number
色相
s
number
饱和度
v
number
色调或明度

返回：objectRGB对象，格式：

  1. {
    1. rnumber红色,
    2. gnumber绿色,
    3. bnumber蓝色,
    4. hexstringHTML/CSS颜色格式： #••••••
  2. }

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

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

参数

h
number
色相
s
number
饱和度
l
number
亮度

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

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

HSL值转换为RGB对象。

参数

h
number
色相
s
number
饱和度
l
number
亮度

返回：objectRGB对象，格式：

  1. {
    1. rnumber红色,
    2. gnumber绿色,
    3. bnumber蓝色,
    4. hexstringHTML/CSS颜色格式： #••••••
  2. }

Raphael.is(o, type)⚓➭

代替typeof操作符。

参数

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

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

Raphael.isBBoxIntersect(bbox1, bbox2)⚓➭

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

参数

bbox1
string
第一个边界框
bbox2
string
第二个边界框

返回：booleantrue，如果它们相交

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

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

参数

bbox
string
边界框
x
string
点的x坐标
y
string
点的y坐标

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

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

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

参数

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

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

Raphael.mapPath(path, matrix)⚓➭

用指定矩阵变换路径

参数

path
string
路径字符串
matrix
object
请参照： 矩阵

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

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

用指定的参数生成矩阵

参数

  • a
    number
     
  • b
    number
     
  • c
    number
     
  • d
    number
     
  • e
    number
     
  • f
    number
     

  • 返回：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)⚓➭

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

参数

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

返回：array路径段数组。

Raphael.parseTransformString(TString)⚓➭

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

参数

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

返回：array变换数组。

Raphael.path2curve(pathString)⚓➭

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

参数

pathString
stringarray
路径字符串或路径段数组

返回：array路径段数组

Raphael.pathBBox(path)⚓➭

返回指定路径的边界框

参数

path
string
路径字符串

返回：object边界框

  1. {
    1. x:number框左上角的x坐标
    2. y:number框左上角的y坐标
    3. x2:number框右下角的x坐标
    4. y2:number框右下角的y坐标
    5. width:number框的宽度
    6. height:number框的高度
  2. }

Raphael.pathIntersection(path1, path2)⚓➭

查找两条路径的交点

参数

path1
string
路径字符串
path2
string
路径字符串

Returns:array交点

  1. [
  2. {
    1. x:number点的x坐标
    2. y:number点的y坐标
    3. t1:numberpath1部分路径段的t值
    4. t2:numberpath2部分路径段的t值
    5. segment1:numberpath1部分路径段的顺序
    6. segment2:numberpath2部分路径段的顺序
    7. bez1:arraypath1部分路径段的贝赛尔曲线，表示为8个坐标
    8. bez2:arraypath2部分路径段的贝赛尔曲线，表示为8个坐标
  3. }
  4. ]

Raphael.pathToRelative(pathString)⚓➭

将路径转换为相对形式

参数

pathString
stringarray
路径字符串或路径段数组

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

Raphael.rad(deg)⚓➭

角度转弧度

参数

deg
number
角度

Returns:number弧度值。

Raphael.registerFont(font)⚓➭

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

关于Cufón如何从TTF，OTF等转换字体形式到JavaScript文件

参数

font
object
注册的字体

返回：object传入的字体

用法

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

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

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

参数

r
number
红色
g
number
绿色
b
number
蓝色

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

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

将RGB值转换为HSB对象。

参数

r
number
红色
g
number
绿色
b
number
蓝色

返回：objectHSB对象，格式：

  1. {
    1. hnumber色相
    2. snumber饱和度
    3. bnumber明度
  2. }

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

将RGB值转换为HSL对象。

参数

r
number
红色
g
number
绿色
b
number
蓝色

返回objectHSL对象，格式：

  1. {
    1. hnumber色相
    2. snumber饱和度
    3. lnumber亮度
  2. }

Raphael.setWindow(newwin)⚓➭

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

参数

newwin
窗口
新的窗口对象

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

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

参数

values
arraynumber
指定值的数组或网格的梯级
value
number
要调整的值
tolerance
number
对齐的阈值默认值是 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)⚓➭

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

参数

path
string
路径字符串
transform
stringarray
变换字符串

返回：object矩阵

Raphael.transformPath(path, transform)⚓➭

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

参数

path
string
路径字符串
transform
stringarray
变换字符串

返回：string路径

Raphael.type⚓➭

string

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

Raphael.vml⚓➭

布尔

true，如果浏览器支持VML。

集合⚓

set.clear() ⚓ ➭

移除集合中的全部元素

Set.exclude(element)⚓➭

从集合中删除指定元素

参数

element
object
要删除的元素

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

Set.forEach(callback, thisArg)⚓➭

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

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

参数

callback
function
回调函数
thisArg
object
回调函数的环境

返回：对象集合对象

Set.pop()⚓➭

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

返回：object元素

Set.push()⚓➭

加入一个元素

返回：object原始元素

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

从集合中删除指定元素

参数

index
number
开始删除的位置
count
number
删除个数
insertion…
object
要在删除位置插入的元素

Returns:object被删除的元素

eve(name, scope, varargs)⚓⚓

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

参数

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

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

eve.listeners(name)⚓➭

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

参数

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

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

eve.nt([subname])⚓➭

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

参数

subname
string
事件的子名称

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

或

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

eve.off(name, f)⚓➭

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

参数

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

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触发监听。

参数

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

返回：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触发监听。

参数

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

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

eve.stop()⚓➭

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

eve.unbind() ⚓ ➭

请参照：eve.off

eve.version⚓➭

string

当前库的版本

qq_15704535
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
raphaeljs chm手册
10-26
难得一见的raphaeljs chm手册 绝对超值！
raphael中文帮助文档(API).chm
11-26
raphael中文帮助文档（API）chm文档，因为在网上没有找到好的离线版的，都是在线的，所以自己根据在线的生成了一个chm帮助文档，下载了，绝对不会让你失望。
raphael.js矢量绘图
学如逆水行舟，不进则退
05-26 3200
官方介绍： Raphael是由Dmitry Baranovskiy开发的小型Javascript类库，它可以让你在web上很容易地使用矢量图形。如果你需要制作自定义图表或图像裁剪旋转控件，它也可以让你更方便、简单地进行实现。Raphael使用W3C推荐的SVG以及VML两种矢量标记语言来实现绘图，这意味着，你创建的图形对象都是DOM元素，你可以给它们绑定、移除javascript事件。Rapha
raphael中文API
03-31
本文仅对官网API进行了翻译，是英语差参考者的福利
Raphaël Raphael.js 中文帮助文档，SVG、VML、Javascript矢量库(Raphael Reference API)
u012063756的专栏
09-10 2455
最近迷恋网页矢量图形处理方案，仔细研究了一个很优秀的 Javascript 矢量库，很是强大。 虽然这个库很强大，但是他几乎默默无闻，而且唯一的资料，就是原作者写的英文API。 最近加班加点，终于把原版英文帮助文档翻译为中文了。 Raphael Javascript 中文文档、Demos：http://www.dszai.com/gao/201309057.html   Raphae
Raphaël—JavaScript Library
anjichan4261的博客
04-16 92
Raphaël--一个小巧但功能强大的javascript画图库。 Main Function Raphael Creates a canvas object on wh...
Raphaël 中文帮助文档(API)
weixin_34149796的博客
01-22 136
http://html5css3webapp.com/raphaelApi.htm
Raphaël:JavaScript 矢量库-开源
05-29
Raphaël 是一个小型 JavaScript 库，它可以简化您在网络上使用矢量图形的工作。 例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，您可以使用此库轻松轻松地实现它。 Raphaël ['ræfeɪəl] 使用 SVG W3C...
raphael-boolean:与Raphaël执行布尔运算
05-05
raphael.boolean.js-使用Raphaël执行布尔运算 该插件为javascript矢量库Raphaël（ ）提供了布尔操作。 您可以使用单个元素（而不是集合）来执行 联合[A + B | A或B] 差异[A-B | A NOT B] 交集[A * B | A和B] ...
Raphaël—JavaScript Library 绘制矢量
07-26
NULL 博文链接：https://justcoding.iteye.com/blog/665253
Raphaël Varane New Tab Theme-crx插件
03-14
RaphaëlVarane新标签页扩展程序为您的Chrome浏览器带来了新外观。 安装RaphaëlVarane New Tab Theme，并欣赏RaphaëlVarane的精选高清图片。 它带有一些很酷的属性，这些属性可以改善您的“新标签页”体验，例如：...
Raphaël 用法 An Introduction to the Raphael JS Library
04-09
NULL 博文链接：https://justcoding.iteye.com/blog/1618691
前端如何单独做虚拟奖金池？
weixin_43968658的博客
04-13 893
【代码】前端如何单独做虚拟奖金池？
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
最新发布
qq_43641110的博客
04-18 571
​​​​​​​。
TS基础2-常用类型
qq_40147756的博客
04-12 490
ts 中常用类型和举例说明。
博客永久链接与计数
靖待的CSDN博客
04-12 858
工欲善其事，必先利其器。对自己的博客不好用不满意很久了，但是这几年太懒。想趁着放假弄一下吧，发现几年没动，版本升级后很多东西变了，折腾了一下午效果不太理想。先记录一下。
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 188
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
使用 Flask 构建一个简单的 Web 应用程序
PythonWeb实践
04-15 424
使用装饰器定义一个路由。当用户访问应用程序的根 URL（例如：:8000/）时，将调用函数。在这个函数中，我们使用函数渲染名为 "home.html" 的 HTML 模板，并将其作为响应返回给用户。
Raphaël 中文帮助文档(API)
06-02
您好，Raphaël 是一个基于 JavaScript 的矢量图形库，主要用于在网页上创建交互式的矢量图形。以下是Raphaël的中文帮助文档（API）链接： https://www.html5tricks.com/demo/html5-canvas-raphael/api_zh.html 希望这个链接对您有所帮助。如果您还有其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值