1. Animation - 动画
  2. Animation.delay()
  3. Animation.repeat()
  4. Element - 元素
  5. Element.animate()
  6. Element.animateWith()
  7. Element.attr()
  8. Element.click()
  9. Element.clone()
  10. Element.data()
  11. Element.dblclick()
  12. Element.drag()
  13. Element.getBBox()
  14. Element.getPointAtLength()
  15. Element.getSubpath()
  16. Element.getTotalLength()
  17. Element.glow()
  18. Element.hide()
  19. Element.hover()
  20. Element.id
  21. Element.insertAfter()
  22. Element.insertBefore()
  23. Element.isPointInside()
  24. Element.matrix
  25. Element.mousedown()
  26. Element.mousemove()
  27. Element.mouseout()
  28. Element.mouseover()
  29. Element.mouseup()
  30. Element.next
  31. Element.node
  32. Element.onDragOver()
  33. Element.paper
  34. Element.pause()
  35. Element.prev
  36. Element.raphael
  37. Element.remove()
  38. Element.removeData()
  39. Element.resume()
  40. Element.rotate()
  41. Element.scale()
  42. Element.setTime()
  43. Element.show()
  44. Element.status()
  45. Element.stop()
  46. Element.toBack()
  47. Element.toFront()
  48. Element.touchcancel()
  49. Element.touchend()
  50. Element.touchmove()
  51. Element.touchstart()
  52. Element.transform()
  53. Element.translate()
  54. Element.unclick()
  55. Element.undblclick()
  56. Element.undrag()
  57. Element.unhover()
  58. Element.unmousedown()
  59. Element.unmousemove()
  60. Element.unmouseout()
  61. Element.unmouseover()
  62. Element.unmouseup()
  63. Element.untouchcancel()
  64. Element.untouchend()
  65. Element.untouchmove()
  66. Element.untouchstart()
  67. Matrix - 矩阵
  68. Matrix.add()
  69. Matrix.clone()
  70. Matrix.invert()
  71. Matrix.rotate()
  72. Matrix.scale()
  73. Matrix.split()
  74. Matrix.toTransformString()
  75. Matrix.translate()
  76. Matrix.x()
  77. Matrix.y()
  78. Paper - 画板
  79. Paper.add()
  80. Paper.bottom
  81. Paper.ca
  82. Paper.circle()
  83. Paper.clear()
  84. Paper.customAttributes
  85. Paper.ellipse()
  86. Paper.forEach()
  87. Paper.getById()
  88. Paper.getElementByPoint()
  89. Paper.getElementsByPoint()
  90. Paper.getFont()
  91. Paper.image()
  92. Paper.path()
  93. Paper.print()
  94. Paper.raphael
  95. Paper.rect()
  96. Paper.remove()
  97. Paper.renderfix()
  98. Paper.safari()
  99. Paper.set()
  100. Paper.setFinish()
  101. Paper.setSize()
  102. Paper.setStart()
  103. Paper.setViewBox()
  104. Paper.text()
  105. Paper.top
  106. Raphael()
  107. Raphael.angle()
  108. Raphael.animation()
  109. Raphael.bezierBBox()
  110. Raphael.color()
  111. Raphael.createUUID()
  112. Raphael.deg()
  113. Raphael.easing_formulas
  114. Raphael.el
  115. Raphael.findDotsAtSegment()
  116. Raphael.fn
  117. Raphael.format()
  118. Raphael.fullfill()
  119. Raphael.getColor()
  120. Raphael.getColor.reset()
  121. Raphael.getPointAtLength()
  122. Raphael.getRGB()
  123. Raphael.getSubpath()
  124. Raphael.getTotalLength()
  125. Raphael.hsb()
  126. Raphael.hsb2rgb()
  127. Raphael.hsl()
  128. Raphael.hsl2rgb()
  129. Raphael.is()
  130. Raphael.isBBoxIntersect()
  131. Raphael.isPointInsideBBox()
  132. Raphael.isPointInsidePath()
  133. Raphael.mapPath()
  134. Raphael.matrix()
  135. Raphael.ninja()
  136. Raphael.parsePathString()
  137. Raphael.parseTransformString()
  138. Raphael.path2curve()
  139. Raphael.pathBBox()
  140. Raphael.pathIntersection()
  141. Raphael.pathToRelative()
  142. Raphael.rad()
  143. Raphael.registerFont()
  144. Raphael.rgb()
  145. Raphael.rgb2hsb()
  146. Raphael.rgb2hsl()
  147. Raphael.setWindow()
  148. Raphael.snapTo()
  149. Raphael.st
  150. Raphael.svg
  151. Raphael.toMatrix()
  152. Raphael.transformPath()
  153. Raphael.type
  154. Raphael.vml
  155. Set
  156. Set.clear()
  157. Set.exclude()
  158. Set.forEach()
  159. Set.pop()
  160. Set.push()
  161. Set.splice()
  162. eve()
  163. eve.listeners()
  164. eve.nt()
  165. eve.off()
  166. eve.on()
  167. eve.once()
  168. eve.stop()
  169. eve.unbind()
  170. eve.version

Raphaël 参考文档

另一份翻译好的文章:
请参考: http://html5css3webapp.com/raphaelApi.htm
Raphaël—JavaScript 库:
官网地址: http://raphaeljs.com/
Charts for Raphaël:
gRaphaël地址: http://g.raphaeljs.com/

 Animation - 动画

 Animation.delay(delay)

根据已存在的动画,创建一个延迟动画的拷贝。

参数

delay
number
调用动画与实际执行动画之间的延迟毫秒数(ms)

返回:object修改后的新对象

var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
circle1.animate(anim); // 立即执行给定的 animation
circle2.animate(anim.delay(500)); // 延迟 500 ms 执行动画 

 Animation.repeat(repeat)

根据已存在的动画,创建一个重复执行多少次的拷贝。

参数

repeat
number
动画的迭代/循环次数(number iterations). 如果是无限循环,请传入 Infinity

返回:object改变之后的 新的 Animation 对象

 Element - 元素

 Element.animate(…)

在给定的元素上创建并开始动画.

参数

params
object
元素最终的属性, 可以参考 Element.attr
ms
number
number of milliseconds for animation to run
easing
optional
string
easing type. Accept one of Raphael.easing_formulas or CSS format: cubic‐bezier(XX, XX, XX, XX)
callback
optional
function
callback function. Will be called at the end of animation.

或者

animation
object
动画对象, 请参考 Raphael.animation

返回:object原生的(original) element 元素

 Element.animateWith(…)

Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.

参数

el
object
element to sync with
anim
object
animation to sync with
params
optional
object
元素最终的属性, 可以参考 Element.attr
ms
optional
number
number of milliseconds for animation to run
easing
optional
string
easing type. Accept on of Raphael.easing_formulas or CSS format: cubic‐bezier(XX, XX, XX, XX)
callback
optional
function
callback function. Will be called at the end of animation.

或者

element
object
element to sync with
anim
object
animation to sync with
animation
optional
object
动画对象, 请参考 Raphael.animation

返回:object原生的(original) element 元素

 Element.attr(…)

设置元素的属性.

参数

attrName
string
属性名
value
string

或者

params
object
name/value 对组成的JS对象

或者

attrName
string
属性名

或者

attrNames
array
传入这种参数, 则返回结果是对应这些name的属性值组成的数组

返回:object如果传入 attrsName & value, 或者传入的是 params, 则返回 Element .

返回:...如果只传入 attrsName,则返回结果是对应的属性值.

返回:array如果传入 attrsNames, 则返回结果是对应这些name的属性值组成的数组.

返回:object如果什么参数也不传,则返回所有 attributes 组成的对象.

可用参数

关于这些参数的详细说明,请访问 SVG specification.

  1. arrow-end string path 末尾的箭头(arrowhead). 格式为 <type>[-<width>[-<length>]].
    可选值: classic, block, open, oval, diamond, none,
    宽度(width): wide, narrow, midium,
    长度(length): long, short, midium.
  2. clip-rect string 使用逗号或者空格(comma or space)分隔的值: x, y, width 以及 height
  3. cursor string 鼠标指针类型,CSS type
  4. cx number 圆心或者椭圆中心点的 x-轴坐标
  5. cy number 圆心或者椭圆中心点的 y-轴坐标
  6. fill string 要填充的颜色,渐变值, 或者图片
  7. fill-opacity number  
  8. font string  
  9. font-family string  
  10. font-size number 字体大小,单位: 像素
  11. font-weight string  
  12. height number  
  13. href string URL, 如果指定元素表现为超链接
  14. opacity number  
  15. path string SVG path 字符串
  16. r number 圆/椭圆的半径; 如果是矩形则表示其圆角半径
  17. rx number 椭圆在水平方向的的半径
  18. ry number 椭圆在垂直方向的半径
  19. src string image URL, 只对 Element.image 元素生效
  20. stroke string 画笔的颜色(stroke colour)
  21. stroke-dasharray string [“”, “-”, “.”, “-.”, “-..”, “.”, “-”, “--”, “- .”, “--.”, “--..”]
  22. stroke-linecap string [“butt”, “square”, “round”]
  23. stroke-linejoin string [“bevel”, “round”, “miter”]
  24. stroke-miterlimit number  
  25. stroke-opacity number  
  26. stroke-width number stroke 宽度,像素, 默认值为 '1'
  27. target string 和 href 一起使用
  28. text string text元素的内容,如果是多行,请使用\n
  29. text-anchor string [“start”, “middle”, “end”], 默认值为 “middle
  30. title string 为给定的text创建提示信息(tooltip)
  31. transform string see Element.transform
  32. width number  
  33. x number  
  34. y number  

渐变(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)
  • #••• — 简短的 HTML 颜色值: (“#000”, “#fc0”, etc)
  • #•••••• — 完整长度的 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(•••, •••, •••) — 色相(hue), 饱和度(saturation) 以及亮度(brightness)值: (“hsb(0.5, 0.25, 1)”)
  • hsb(•••%, •••%, •••%) — 同上, 但使用百分百的形式(%)
  • hsba(•••, •••, •••, •••) — 同上, 但有不透明度(opacity)
  • hsl(•••, •••, •••) — 和 hsb 几乎完全一致 , 请参考 Wikipedia page
  • hsl(•••%, •••%, •••%) — 同上, 但使用百分百的形式(%)
  • hsla(•••, •••, •••, •••) — 同上, 但有不透明度(opacity)
  • 对于 hsb 和 hsl, 也可以将色相(hue) 指定为角度(degree),如: “hsl(240deg, 1, .5)”, 或者,这种形式: “hsl(240°, 1, .5)

 Element.click(handler)

添加 click 事件监听器.

参数

handler
function
事件处理函数

返回:objectElement

 Element.clone()

返回:object克隆此元素

 Element.data(key, [value])

根据给定的key,添加或获取属性值. 另请参考 Element.removeData

参数

key
string
保存 data 的 key
value
optional
any
要保存的 value

返回: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"));
         });
}

 Element.dblclick(handler)

为此元素添加事件监听器; double click 事件.

参数

handler
function
事件处理函数

返回:objectElement

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

为此元素添加拖动事件监听器.

参数

onmove
function
移动(moving)事件处理器
onstart
function
拖动开始(drag start)事件处理器
onend
function
拖动结束(drag end)事件处理器
mcontext
optional
object
拖动事件处理器的 context
scontext
optional
object
拖动开始事件处理器的 context
econtext
optional
object
拖动开始事件处理器的 context

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:

  1. x number 鼠标的x轴位置
  2. y number 鼠标的y轴位置
  3. event object DOM 事件对象

Move event and move handler will be called in specified context or in context of the element with following parameters:

  1. dx number 从起始点算起的 x 轴的位置变化
  2. dy number 从起始点算起的 y 轴的位置变化
  3. x number 鼠标的x轴位置
  4. y number 鼠标的y轴位置
  5. event object DOM 事件对象

End event and end handler will be called in specified context or in context of the element with following parameters:

  1. event object DOM 事件对象

返回:objectElement

 Element.getBBox(isWithoutTransform)

返回该元素的边界框(bounding box)

参数

isWithoutTransform
boolean
标志位, 如果想要变换之前的边界框, 请使用true 默认值为 false .

返回:objectBounding box 对象,结构如下:

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

 Element.getPointAtLength(length)

Return coordinates of the point located at the given length on the given path. 只有类型为 "path" 的元素才有效.

参数

length
number
 

返回:objectrepresentation of the point:

  1. {
    1. x: number x 坐标
    2. y: number y 坐标
    3. alpha: number angle of derivative
  2. }

 Element.getSubpath(from, to)

Return subpath of a given element from given length to given length. 只有类型为 "path" 的元素才有效.

参数

from
number
该段的起始位置
to
number
该段的结束位置

返回:stringpathstring for the segment

 Element.getTotalLength()

Returns length of the path in pixels. 只有类型为 "path" 的元素才有效.

返回:numberlength.

 Element.glow([glow])

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.

参数

glow
optional
object
parameters object with all properties optional:
  1. {
    1. width number size of the glow, 默认值为 10
    2. fill boolean will it be filled, 默认值为 false
    3. opacity number opacity, 默认值为 0.5
    4. offsetx number horizontal offset, 默认值为 0
    5. offsety number vertical offset, 默认值为 0
    6. color string glow colour, 默认值为 black
  2. }

返回:objectPaper.set of elements that represents glow

 Element.hide()

隐藏元素(invisible). 请参考 Element.show.

返回:objectElement

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

为该元素添加 事件处理器: hover 事件.

参数

f_in
function
hover in 事件处理函数
f_out
function
hover out 事件处理函数
icontext
optional
object
为 hover in 事件处理函数指定的 context
ocontext
optional
object
为 hover out 事件处理函数指定的 context

返回:objectElement

 Element.id

number

元素的唯一ID. 主要用于对元素进行事件监听, 因为所有的事件都是采用这种格式触发的: <module>.<action>.<id> . 当然,在 Paper.getById 方法中也会用到.

 Element.insertAfter()

将本元素插入到给定元素之后.

返回:objectElement

 Element.insertBefore()

将本元素插入到给定元素之前.

返回:objectElement

 Element.isPointInside(x, y)

判断给定的点是否在此元素形状之内(inside this element’s shape)

参数

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

返回:boolean 如果给定的点在此元素内则返回 true

 Element.matrix

object

持有(Keeps) Matrix 对象, 该对象代表了元素的偏转(transformation)

 Element.mousedown(handler)

为此元素添加事件监听器; mousedown 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.mousemove(handler)

为此元素添加事件监听器; mousemove 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.mouseout(handler)

为此元素添加事件监听器; mouseout 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.mouseover(handler)

为此元素添加事件监听器; mouseover 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.mouseup(handler)

为此元素添加事件监听器; mouseup 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.next

object

指向层次结构树中下一个元素.

 Element.node

object

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");
};

 Element.onDragOver(f)

Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id).

参数

f
function
handler for event, first argument would be the element you are dragging over

 Element.paper

object

内部引用到用来绘制该对象的 “paper”. 主要供 plugins 或 element 扩展在使用.

用法

Raphael.el.cross = function () {
    this.attr({fill: "red"});
    this.paper.path("M10,10L50,50M50,10L10,50")
        .attr({stroke: "red"});
}

 Element.pause([anim])

暂停此元素的动画效果,并允许在稍后调用恢复方法(resume).

参数

anim
optional
object
动画对象

返回:object原生的(original) element 元素

 Element.prev

object

Reference to the previous element in the hierarchy.

 Element.raphael

object

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.remove()

将此 element 从 paper 移除.

 Element.removeData([key])

Removes value associated with an element by given key. If key is not provided, removes all the data of the element.

参数

key
optional
string
key

返回:objectElement

 Element.resume([anim])

恢复动画,只能恢复通过 Element.pause 方法暂停的动画.

参数

anim
optional
object
动画对象

返回:object原生的(original) element 元素

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

已废弃的方法(Deprecated)! 建议使用 Element.transform 来进行旋转. Adds rotation by given angle around given point to the list of transformations of the element.

参数

deg
number
angle in degrees
cx
optional
number
中心点的 x 坐标 of rotation
cy
optional
number
中心点的 y 坐标 of rotation

If cx & cy aren’t specified centre of the shape is used as a point of rotation.

返回:objectElement

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

已废弃的方法(Deprecated)! 建议使用 Element.transform 来进行单个元素的缩放. Adds scale by given amount relative to given point to the list of transformations of the element.

参数

sx
number
horisontal scale amount
sy
number
vertical scale amount
cx
optional
number
中心点的 x 坐标 of scale
cy
optional
number
中心点的 y 坐标 of scale

If cx & cy aren’t specified centre of the shape is used instead.

返回:objectElement

 Element.setTime(anim, value)

Sets the status of animation of the element in milliseconds. Similar to Element.status method.

参数

anim
object
动画对象
value
number
number of milliseconds from the beginning of the animation

返回: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.show()

让元素可见. 请参考 Element.hide.

返回:objectElement

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

Gets or sets the status of animation of the element.

参数

anim
optional
object
动画对象
value
optional
number
0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.

返回:numberstatus

或者

返回:arraystatus if anim is not specified. Array of objects in format:

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

或者

返回:object原生的(original) element 元素 if value is specified

 Element.stop([anim])

停止此元素的动画效果.

参数

anim
optional
object
动画对象

返回:object原生的(original) element 元素

 Element.toBack()

将此元素移动到最底层/后面, 所有元素之后.

返回:objectElement

 Element.toFront()

将此元素移动到最顶层/前面, 所有元素的上面.

返回:objectElement

 Element.touchcancel(handler)

为此元素添加事件监听器; touchcancel 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.touchend(handler)

为此元素添加事件监听器; touchend 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.touchmove(handler)

为此元素添加事件监听器; touchmove 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.touchstart(handler)

为此元素添加事件监听器; touchstart 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.transform([tstr])

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());

参数

tstr
optional
string
transformation string

If tstr isn’t specified

返回:stringcurrent transformation string

else

返回:objectElement

 Element.translate(dx, dy)

已废弃的方法(Deprecated)! 建议使用 Element.transform 来进行平移. Adds translation by given amount to the list of transformations of the element.

参数

dx
number
horisontal shift
dy
number
vertical shift

返回:objectElement

 Element.unclick(handler)

移除该元素的 事件处理器: click 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.undblclick(handler)

移除该元素的 事件处理器: double click 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.undrag()

移除该元素的所有 drag 事件处理器.

 Element.unhover(f_in, f_out)

移除该元素的 事件处理器: hover 事件.

参数

f_in
function
hover in 事件处理函数
f_out
function
hover out 事件处理函数

返回:objectElement

 Element.unmousedown(handler)

移除该元素的 事件处理器: mousedown 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.unmousemove(handler)

移除该元素的 事件处理器: mousemove 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.unmouseout(handler)

移除该元素的 事件处理器: mouseout 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.unmouseover(handler)

移除该元素的 事件处理器: mouseover 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.unmouseup(handler)

移除该元素的 事件处理器: mouseup 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.untouchcancel(handler)

移除该元素的 事件处理器: touchcancel 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.untouchend(handler)

移除该元素的 事件处理器: touchend 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.untouchmove(handler)

移除该元素的 事件处理器: touchmove 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Element.untouchstart(handler)

移除该元素的 事件处理器: touchstart 事件.

参数

handler
function
事件处理函数

返回:objectElement

 Matrix - 矩阵

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

Adds given matrix to existing one.

参数

a
number
 
b
number
 
c
number
 
d
number
 
e
number
 
f
number
 
matrix
object
Matrix

 Matrix.clone()

Returns copy of the matrix

返回:objectMatrix

 Matrix.invert()

Returns inverted version of the matrix

返回:objectMatrix

 Matrix.rotate(a, x, y)

Rotates the matrix

参数

a
number
 
x
number
 
y
number
 

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

Scales the matrix

参数

x
number
 
y
optional
number
 
cx
optional
number
 
cy
optional
number
 

 Matrix.split()

Splits matrix into primitive transformations

返回:objectin format:

  1. dx number translation by x
  2. dy number translation by y
  3. scalex number scale by x
  4. scaley number scale by y
  5. shear number shear
  6. rotate number rotation in deg
  7. isSimple boolean could it be represented via simple transformations

 Matrix.toTransformString()

Return transform string that represents given matrix

返回:stringtransform string

 Matrix.translate(x, y)

Translate the matrix

参数

x
number
 
y
number
 

 Matrix.x(x, y)

Return x coordinate for given point after transformation described by the matrix. 另请参考 Matrix.y

参数

x
number
 
y
number
 

返回:numberx

 Matrix.y(x, y)

Return y coordinate for given point after transformation described by the matrix. 另请参考 Matrix.x

参数

x
number
 
y
number
 

返回:numbery

 Paper - 画板

 Paper.add(json)

通过 JSON 数组引入元素, JSON对象形如 {type: type, <其他属性>}

参数

json
array
 

返回:object引入元素的结果集

用法

paper.add([
    {
        type: "circle",
        cx: 10,
        cy: 10,
        r: 5
    },
    {
        type: "rect",
        x: 10,
        y: 10,
        width: 10,
        height: 10,
        fill: "#fc0"
    }
]);

 Paper.bottom

此引用指向 paper 中的底部元素

 Paper.ca

object

Paper.customAttributes 属性的缩写

 Paper.circle(x, y, r)

绘制一个圆/圈(circle).

参数

x
number
中心点的 x 坐标
y
number
中心点的 y 坐标
r
number
半径(radius)

返回:objectRaphaël element 对象, type 为 “circle”

用法

var c = paper.circle(50, 50, 40);

 Paper.clear()

清空 paper, 比如, 移除所有元素.

 Paper.customAttributes

object

如果你有多个特性参数,想用函数计算后的返回结果作为实际参数,则可以使用自定义特性(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);

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

绘制一个椭圆(ellipse).

参数

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

返回:objectRaphaël element 对象, type 为 “ellipse”

用法

var c = paper.ellipse(50, 50, 40, 20);

 Paper.forEach(callback, thisArg)

对 paper 上的每一个元素执行给定的回调函数

如果 callback 函数返回 false 则会退出迭代循环.

参数

callback
function
要执行的(function)
thisArg
object
如果有,则成为回调函数的 context object

返回:objectPaper 对象

用法

paper.forEach(function (el) {
    el.attr({ stroke: "blue" });
});

 Paper.getById(id)

根据这个内部(internal) ID,返回对应的元素.

参数

id
number
id

返回:objectRaphaël element object

 Paper.getElementByPoint(x, y)

返回指定点下面最顶端的 element.

返回:objectRaphaël element object

参数

x
number
x 坐标,从 window 的左上角算起
y
number
y 坐标,从 window 的左上角算起

用法

paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});

 Paper.getElementsByPoint(x, y)

返回内部包含这个点的所有 elements

参数

x
number
这个点的 x 坐标
y
number
这个点的 y 坐标

返回:objectSet

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

根据给定的参数, 在已注册到操作系统的字体库中查找 font object. 可以只传入字体名中的某一个单词,例如 “Myriad” 可以找到 “Myriad Pro”.

参数

family
string
字体(font family)名称, 或者名称中的任意单词
weight
optional
string
字体粗细
style
optional
string
字体样式
stretch
optional
string
字体拉伸/变形

返回:objectthe font object

用法

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

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

嵌入一张图片到表面(surface).

参数

src
string
图片的 URI
x
number
x 坐标位置
y
number
y 坐标位置
width
number
image 的宽度(width)
height
number
image 的宽度(height)

返回:objectRaphaël element 对象, type 为 “image”

用法

var c = paper.image("apple.png", 10, 10, 80, 80);

 Paper.path([pathString])

用给定的 path 数据创建 path element.

参数

pathString
optional
string
SVG 格式的 path 路径.

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)
Mmoveto(x y)+
Zclosepath(none)
Llineto(x y)+
Hhorizontal linetox+
Vvertical linetoy+
Ccurveto(x1 y1 x2 y2 x y)+
Ssmooth curveto(x2 y2 x y)+
Qquadratic Bézier curveto(x1 y1 x y)+
Tsmooth quadratic Bézier curveto(x y)+
Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
RCatmull-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/

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

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.

参数

x
number
x position of the text
y
number
y position of the text
string
string
text to print
font
object
font object, see Paper.getFont
size
optional
number
size of the font, 默认值为 16
origin
optional
string
could be "baseline" or "middle" , 默认值为 "middle"
letter_spacing
optional
number
number in range -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"});

 Paper.raphael

Points to the Raphael object/function

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

绘制一个rectangle.

参数

x
number
左上角的 x 坐标
y
number
左上角的 y 坐标
width
number
宽度
height
number
高度
r
optional
number
圆角半径, 默认值为 0

返回: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.remove()

将 paper 从 DOM 中移除.

 Paper.renderfix()

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.

 Paper.safari()

There is an inconvenient rendering bug in Safari (WebKit): sometimes the rendering should be forced. This method should help with dealing with this bug.

 Paper.set()

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 特性

 Paper.setFinish()

因为JavaScript是单线程的, 调用 Paper.setStart 方法后 . 用 paper 创建的元素就可以缓存, 再执行此方法则完成缓存,并返回结果set.

返回:objectset

 Paper.setSize(width, height)

如果需要改变 canvas 的尺寸,可以调用此方法.

参数

width
number
canvas 的新宽度
height
number
canvas 的新高度

 Paper.setStart()

创建 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.setViewBox(x, y, w, h, fit)

设置 paper 的可视界面(view box). 实际上可以用来缩放(zoom)或者通过新的边界来显示paper的其中一部分。

参数

x
number
新的x位置, 默认值为 0
y
number
新的y位置, 默认值为 0
w
number
canvas 的新宽度
h
number
canvas 的新高度
fit
boolean
如果想让图像自适应新的边界框,请设置为 true

 Paper.text(x, y, text)

绘制一串 text 文本. 如果需要换行, 使用 “\n” 即可.

参数

x
number
x 坐标位置
y
number
y 坐标位置
text
string
要绘制的文本字符串

返回:objectRaphaël element 对象, type 为 “text”

用法

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

 Paper.top

指向 paper 中最顶端(topmost)的元素.

 Raphael(…)

创建一个可在上面绘制图形的 canvas(画布, 其实就是 Paper). 必须首先创建画布才能继续下一步。 此后所有对此实例的方法调用都会绑定到同一个 canvas 画布上。

参数

container
HTMLElementstring
DOM 元素或者 ID, 用来作为绘图表面(drawing surface)的父节点
width
number
 
height
number
 
callback
optional
function
回调函数, 创建完成后,会用新创建的 paper 作为 context 来调用执行

或者

x
number
 
y
number
 
width
number
 
height
number
 
callback
optional
function
回调函数, 创建完成后,会用新创建的 paper 作为 context 来调用执行

或者

all
array
(数组中的前3/4个 elements 会等价于 [containerID, width, height] 或者 [x, y, width, height] 这样的调用方式. 其余的元素需要使用这样的格式: {type: type, <attributes>} ). 这种格式可参考 Paper.add.
callback
optional
function
回调函数, 创建完成后,会用新创建的 paper 作为 context 来调用执行

或者

onReadyCallback
function
DOM ready 事件触发时的回调函数。 也可以通过前期的(Eve’s)“DOMLoad”事件来订阅(subscribe)这个事件。 如果传入这种参数,则返回值为 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"
}]);

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

Returns angle between two or three points

参数

x1
number
x coord of first point
y1
number
y coord of first point
x2
number
x coord of second point
y2
number
y coord of second point
x3
optional
number
x coord of third point
y3
optional
number
y coord of third point

返回:numberangle in degrees.

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

Creates an animation object that can be passed to the Element.animate or Element.animateWith methods. 另请参考 Animation.delay and Animation.repeat methods.

参数

params
object
元素最终的属性, 可以参考 Element.attr
ms
number
number of milliseconds for animation to run
easing
optional
string
easing type. Accept one of Raphael.easing_formulas or CSS format: cubic‐bezier(XX, XX, XX, XX)
callback
optional
function
callback function. Will be called at the end of animation.

返回:objectAnimation

 Raphael.bezierBBox(…)

Utility method Return bounding box of a given cubic bezier curve

参数

p1x
number
x of the first point of the curve
p1y
number
y of the first point of the curve
c1x
number
x of the first anchor of the curve
c1y
number
y of the first anchor of the curve
c2x
number
x of the second anchor of the curve
c2y
number
y of the second anchor of the curve
p2x
number
x of the second point of the curve
p2y
number
y of the second point of the curve

或者

bez
array
array of six points for bezier curve

返回:objectpoint information in format:

  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)

Parses the color string and returns object with all values for the given color.

参数

clr
string
color string in one of the supported formats (see Raphael.getRGB)

返回:objectCombined RGB & HSB object in format:

  1. {
    1. r number red,
    2. g number green,
    3. b number blue,
    4. hex string color in HTML/CSS format: #••••••,
    5. error boolean true if string can’t be parsed,
    6. h number 色相(hue),
    7. s number 饱和度(saturation),
    8. v number 亮度(brightness)值,
    9. l number lightness
  2. }

 Raphael.createUUID()

Returns RFC4122, version 4 ID

 Raphael.deg(deg)

Transform angle to degrees

参数

deg
number
angle in radians

返回:numberangle in degrees.

 Raphael.easing_formulas

Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:

  • “linear”
  • “<” or “easeIn” or “ease-in”
  • “>” or “easeOut” or “ease-out”
  • “<>” or “easeInOut” or “ease-in-out”
  • “backIn” or “back-in”
  • “backOut” or “back-out”
  • “elastic”
  • “bounce”

另请参考 Easing demo.

 Raphael.el

object

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();

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

Utility method Find dot coordinates on the given cubic bezier curve at the given t.

参数

p1x
number
x of the first point of the curve
p1y
number
y of the first point of the curve
c1x
number
x of the first anchor of the curve
c1y
number
y of the first anchor of the curve
c2x
number
x of the second anchor of the curve
c2y
number
y of the second anchor of the curve
p2x
number
x of the second point of the curve
p2y
number
y of the second point of the curve
t
number
position on the curve (0..1)

返回:objectpoint information in format:

  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 angle of the curve derivative at the point
  2. }

 Raphael.fn

object

你可以将自定义方法添加到 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();

 Raphael.format(token, …)

Simple format function. Replaces construction of type “ {<number>} ” to the corresponding argument.

参数

token
string
string to format
string
rest of arguments will be treated as parameters for replacement

返回: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));

 Raphael.fullfill(token, json)

A little bit more advanced format function than Raphael.format. Replaces construction of type “ {<name>} ” to the corresponding argument.

参数

token
string
string to format
json
object
object which properties will be used as a replacement

返回: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
    }
}));

 Raphael.getColor([value])

On each call returns next colour in the spectrum. To reset it back to red call Raphael.getColor.reset

参数

value
optional
number
亮度(brightness), 默认值为 0.75

返回:stringhex representation of the colour.

 Raphael.getColor.reset()

Resets spectrum position for Raphael.getColor back to red.

 Raphael.getPointAtLength(path, length)

Return coordinates of the point located at the given length on the given path.

参数

path
string
SVG path string
length
number
 

返回:objectrepresentation of the point:

  1. {
    1. x: number x 坐标
    2. y: number y 坐标
    3. alpha: number angle of derivative
  2. }

 Raphael.getRGB(colour)

Parses colour string as RGB object

参数

colour
string
colour string in one of formats:
  • Colour name (“red”, “green”, “cornflowerblue”, etc)
  • #••• — shortened HTML colour: (“#000”, “#fc0”, etc)
  • #•••••• — full length HTML colour: (“#000000”, “#bd2300”)
  • rgb(•••, •••, •••) — red, green and blue channels’ values: (“rgb(200, 100, 0)”)
  • rgb(•••%, •••%, •••%) — 同上, 但使用百分百的形式(%): (“rgb(100%, 175%, 0%)”)
  • hsb(•••, •••, •••) — 色相(hue), 饱和度(saturation) 以及亮度(brightness)值: (“hsb(0.5, 0.25, 1)”)
  • hsb(•••%, •••%, •••%) — 同上, 但使用百分百的形式(%)
  • hsl(•••, •••, •••) — 同 hsb
  • hsl(•••%, •••%, •••%) — 同 hsb

返回:objectRGB object in format:

  1. {
    1. r number red,
    2. g number green,
    3. b number blue
    4. hex string color in HTML/CSS format: #••••••,
    5. error boolean true if string can’t be parsed
  2. }

 Raphael.getSubpath(path, from, to)

Return subpath of a given path from given length to given length.

参数

path
string
SVG path string
from
number
该段的起始位置
to
number
该段的结束位置

返回:stringpathstring for the segment

 Raphael.getTotalLength(path)

Returns length of the given path in pixels.

参数

path
string
SVG path string.

返回:numberlength.

 Raphael.hsb(h, s, b)

Converts HSB values to hex representation of the colour.

参数

h
number
色相(hue)
s
number
饱和度(saturation)
b
number
值或者 亮度(brightness)

返回:stringhex representation of the colour.

 Raphael.hsb2rgb(h, s, v)

Converts HSB values to RGB object.

参数

h
number
色相(hue)
s
number
饱和度(saturation)
v
number
值或者 亮度(brightness)

返回:objectRGB object in format:

  1. {
    1. r number red,
    2. g number green,
    3. b number blue,
    4. hex string color in HTML/CSS format: #••••••
  2. }

 Raphael.hsl(h, s, l)

Converts HSL values to hex representation of the colour.

参数

h
number
色相(hue)
s
number
饱和度(saturation)
l
number
luminosity

返回:stringhex representation of the colour.

 Raphael.hsl2rgb(h, s, l)

Converts HSL values to RGB object.

参数

h
number
色相(hue)
s
number
饱和度(saturation)
l
number
luminosity

返回:objectRGB object in format:

  1. {
    1. r number red,
    2. g number green,
    3. b number blue,
    4. hex string color in HTML/CSS format: #••••••
  2. }

 Raphael.is(o, type)

Handfull replacement for typeof operator.

参数

o
any object or primitive
type
string
name of the type, i.e. “string”, “function”, “number”, etc.

返回:booleanis given value is of given type

 Raphael.isBBoxIntersect(bbox1, bbox2)

Utility method Returns true if two bounding boxes intersect

参数

bbox1
string
first bounding box
bbox2
string
second bounding box

返回:boolean true if they intersect

 Raphael.isPointInsideBBox(bbox, x, y)

Utility method Returns true if given point is inside bounding boxes.

参数

bbox
string
bounding box
x
string
这个点的 x 坐标
y
string
这个点的 y 坐标

返回:boolean true if point inside

 Raphael.isPointInsidePath(path, x, y)

Utility method Returns true if given point is inside a given closed path.

参数

path
string
path string
x
number
x of the point
y
number
y of the point

返回:booleantrue, if point is inside the path

 Raphael.mapPath(path, matrix)

Transform the path string with given matrix.

参数

path
string
path string
matrix
object
see Matrix

返回:stringtransformed path string

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

Utility method Returns matrix based on given parameters.

参数

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

返回:objectMatrix

 Raphael.ninja()

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());

 Raphael.parsePathString(pathString)

Utility method Parses given path string into an array of arrays of path segments.

参数

pathString
stringarray
path string or array of segments (in the last case it will be returned straight away)

返回:arrayarray of segments.

 Raphael.parseTransformString(TString)

Utility method Parses given path string into an array of transformations.

参数

TString
stringarray
transform string or array of transformations (in the last case it will be returned straight away)

返回:arrayarray of transformations.

 Raphael.path2curve(pathString)

Utility method Converts path to a new path where all segments are cubic bezier curves.

参数

pathString
stringarray
path string or array of segments

返回:arrayarray of segments.

 Raphael.pathBBox(path)

Utility method Return bounding box of a given path

参数

path
string
path string

返回:objectbounding box

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

 Raphael.pathIntersection(path1, path2)

Utility method Finds intersections of two paths

参数

path1
string
path string
path2
string
path string

返回:arraydots of intersection

  1. [
  2. {
    1. x: number 这个点的 x 坐标
    2. y: number 这个点的 y 坐标
    3. t1: number t value for segment of path1
    4. t2: number t value for segment of path2
    5. segment1: number order number for segment of path1
    6. segment2: number order number for segment of path2
    7. bez1: array eight coordinates representing beziér curve for the segment of path1
    8. bez2: array eight coordinates representing beziér curve for the segment of path2
  3. }
  4. ]

 Raphael.pathToRelative(pathString)

Utility method Converts path to relative form

参数

pathString
stringarray
path string or array of segments

返回:arrayarray of segments.

 Raphael.rad(deg)

Transform angle to radians

参数

deg
number
angle in degrees

返回:numberangle in radians.

 Raphael.registerFont(font)

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.

参数

font
object
the font to register

返回:objectthe font you passed in

用法

Cufon.registerFont(Raphael.registerFont({…}));

 Raphael.rgb(r, g, b)

Converts RGB values to hex representation of the colour.

参数

r
number
red
g
number
green
b
number
blue

返回:stringhex representation of the colour.

 Raphael.rgb2hsb(r, g, b)

Converts RGB values to HSB object.

参数

r
number
red
g
number
green
b
number
blue

返回:objectHSB object in format:

  1. {
    1. h number 色相(hue)
    2. s number 饱和度(saturation)
    3. b number 亮度(brightness)
  2. }

 Raphael.rgb2hsl(r, g, b)

Converts RGB values to HSL object.

参数

r
number
red
g
number
green
b
number
blue

返回:objectHSL object in format:

  1. {
    1. h number 色相(hue)
    2. s number 饱和度(saturation)
    3. l number luminosity
  2. }

 Raphael.setWindow(newwin)

Used when you need to draw in <iframe> . Switched window to the iframe one.

参数

newwin
window
new window object

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

Snaps given value to given grid.

参数

values
arraynumber
given array of values or step of the grid
value
number
value to adjust
tolerance
optional
number
tolerance for snapping. 默认值为 10 .

返回:numberadjusted value.

 Raphael.st

object

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();

 Raphael.svg

boolean

如果浏览器支持 SVG. 则返回 true

 Raphael.toMatrix(path, transform)

工具方法,将给定的 path 应用 transformations 之后返回对应的矩阵

参数

path
string
path string
transform
stringarray
transformation string

返回:object Matrix

 Raphael.transformPath(path, transform)

工具方法,将给定的 path 通过 transformation 转换之后返回

参数

path
string
path string
transform
stringarray
transformation string

返回:stringpath

 Raphael.type

string

可能是 “SVG”, “VML” 或者空串(empty), 取决于浏览器的兼容性.

 Raphael.vml

boolean

如果浏览器支持 VML. 则返回 true

 Set

 Set.clear()

移除 set 中的全部 element

 Set.exclude(element)

从 set 中移除给定的 element

参数

element
object
要移除的 element

返回:boolean 如果找到对象,并且从 set 中移除, 则返回true

 Set.forEach(callback, thisArg)

为集合中的每个元素执行给定的函数.

如果 function 某次执行后返回 false , 则停止接下来的循环过程.

参数

callback
function
要执行的 function
thisArg
object
回调函数的 context 对象

返回:objectSet 对象

 Set.pop()

弹出并返回最后一个元素.

返回:object弹出的 element

 Set.push()

把传入的所有参数加入当前集合.

返回:object原先存在的 element

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

从集合中删除给定范围的元素

参数

index
number
删除元素的起始位置
count
number
要删除的元素个数
insertion…
optional
object
要插入的那些元素

返回:object 被删除的那些元素

 eve(name, scope, varargs)

eve, 是 event 单词的一部分,为了避免冲突才使用eve 。 触发参数 name 指定的事件 , 使用给定的 scope,以及其他参数来调用.

参数

name
string
事件的名字, 其中可以有点号 (. ) 或者斜线 (/ )
scope
object
用来调用 event handlers 的 context (近似理解为里面的 this)
varargs
...
其它参数也会传递给 event handlers

返回:object各个监听函数的返回值组成的数组

 eve.listeners(name)

内部方法, 返回会被给定的name 触发的 event handlers 数组.

参数

name
string
事件的名字, 其中可以有点号 (. ) 或者斜线 (/ )

返回:arrayevent handlers, 数组

 eve.nt([subname])

可以在事件处理器内部用来找出 event 的实际名称。

参数

subname
optional
string
事件的部分名字(subname)

返回:string如果没有指定 subname, 则返回 event 的 name

或者

返回:boolean 如果当前事件 name 中包含有subname,则返回 true

 eve.off(name, f)

从 listeners 列表中删除对应 name 的函数.

参数

name
string
事件的名字, 其中可以有点号 (. ) 或者斜线 (/ ), 也可以使用通配符
f
function
事件处理函数

 eve.on(name, f)

用给定的 name 绑定指定的 event handler. 可以在 name 中使用通配符 “*”:

eve.on("*.under.*", f);
eve("mouse.under.floor"); // 触发 f

这里使用 eve 来触发事件监听.

参数

name
string
事件的名字, 其中可以有点号 (. ) 或者斜线 (/ ), 也可以使用通配符
f
function
事件处理函数

返回: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.

 eve.once(name, f)

只触发一次的绑定; 用给定的 name 绑定指定的 event handler,只要触发一次,就会解绑自身.

eve.once("login", f);
eve("login"); // 触发 f
eve("login"); // 此时 listener 不再存在

这里使用 eve 来触发事件监听.

参数

name
string
事件的名字, 其中可以有点号 (. ) 或者斜线 (/ ), 也可以使用通配符
f
function
事件处理函数

返回:function返回的 function 和 eve.on 一样

 eve.stop()

在事件处理函数(event handler)中使用, 停止事件传播, 让框架不再触发其余的监听器(subsequent listeners).

 eve.unbind()

请参考 eve.off

 eve.version

string

此 raphaeljs 的版本号.