根据已存在的动画,创建一个延迟动画的拷贝。
参数
返回:object修改后的新对象
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
circle1.animate(anim); // 立即执行给定的 animation
circle2.animate(anim.delay(500)); // 延迟 500 ms 执行动画
根据已存在的动画,创建一个重复执行多少次的拷贝。
参数
Infinity
返回:object改变之后的 新的 Animation 对象
在给定的元素上创建并开始动画.
参数
cubic‐bezier(XX, XX, XX, XX)
或者
返回:object原生的(original) element 元素
Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.
参数
cubic‐bezier(XX, XX, XX, XX)
或者
返回:object原生的(original) element 元素
设置元素的属性.
参数
或者
或者
或者
返回:object如果传入 attrsName & value, 或者传入的是 params, 则返回 Element .
返回:...如果只传入 attrsName,则返回结果是对应的属性值.
返回:array如果传入 attrsNames, 则返回结果是对应这些name的属性值组成的数组.
返回:object如果什么参数也不传,则返回所有 attributes 组成的对象.
可用参数
关于这些参数的详细说明,请访问 SVG specification.
<type>[-<width>[-<length>]]
.
classic
, block
, open
, oval
, diamond
, none
,
wide
, narrow
, midium
,
long
, short
, midium
.
-
”, “.
”, “-.
”,
“-..
”, “.
”, “-
”,
“--
”, “- .
”, “--.
”,
“--..
”]
butt
”, “square
”, “round
”]
bevel
”, “round
”, “miter
”]
\n
start
”, “middle
”, “end
”], 默认值为 “middle
”
渐变(Gradients)
线性渐变(Linear gradient)格式 :
“‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›
”,
例如 : “90-#fff-#000
” – 表示 90° 从白色渐变为黑色.
或者 : “0-#fff-#f00:20-#000
” – 表示 0°从白色渐变,中间通过红色(在 20%), 最好渐变为黑色.
径向渐变(radial gradient):
“r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›
”,
例如 : “r#fff-#000
” – 表示从白色渐变为黑色
或者 : “r(0.25, 0.75)#fff-#000
” – 以 0.25, 0.75 为焦点,从纯白渐变到纯黑.
焦点的坐标(Focus point coordinates)范围是 0..1. Radial gradients 只可以用于圆形或者椭圆.
Path 字符串
请参考 SVG documentation regarding path string. Raphaël 对其完全支持.
颜色解析
red
”, “green
”, “cornflowerblue
”, etc)
#000
”, “#fc0
”, etc)
#000000
”, “#bd2300
”)
rgb(200, 100, 0)
”)
rgb(100%, 175%, 0%)
”)
rgba(200, 100, 0, .5)
”)
rgba(100%, 175%, 0%, 50%)
”)
hsb(0.5, 0.25, 1)
”)
hsl(240deg, 1, .5)
”,
或者,这种形式: “hsl(240°, 1, .5)
”
返回:object克隆此元素
根据给定的key,添加或获取属性值. 另请参考 Element.removeData
参数
返回:objectElement
如果没有传入 value 参数,则返回对应的 value :
返回:anyvalue
用法
for (var i = 0, i < 5, i++) {
paper.circle(10 + 15 * i, 10, 10)
.attr({fill: "#000"})
.data("i", i)
.click(function () {
alert(this.data("i"));
});
}
为此元素添加拖动事件监听器.
参数
Additionaly following
drag
events will be triggered:
drag.start.<id>
on start,
drag.end.<id>
on end and
drag.move.<id>
on every move. When element will be dragged over another element
drag.over.<id>
will be fired as well.
Start event and start handler will be called in specified context or in context of the element with following parameters:
Move event and move handler will be called in specified context or in context of the element with following parameters:
End event and end handler will be called in specified context or in context of the element with following parameters:
返回:objectElement
返回该元素的边界框(bounding box)
参数
true
默认值为
false
.
返回:objectBounding box 对象,结构如下:
Return coordinates of the point located at the given length on the given path. 只有类型为 "path" 的元素才有效.
参数
返回:objectrepresentation of the point:
Return subpath of a given element from given length to given length. 只有类型为 "path" 的元素才有效.
参数
返回:stringpathstring for the segment
Returns length of the path in pixels. 只有类型为 "path" 的元素才有效.
返回:numberlength.
Return set of elements that create glow-like effect around given element. 请参考 Paper.set.
Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.
参数
10
false
0.5
0
0
black
返回:objectPaper.set of elements that represents glow
隐藏元素(invisible). 请参考 Element.show.
返回:objectElement
为该元素添加 事件处理器: hover 事件.
参数
返回:objectElement
元素的唯一ID. 主要用于对元素进行事件监听,
因为所有的事件都是采用这种格式触发的:
<module>.<action>.<id>
. 当然,在 Paper.getById 方法中也会用到.
将本元素插入到给定元素之后.
返回:objectElement
将本元素插入到给定元素之前.
返回:objectElement
判断给定的点是否在此元素形状之内(inside this element’s shape)
参数
返回:boolean
如果给定的点在此元素内则返回 true
持有(Keeps) Matrix 对象, 该对象代表了元素的偏转(transformation)
指向层次结构树中下一个元素.
Gives you a reference to the DOM object, so you can assign event handlers or just mess around. Note: Don’t mess with it.
用法
// draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(10, 10, 10);
c.node.onclick = function () {
c.attr("fill", "red");
};
Shortcut for assigning event handler for
drag.over.<id>
event, where id is id of the element (see Element.id).
参数
内部引用到用来绘制该对象的 “paper”. 主要供 plugins 或 element 扩展在使用.
用法
Raphael.el.cross = function () {
this.attr({fill: "red"});
this.paper.path("M10,10L50,50M50,10L10,50")
.attr({stroke: "red"});
}
暂停此元素的动画效果,并允许在稍后调用恢复方法(resume).
参数
返回:object原生的(original) element 元素
Reference to the previous element in the hierarchy.
Internal reference to Raphael object. In case it is not available.
用法
Raphael.el.red = function () {
var hsb = this.paper.raphael.rgb2hsb(this.attr("fill"));
hsb.h =
1;
this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex});
}
将此 element 从 paper 移除.
Removes value associated with an element by given key. If key is not provided, removes all the data of the element.
参数
返回:objectElement
已废弃的方法(Deprecated)! 建议使用 Element.transform 来进行旋转. Adds rotation by given angle around given point to the list of transformations of the element.
参数
If cx & cy aren’t specified centre of the shape is used as a point of rotation.
返回:objectElement
已废弃的方法(Deprecated)! 建议使用 Element.transform 来进行单个元素的缩放. Adds scale by given amount relative to given point to the list of transformations of the element.
参数
If cx & cy aren’t specified centre of the shape is used instead.
返回:objectElement
Sets the status of animation of the element in milliseconds. Similar to Element.status method.
参数
返回:object原生的(original) element 元素 if
value
is specified
Note, that during animation following events are triggered:
On each animation frame event
anim.frame.<id>
, on start
anim.start.<id>
and on end
anim.finish.<id>
.
让元素可见. 请参考 Element.hide.
返回:objectElement
Gets or sets the status of animation of the element.
参数
返回:numberstatus
或者
返回:arraystatus if
anim
is not specified. Array of objects in format:
或者
返回:object原生的(original) element 元素 if
value
is specified
停止此元素的动画效果.
参数
返回:object原生的(original) element 元素
将此元素移动到最底层/后面, 所有元素之后.
返回:objectElement
将此元素移动到最顶层/前面, 所有元素的上面.
返回:objectElement
Adds transformation to the element which is separate to other attributes,
i.e. translation doesn’t change
x
or
y
of the rectange. The format
of transformation string is similar to the path string syntax:
"t100,100r30,100,100s2,2,100,100r45s1.5"
Each letter is a command. There are four commands:
t
is for translate,
r
is for rotate,
s
is for
scale and
m
is for matrix.
There are also alternative “absolute” translation, rotation and scale:
T
,
R
and
S
. They will not take previous transformation into account. For example,
...T100,0
will always move element 100 px horisontally, while
...t100,0
could move it vertically if there is
r90
before. Just compare results of
r90t100,0
and
r90T100,0
.
So, the example line above could be read like “translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100; rotate 45° around centre; scale 1.5 times relative to centre”. As you can see rotate and scale commands have origin coordinates as optional parameters, the 默认值为 the centre point of the element. Matrix accepts six parameters.
用法
var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");
// or even wrap
el.transform("t50,50...t-50-50");
// to reset transformation call method with empty string
el.transform("");
// to get current value call it without parameters
console.log(el.transform());
参数
If tstr isn’t specified
返回:stringcurrent transformation string
else
返回:objectElement
已废弃的方法(Deprecated)! 建议使用 Element.transform 来进行平移. Adds translation by given amount to the list of transformations of the element.
参数
返回:objectElement
移除该元素的所有 drag 事件处理器.
移除该元素的 事件处理器: hover 事件.
参数
返回:objectElement
Adds given matrix to existing one.
参数
Returns copy of the matrix
返回:objectMatrix
Returns inverted version of the matrix
返回:objectMatrix
Rotates the matrix
参数
Scales the matrix
参数
Splits matrix into primitive transformations
返回:objectin format:
Return transform string that represents given matrix
返回:stringtransform string
Translate the matrix
参数
Return x coordinate for given point after transformation described by the matrix. 另请参考 Matrix.y
参数
返回:numberx
Return y coordinate for given point after transformation described by the matrix. 另请参考 Matrix.x
参数
返回:numbery
通过 JSON 数组引入元素, JSON对象形如
{type: type, <其他属性>}
参数
返回:object引入元素的结果集
用法
paper.add([
{
type: "circle",
cx: 10,
cy: 10,
r: 5
},
{
type: "rect",
x: 10,
y: 10,
width: 10,
height: 10,
fill: "#fc0"
}
]);
此引用指向 paper 中的底部元素
Paper.customAttributes 属性的缩写
绘制一个圆/圈(circle).
参数
返回:objectRaphaël element 对象, type 为 “circle”
用法
var c = paper.circle(50, 50, 40);
清空 paper, 比如, 移除所有元素.
如果你有多个特性参数,想用函数计算后的返回结果作为实际参数,则可以使用自定义特性(custom attributes)来实现:
用法
paper.customAttributes.hue = function (num) {
num = num %
1;
return {fill: "hsb(" + num + ", 0.75, 1)"};
};
// 自定义特性 “hue” 将会根据传入的 hue(色相)值
// 改变 fill 为固定的饱和度(saturation)与亮度(brightness) .
// 使用方法如下:
var c = paper.circle(10, 10, 10).attr({hue: .45});
// 也可以像下面这样用:
c.animate({hue: 1}, 1e3);
// 当然,也可以创建有多个参数(multiple parameters)的自定义特性
paper.customAttributes.hsb = function (h, s, b) {
return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1, 0, 0.5]}, 1e3);
绘制一个椭圆(ellipse).
参数
返回:objectRaphaël element 对象, type 为 “ellipse”
用法
var c = paper.ellipse(50, 50, 40, 20);
对 paper 上的每一个元素执行给定的回调函数
如果 callback 函数返回
false
则会退出迭代循环.
参数
返回:objectPaper 对象
用法
paper.forEach(function (el) {
el.attr({ stroke: "blue" });
});
根据这个内部(internal) ID,返回对应的元素.
参数
返回:objectRaphaël element object
返回指定点下面最顶端的 element.
返回:objectRaphaël element object
参数
用法
paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
根据给定的参数, 在已注册到操作系统的字体库中查找 font object. 可以只传入字体名中的某一个单词,例如 “Myriad” 可以找到 “Myriad Pro”.
参数
返回:objectthe font object
用法
paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
嵌入一张图片到表面(surface).
参数
返回:objectRaphaël element 对象, type 为 “image”
用法
var c = paper.image("apple.png", 10, 10, 80, 80);
用给定的 path 数据创建 path element.
参数
path 路径由一个字母命令(one-letter commands),加上逗号分隔(comma seprarated)的数字参数组成. 例如:
"M10,20L30,40"
其中包含2个命令: “M” 以及参数
(10, 20)
; “L” 以及参数
(30, 40)
. 大写字母意味着绝对定位, 小写字母是相对定位。(Upper case letter mean command is absolute, lower case—relative).
下面是常用命令列表,更多信息请参考 SVG path string format.
命令(Command) | 名称(Name) | 参数(Parameters) |
---|---|---|
M | moveto | (x y)+ |
Z | closepath | (none) |
L | lineto | (x y)+ |
H | horizontal lineto | x+ |
V | vertical lineto | y+ |
C | curveto | (x1 y1 x2 y2 x y)+ |
S | smooth curveto | (x2 y2 x y)+ |
Q | quadratic Bézier curveto | (x1 y1 x y)+ |
T | smooth quadratic Bézier curveto | (x y)+ |
A | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
R | Catmull-Rom curveto* | x1 y1 (x y)+ |
* “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier. Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning.
用法
var c = paper.path("M10 10L90 90");
// 画一条对角线:
// 画笔移动到 10,10, 然后画线到 90,90
For example of path strings, check out these icons: http://raphaeljs.com/icons/
Creates path that represent given text written using given font at given position with given size. Result of the method is path element that contains whole text as a separate path.
参数
16
"baseline"
or
"middle"
, 默认值为
"middle"
-1..1
, 默认值为
0
返回:objectresulting path element, which consist of all letters
用法
var txt = r.print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});
Points to the Raphael object/function
绘制一个rectangle.
参数
返回:objectRaphaël element 对象, type 为 “rect”
用法
// regular rectangle
var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);
将 paper 从 DOM 中移除.
Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant on other elements after reflow it could shift half pixel which cause for lines to lost their crispness. This method fixes the issue.
There is an inconvenient rendering bug in Safari (WebKit): sometimes the rendering should be forced. This method should help with dealing with this bug.
Creates array-like object to keep and operate several elements at once. Warning: it doesn’t create any elements for itself in the page, it just groups existing elements. Sets act as pseudo elements — all methods available to an element can be used on a set.
返回:objectarray-like object that represents set of elements
用法
var st = paper.set();
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"}); // 改变集合内所有 circle 的 fill 特性
因为JavaScript是单线程的, 调用 Paper.setStart 方法后 . 用 paper 创建的元素就可以缓存, 再执行此方法则完成缓存,并返回结果set.
返回:objectset
如果需要改变 canvas 的尺寸,可以调用此方法.
参数
创建 Paper.set. 因为JavaScript是单线程的, 调用 Paper.setStart() 方法后, 在执行 Paper.setFinish 方法之前, 用 paper 创建的元素就可以缓存.
用法
paper.setStart();
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
var st = paper.setFinish();
st.attr({fill: "red"}); // 改变集合内所有 circle 的 fill 特性
设置 paper 的可视界面(view box). 实际上可以用来缩放(zoom)或者通过新的边界来显示paper的其中一部分。
参数
0
0
true
绘制一串 text 文本. 如果需要换行, 使用 “\n” 即可.
参数
返回:objectRaphaël element 对象, type 为 “text”
用法
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
指向 paper 中最顶端(topmost)的元素.
创建一个可在上面绘制图形的 canvas(画布, 其实就是 Paper). 必须首先创建画布才能继续下一步。 此后所有对此实例的方法调用都会绑定到同一个 canvas 画布上。
参数
或者
或者
或者
undefined
.
返回:objectPaper
用法
// 本段代码, 每个示例都创建一个 canvas
// 宽为320px ,高为 200px.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
Returns angle between two or three points
参数
返回:numberangle in degrees.
Creates an animation object that can be passed to the Element.animate or Element.animateWith methods. 另请参考 Animation.delay and Animation.repeat methods.
参数
cubic‐bezier(XX, XX, XX, XX)
返回:objectAnimation
Utility method Return bounding box of a given cubic bezier curve
参数
或者
返回:objectpoint information in format:
Parses the color string and returns object with all values for the given color.
参数
返回:objectCombined RGB & HSB object in format:
true
if string can’t be parsed,
Returns RFC4122, version 4 ID
Transform angle to degrees
参数
返回:numberangle in degrees.
Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
另请参考 Easing demo.
You can add your own method to elements. This is usefull when you want to hack default functionality or want to wrap some common transformation or attributes in one method. In difference to canvas methods, you can redefine element method at any time. Expending element methods wouldn’t affect set.
用法
Raphael.el.red = function () {
this.attr({fill: "#f00"});
};
// then use it
paper.circle(100, 100, 20).red();
Utility method Find dot coordinates on the given cubic bezier curve at the given t.
参数
返回:objectpoint information in format:
你可以将自定义方法添加到 canvas 上.
比如, 想要画一个饼图(pie chart),
则可以创建自己的 pie chart 函数, 并挂接为 Raphaël plugin.
实现原理是扩展 Raphael.fn
对象。
这需要在 Raphaël 实例创建之前修改 fn
对象。
否则就不会生效.
请注意命名空间方式的(namespaced) plugins 声明在 Raphael 2.0中已不再支持.
这主要由 plugin 来确保所有的命名空间都有合适的 context.
用法
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
return this.path( ... );
};
// 也可以创建 namespace
Raphael.fn.mystuff = {
arrow: function () {…},
star: function () {…},
// etc…
};
var paper = Raphael(10, 10, 630, 480);
// 此时可以使用:
paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"});
paper.mystuff.arrow();
paper.mystuff.star();
Simple format function. Replaces construction of type “
{<number>}
” to the corresponding argument.
参数
返回:stringformated string
用法
var x =
10,
y =
20,
width =
40,
height =
50;
// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
paper.path(Raphael.format("M{0},{1}h{2}v{3}h{4}z", x, y, width, height, -width));
A little bit more advanced format function than Raphael.format. Replaces construction of type “
{<name>}
” to the corresponding argument.
参数
返回:stringformated string
用法
// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
paper.path(Raphael.fullfill("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
x: 10,
y: 20,
dim: {
width: 40,
height: 50,
"negative width": -40
}
}));
On each call returns next colour in the spectrum. To reset it back to red call Raphael.getColor.reset
参数
0.75
返回:stringhex representation of the colour.
Resets spectrum position for Raphael.getColor back to red.
Return coordinates of the point located at the given length on the given path.
参数
返回:objectrepresentation of the point:
Parses colour string as RGB object
参数
red
”, “green
”, “cornflowerblue
”, etc)
#000
”, “#fc0
”, etc)
#000000
”, “#bd2300
”)
rgb(200, 100, 0)
”)
rgb(100%, 175%, 0%)
”)
hsb(0.5, 0.25, 1)
”)
返回:objectRGB object in format:
Return subpath of a given path from given length to given length.
参数
返回:stringpathstring for the segment
Returns length of the given path in pixels.
参数
返回:numberlength.
Converts HSB values to hex representation of the colour.
参数
返回:stringhex representation of the colour.
Converts HSB values to RGB object.
参数
返回:objectRGB object in format:
Converts HSL values to hex representation of the colour.
参数
返回:stringhex representation of the colour.
Converts HSL values to RGB object.
参数
返回:objectRGB object in format:
Handfull replacement for
typeof
operator.
参数
返回:booleanis given value is of given type
Utility method
Returns
true
if two bounding boxes intersect
参数
返回:boolean
true
if they intersect
Utility method
Returns
true
if given point is inside bounding boxes.
参数
返回:boolean
true
if point inside
Utility method
Returns
true
if given point is inside a given closed path.
参数
返回:booleantrue, if point is inside the path
Transform the path string with given matrix.
参数
返回:stringtransformed path string
Utility method Returns matrix based on given parameters.
参数
返回:objectMatrix
If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable
Raphael
, but anyway.) You can use
ninja
method.
Beware, that in this case plugins could stop working, because they are depending on global variable existance.
返回:objectRaphael object
用法
(function (local_raphael) {
var paper = local_raphael(10, 10, 320, 200);
…
})(Raphael.ninja());
Utility method Parses given path string into an array of arrays of path segments.
参数
返回:arrayarray of segments.
Utility method Parses given path string into an array of transformations.
参数
返回:arrayarray of transformations.
Utility method Converts path to a new path where all segments are cubic bezier curves.
参数
返回:arrayarray of segments.
Utility method Return bounding box of a given path
参数
返回:objectbounding box
Utility method Finds intersections of two paths
参数
返回:arraydots of intersection
Utility method Converts path to relative form
参数
返回:arrayarray of segments.
Transform angle to radians
参数
返回:numberangle in radians.
Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file. Returns original parameter, so it could be used with chaining.
More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file.参数
返回:objectthe font you passed in
用法
Cufon.registerFont(Raphael.registerFont({…}));
Converts RGB values to hex representation of the colour.
参数
返回:stringhex representation of the colour.
Converts RGB values to HSB object.
参数
返回:objectHSB object in format:
Converts RGB values to HSL object.
参数
返回:objectHSL object in format:
Used when you need to draw in
<iframe>
. Switched window to the iframe one.
参数
Snaps given value to given grid.
参数
10
.
返回:numberadjusted value.
You can add your own method to elements and sets. It is wise to add a set method for each element method you added, so you will be able to call the same method on sets too. 另请参考 Raphael.el.
用法
Raphael.el.red = function () {
this.attr({fill: "#f00"});
};
Raphael.st.red = function () {
this.forEach(function (el) {
el.red();
});
};
// then use it
paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();
如果浏览器支持 SVG. 则返回
true
工具方法,将给定的 path 应用 transformations 之后返回对应的矩阵
参数
返回:object Matrix
工具方法,将给定的 path 通过 transformation 转换之后返回
参数
返回:stringpath
可能是 “SVG”, “VML” 或者空串(empty), 取决于浏览器的兼容性.
如果浏览器支持 VML. 则返回
true
移除 set 中的全部 element
从 set 中移除给定的 element
参数
返回:boolean 如果找到对象,并且从 set 中移除, 则返回true
。
为集合中的每个元素执行给定的函数.
如果 function 某次执行后返回
false
, 则停止接下来的循环过程.
参数
返回:objectSet 对象
弹出并返回最后一个元素.
返回:object弹出的 element
把传入的所有参数加入当前集合.
返回:object原先存在的 element
从集合中删除给定范围的元素
参数
返回:object 被删除的那些元素
eve, 是 event 单词的一部分,为了避免冲突才使用eve 。
触发参数 name
指定的事件
, 使用给定的 scope,以及其他参数来调用.
参数
.
)
或者斜线 (/
)
返回:object各个监听函数的返回值组成的数组
内部方法, 返回会被给定的name
触发的 event handlers 数组.
参数
.
)
或者斜线 (/
)
返回:arrayevent handlers, 数组
可以在事件处理器内部用来找出 event 的实际名称。
参数
返回:string如果没有指定
subname
, 则返回 event 的 name
或者
返回:boolean 如果当前事件 name 中包含有subname
,则返回 true
从 listeners 列表中删除对应 name 的函数.
参数
.
)
或者斜线 (/
), 也可以使用通配符
用给定的 name 绑定指定的 event handler. 可以在 name 中使用通配符 “*
”:
eve.on("*.under.*", f);
eve("mouse.under.floor"); // 触发 f
这里使用 eve 来触发事件监听.
参数
.
)
或者斜线 (/
), 也可以使用通配符
返回:function 返回的 function 可接受一个 number 类型的参数, 用来指定 handler 的 z-index。 这是一个可选的功能, 在需要根据特定顺序调用 handlers 时才使用, 这样事件处理程序就会按照给定的顺序来调用, 而不管添加时的顺序。
Example:
eve.on("mouse", eat)(2);
eve.on("mouse", scream);
eve.on("mouse", catch)(1);
上面的代码可以确保 catch
函数
将会在 eat
之前被调用.
如果要让某个 handler 在未指定顺序的(non-indexed) handlers前被调用, 则可以将顺序指定为负数(negative value).
请注意: 我们绝大多数时候都不需要关心z-index, 有某些特殊时刻可能真的需要这种 feature.
只触发一次的绑定; 用给定的 name 绑定指定的 event handler,只要触发一次,就会解绑自身.
eve.once("login", f);
eve("login"); // 触发 f
eve("login"); // 此时 listener 不再存在
这里使用 eve 来触发事件监听.
参数
.
)
或者斜线 (/
), 也可以使用通配符
返回:function返回的 function 和 eve.on 一样
在事件处理函数(event handler)中使用, 停止事件传播, 让框架不再触发其余的监听器(subsequent listeners).
请参考 eve.off
此 raphaeljs 的版本号.