Upload
juan-cortes
View
1.060
Download
0
Embed Size (px)
Citation preview
delay number
Returns: object
repeat number
Returns: object
Raphaël Reference
Creates a copy of existing animation object with given delay.
Parameters
number of ms to pass between animation start
and actual animation
new altered Animation object
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);circle1.animate(anim); // run the given animation immediatelycircle2.animate(anim.delay(500)); // run the given animation after 500 ms
Creates a copy of existing animation object with given repetition.
Parameters
number iterations of animation. For infinite
animation pass Infinity
new altered Animation object
Animation
Animation.delay(delay)
Animation.repeat(repeat)
Element
Raphaël Reference http://raphaeljs.com/reference.html
1 of 49 10/15/2011 12:33 PM
params object
ms number
easing string
callback function
animation object
Returns: object
element object
anim object
params object
ms number
easing string
callback function
element object
anim object
animation object
Returns: object
Creates and starts animation for given element.
Parameters
final attributes for the element, see also
number of milliseconds for animation to run
easing type. Accept one of or CSS format:
cubic‐bezier(XX, XX, XX, XX)
callback function. Will be called at the end of
animation.
or
animation object, see
original element
Acts similar to , but ensure that given animation runs in sync with another given
element.
Parameters
element to sync with
animation to sync with
final attributes for the element, see also
number of milliseconds for animation to run
easing type. Accept on of or CSS format:
cubic‐bezier(XX, XX, XX, XX)
callback function. Will be called at the end of
animation.
or
element to sync with
animation to sync with
animation object, see
original element
Element.animate(…)
Element.animateWith(…)
Element.attr(…)
Raphaël Reference http://raphaeljs.com/reference.html
2 of 49 10/15/2011 12:33 PM
attrName string
value string
params object
attrName string
attrNames array
Returns: object
Returns: ...
Returns: array
Returns: object
arrow-end string
clip-rect string
cursor string
cx number
cy number
fill string
fill-opacity number
font string
font-family string
font-size number
font-weight string
height number
href string
opacity
Sets the attributes of the element.
Parameters
attribute’s name
value
or
object of name/value pairs
or
attribute’s name
or
in this case method returns array of current
values for given attribute names
if attrsName & value or params are passed in.
value of the attribute if only attrsName is
passed in.
array of values of the attribute if attrsNames is
passed in.
object of attributes if nothing is passed in.
Possible parameters
Please refer to the SVG specification for an explanation of these parameters.
arrowhead on the end of the path. The format for string is
<type>[-<width>[-<length>]]. Possible types:
classic, block, open, oval, diamond, none, width:
wide, narrow, midium, length: long, short, midium.
comma or space separated values: x, y, width and height
CSS type of the cursor
colour, gradient or image
font size in pixels
URL, if specified element behaves as hyperlink
Raphaël Reference http://raphaeljs.com/reference.html
3 of 49 10/15/2011 12:33 PM
number
path string
r number
rx number
ry number
src string
stroke string
stroke-dasharray string
stroke-linecap string
stroke-linejoin string
stroke-miterlimit number
stroke-opacity number
stroke-width number
target string
text string
text-anchor string
title string
transform string
width number
x number
y number
SVG path string format
image URL, only works for element
stroke colour
[“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”,
“--..”]
[“butt”, “square”, “round”]
[“bevel”, “round”, “miter”]
stroke width in pixels, default is '1'
used with href
contents of the text element. Use \n for multiline text
[“start”, “middle”, “end”], default is “middle”
will create tooltip with a given text
see
Gradients
Linear gradient format: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “90-#fff-#000” – 90° gradient from white to black or
“0-#fff-#f00:20-#000” – 0° gradient from white via red (at 20%) to black.
radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “r#fff-#000” – gradient from white to black or “r(0.25,0.75)#fff-#000” – gradient from white to black with focus point at 0.25, 0.75.
Focus point coordinates are in 0..1 range. Radial gradients can only be applied to
circles and ellipses.
Path String
Please refer to SVG documentation regarding path string. Raphaël fully supports it.
Colour Parsing
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:
Raphaël Reference http://raphaeljs.com/reference.html
4 of 49 10/15/2011 12:33 PM
handler function
Returns: object
Returns: object
key string
value any
Returns: object
Returns: any
(“rgb(200, 100, 0)”)
rgb(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)
rgba(•••, •••, •••, •••) — red, green and blue channels’ values:
(“rgba(200, 100, 0, .5)”)
rgba(•••%, •••%, •••%, •••%) — same as above, but in %:
(“rgba(100%, 175%, 0%, 50%)”)
hsb(•••, •••, •••) — hue, saturation and brightness values:
(“hsb(0.5, 0.25, 1)”)
hsb(•••%, •••%, •••%) — same as above, but in %
hsba(•••, •••, •••, •••) — same as above, but with opacity
hsl(•••, •••, •••) — almost the same as hsb, see Wikipedia page
hsl(•••%, •••%, •••%) — same as above, but in %
hsla(•••, •••, •••, •••) — same as above, but with opacity
Optionally for hsb and hsl you could specify hue as a degree:
“hsl(240deg, 1, .5)” or, if you want to go fancy, “hsl(240°, 1, .5)”
Adds event handler for click for the element.
Parameters
handler for the event
clone of a given element
Adds or retrieves given value asociated with given key. See also
Parameters
key to store data
value to store
or, if value is not specified:
value
Usage
Element.click(handler)
Element.clone()
Element.data(key, [value])
Raphaël Reference http://raphaeljs.com/reference.html
5 of 49 10/15/2011 12:33 PM
handler function
Returns: object
onmove function
onstart function
onend function
mcontext object
scontext object
econtext object
x number
y number
event object
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")); });}
Adds event handler for double click for the element.
Parameters
handler for the event
Adds event handlers for drag of the element.
Parameters
handler for moving
handler for drag start
handler for drag end
context for moving handler
context for drag start handler
context for drag end handler
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:
x position of the mouse
y position of the mouse
DOM event object
Element.dblclick(handler)
Element.drag(onmove, onstart, onend,
[mcontext], [scontext], [econtext])
Raphaël Reference http://raphaeljs.com/reference.html
6 of 49 10/15/2011 12:33 PM
dx number
dy number
x number
y number
event object
event object
Returns: object
isWithoutTransform boolean
Returns: object
x: number
y: number
width: number
height: number
length number
Returns: object
Move event and move handler will be called in specified context or in context of the
element with following parameters:
shift by x from the start point
shift by y from the start point
x position of the mouse
y position of the mouse
DOM event object
End event and end handler will be called in specified context or in context of the
element with following parameters:
DOM event object
Return bounding box for a given element
Parameters
flag, true if you want to have bounding box
before transformations. Default is false.
Bounding box object:
{
top left corner x
top left corner y
width
height
}
Return coordinates of the point located at the given length on the given path. Only
works for element of “path” type.
Parameters
representation of the point:
Element.getBBox(isWithoutTransform)
Element.getPointAtLength(length)
Raphaël Reference http://raphaeljs.com/reference.html
7 of 49 10/15/2011 12:33 PM
x: number
y: number
alpha: number
from number
to number
Returns: string
Returns: number
glow object
width number
fill boolean
opacity number
offsetx number
offsety number
color string
{
x coordinate
y coordinate
angle of derivative
}
Return subpath of a given element from given length to given length. Only works for
element of “path” type.
Parameters
position of the start of the segment
position of the end of the segment
pathstring for the segment
Returns length of the path in pixels. Only works for element of “path” type.
length.
Return set of elements that create glow-like effect around given element. See .
Note: Glow is not connected to the element. If you change element attributes it won’t
adjust itself.
Parameters
parameters object with all properties optional:
{
size of the glow, default is 10will it be filled, default is falseopacity, default is 0.5horizontal offset, default is 0vertical offset, default is 0glow colour, default is black
Element.getSubpath(from, to)
Element.getTotalLength()
Element.glow([glow])
Raphaël Reference http://raphaeljs.com/reference.html
8 of 49 10/15/2011 12:33 PM
Returns: object
Returns: object
f_in function
f_out function
icontext object
ocontext object
Returns: object
number
Returns: object
Returns: object
}
of elements that represents glow
Makes element invisible. See .
Adds event handlers for hover for the element.
Parameters
handler for hover in
handler for hover out
context for hover in handler
context for hover out handler
Unique id of the element. Especially usesful when you want to listen
to events of the element, because all events are fired in format
<module>.<action>.<id>. Also useful for method.
Inserts current object after the given one.
Inserts current object before the given one.
Element.hide()
Element.hover(f_in, f_out, [icontext],
[ocontext])
Element.id
Element.insertAfter()
Element.insertBefore()
Element.mousedown(handler)
Raphaël Reference http://raphaeljs.com/reference.html
9 of 49 10/15/2011 12:33 PM
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
object
Adds event handler for mousedown for the element.
Parameters
handler for the event
Adds event handler for mousemove for the element.
Parameters
handler for the event
Adds event handler for mouseout for the element.
Parameters
handler for the event
Adds event handler for mouseover for the element.
Parameters
handler for the event
Adds event handler for mouseup for the element.
Parameters
handler for the event
Element.mousemove(handler)
Element.mouseout(handler)
Element.mouseover(handler)
Element.mouseup(handler)
Element.next
Raphaël Reference http://raphaeljs.com/reference.html
10 of 49 10/15/2011 12:33 PM
object
f function
object
Reference to the next element in the hierarchy.
Gives you a reference to the DOM object, so you can assign event
handlers or just mess around. Note: Don’t mess with it.
Usage
// draw a circle at coordinate 10,10 with radius of 10var 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 ).
Parameters
handler for event, first argument would be the
element you are dragging over
Internal reference to “paper” where object drawn. Mainly for use in
plugins and element extensions.
Usage
Raphael.el.cross = function () { this.attr({fill: "red"}); this.paper.path("M10,10L50,50M50,10L10,50") .attr({stroke: "red"});}
Element.node
Element.onDragOver(f)
Element.paper
Element.pause([anim])
Raphaël Reference http://raphaeljs.com/reference.html
11 of 49 10/15/2011 12:33 PM
anim object
Returns: object
object
object
key string
Returns: object
Stops animation of the element with ability to resume it later on.
Parameters
animation object
original element
Reference to the previous element in the hierarchy.
Internal reference to object. In case it is not available.
Usage
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});}
Removes element form the paper.
Removes value associated with an element by given key. If key is not provided,
removes all the data of the element.
Parameters
key
Resumes animation if it was paused with method.
Element.prev
Element.raphael
Element.remove()
Element.removeData([key])
Element.resume([anim])
Raphaël Reference http://raphaeljs.com/reference.html
12 of 49 10/15/2011 12:33 PM
anim object
Returns: object
deg number
cx number
cy number
Returns: object
sx number
sy number
cx number
cy number
Returns: object
anim object
value number
Returns:
Parameters
animation object
original element
Adds rotation by given angle around given point to the list of transformations of the
element.
Parameters
angle in degrees
x coordinate of the centre of rotation
y coordinate of the centre of rotation
If cx & cy aren’t specified centre of the shape is used as a point of rotation.
Adds scale by given amount relative to given point to the list of transformations of the
element.
Parameters
horisontal scale amount
vertical scale amount
x coordinate of the centre of scale
y coordinate of the centre of scale
If cx & cy aren’t specified centre of the shape is used instead.
Sets the status of animation of the element in milliseconds. Similar to method.
Parameters
animation object
number of milliseconds from the beginning of
the animation
Element.rotate(deg, [cx], [cy])
Element.scale(sx, sy, [cx], [cy])
Element.setTime(anim, value)
Raphaël Reference http://raphaeljs.com/reference.html
13 of 49 10/15/2011 12:33 PM
object
Returns: object
anim object
value number
Returns: number
Returns: array
anim: object
status: number
Returns: object
anim
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>.
Makes element visible. See .
Gets or sets the status of animation of the element.
Parameters
animation object
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.
status
or
status if anim is not specified. Array of objects
in format:
{
animation object
status
}
or
original element if value is specified
Stops animation of the element.
Parameters
Element.show()
Element.status([anim], [value])
Element.stop([anim])
Raphaël Reference http://raphaeljs.com/reference.html
14 of 49 10/15/2011 12:33 PM
object
Returns: object
Returns: object
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
animation object
original element
Moves the element so it is the furthest from the viewer’s eyes, behind other
elements.
Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
Adds event handler for touchcancel for the element.
Parameters
handler for the event
Adds event handler for touchend for the element.
Parameters
handler for the event
Adds event handler for touchmove for the element.
Parameters
handler for the event
Element.toBack()
Element.toFront()
Element.touchcancel(handler)
Element.touchend(handler)
Element.touchmove(handler)
Element.touchstart(handler)
Raphaël Reference http://raphaeljs.com/reference.html
15 of 49 10/15/2011 12:33 PM
handler function
Returns: object
Adds event handler for touchstart for the element.
Parameters
handler for the event
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 default is the centre point of the element.
Matrix accepts six parameters.
Usage
var el = paper.rect(10, 20, 300, 200);// translate 100, 100, rotate 45°, translate -100, 0el.transform("t100,100r45t-100,0");// if you want you can append or prepend transformationsel.transform("...t50,50");el.transform("s2...");// or even wrapel.transform("t50,50...t-50-50");// to reset transformation call method with empty stringel.transform("");// to get current value call it without parametersconsole.log(el.transform());
Element.transform([tstr])
Raphaël Reference http://raphaeljs.com/reference.html
16 of 49 10/15/2011 12:33 PM
tstr string
Returns: string
Returns: object
dx number
dy number
Returns: object
handler function
Returns: object
handler function
Returns: object
Parameters
transformation string
If tstr isn’t specified
current transformation string
else
Adds translation by given amount to the list of transformations of the element.
Parameters
horisontal shift
vertical shift
Removes event handler for click for the element.
Parameters
handler for the event
Removes event handler for double click for the element.
Parameters
handler for the event
Removes all drag event handlers from given element.
Element.translate(dx, dy)
Element.unclick(handler)
Element.undblclick(handler)
Element.undrag()
Element.unhover(f_in, f_out)
Raphaël Reference http://raphaeljs.com/reference.html
17 of 49 10/15/2011 12:33 PM
f_in function
f_out function
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
Removes event handlers for hover for the element.
Parameters
handler for hover in
handler for hover out
Removes event handler for mousedown for the element.
Parameters
handler for the event
Removes event handler for mousemove for the element.
Parameters
handler for the event
Removes event handler for mouseout for the element.
Parameters
handler for the event
Removes event handler for mouseover for the element.
Parameters
handler for the event
Element.unmousedown(handler)
Element.unmousemove(handler)
Element.unmouseout(handler)
Element.unmouseover(handler)
Raphaël Reference http://raphaeljs.com/reference.html
18 of 49 10/15/2011 12:33 PM
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
handler function
Returns: object
Removes event handler for mouseup for the element.
Parameters
handler for the event
Removes event handler for touchcancel for the element.
Parameters
handler for the event
Removes event handler for touchend for the element.
Parameters
handler for the event
Removes event handler for touchmove for the element.
Parameters
handler for the event
Removes event handler for touchstart for the element.
Parameters
handler for the event
Element.unmouseup(handler)
Element.untouchcancel(handler)
Element.untouchend(handler)
Element.untouchmove(handler)
Element.untouchstart(handler)
Raphaël Reference http://raphaeljs.com/reference.html
19 of 49 10/15/2011 12:33 PM
a number
b number
c number
d number
e number
f number
matrix object
Returns: object
Returns: object
a number
x number
y number
Adds given matrix to existing one.
Parameters
Returns copy of the matrix
Returns inverted version of the matrix
Rotates the matrix
Parameters
Scales the matrix
Matrix
Matrix.add(a, b, c, d, e, f, matrix)
Matrix.clone()
Matrix.invert()
Matrix.rotate(a, x, y)
Matrix.scale(x, [y], [cx], [cy])
Raphaël Reference http://raphaeljs.com/reference.html
20 of 49 10/15/2011 12:33 PM
x number
y number
cx number
cy number
Returns: object
dx number
dy number
scalex number
scaley number
shear number
rotate number
isSimple boolean
Returns: string
x number
y number
Parameters
Splits matrix into primitive transformations
in format:
translation by x
translation by y
scale by x
scale by y
shear
rotation in deg
could it be represented via simple transformations
Return transform string that represents given matrix
transform string
Translate the matrix
Parameters
Return x coordinate for given point after transformation described by the matrix. See
also
Matrix.split()
Matrix.toTransformString()
Matrix.translate(x, y)
Matrix.x(x, y)
Raphaël Reference http://raphaeljs.com/reference.html
21 of 49 10/15/2011 12:33 PM
x number
y number
Returns: number
x number
y number
Returns: number
object
x number
y number
r number
Returns: object
Parameters
x
Return y coordinate for given point after transformation described by the matrix. See
also
Parameters
y
Points to the bottom element on the paper
Shortcut for
Draws a circle.
Parameters
x coordinate of the centre
y coordinate of the centre
radius
Raphaël element object with type “circle”
Matrix.y(x, y)
Paper
Paper.bottom
Paper.ca
Paper.circle(x, y, r)
Raphaël Reference http://raphaeljs.com/reference.html
22 of 49 10/15/2011 12:33 PM
object
x number
Usage
var c = paper.circle(50, 50, 40);
Clears the paper, i.e. removes all the elements.
If you have a set of attributes that you would like to represent as a
function of some number you can do it easily with custom attributes:
Usage
paper.customAttributes.hue = function (num) { num = num % 1; return {fill: "hsb(" + num + ", 0.75, 1)"};};// Custom attribute “hue” will change fill// to be given hue with fixed saturation and brightness.// Now you can use it like this:var c = paper.circle(10, 10, 10).attr({hue: .45});// or even like this:c.animate({hue: 1}, 1e3);
// You could also create custom attribute// with 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);
Draws an ellipse.
Parameters
x coordinate of the centre
Paper.clear()
Paper.customAttributes
Paper.ellipse(x, y, rx, ry)
Raphaël Reference http://raphaeljs.com/reference.html
23 of 49 10/15/2011 12:33 PM
y number
rx number
ry number
Returns: object
callback function
thisArg object
Returns: object
id number
Returns: object
Returns: object
x number
y number
y coordinate of the centre
horizontal radius
vertical radius
Raphaël element object with type “ellipse”
Usage
var c = paper.ellipse(50, 50, 40, 20);
Executes given function for each element on the paper
If callback function returns false it will stop loop running.
Parameters
function to run
context object for the callback
Paper object
Returns you element by its internal ID.
Parameters
id
Raphaël element object
Returns you topmost element under given point.
Raphaël element object
Parameters
x coordinate from the top left corner of the
window
Paper.forEach(callback, thisArg)
Paper.getById(id)
Paper.getElementByPoint(x, y)
Raphaël Reference http://raphaeljs.com/reference.html
24 of 49 10/15/2011 12:33 PM
family string
weight string
style string
stretch string
Returns: object
src string
x number
y number
width number
height number
Returns: object
y coordinate from the top left corner of the window
Usage
paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
Finds font object in the registered fonts by given parameters. You could specify only
one word from the font name, like “Myriad” for “Myriad Pro”.
Parameters
font family name or any word from it
font weight
font style
font stretch
the font object
Usage
paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
Embeds an image into the surface.
Parameters
URI of the source image
x coordinate position
y coordinate position
width of the image
height of the image
Raphaël element object with type “image”
Usage
Paper.getFont(family, [weight], [style],
[stretch])
Paper.image(src, x, y, width, height)
Raphaël Reference http://raphaeljs.com/reference.html
25 of 49 10/15/2011 12:33 PM
pathString string
var c = paper.image("apple.png", 10, 10, 80, 80);
Creates a path element by given path data string.
Parameters
path string in SVG format.
Path string consists of one-letter commands, followed by comma seprarated
arguments in numercal form. Example:
"M10,20L30,40"
Here we can see two commands: “M”, with arguments (10, 20) and “L” with
arguments (30, 40). Upper case letter mean command is absolute, lower
case—relative.
Here is short list of commands available, for more details see 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)+
Tsmooth 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.
Usage
var c = paper.path("M10 10L90 90");// draw a diagonal line:
Paper.path([pathString])
Raphaël Reference http://raphaeljs.com/reference.html
26 of 49 10/15/2011 12:33 PM
x number
y number
text string
font object
size number
origin string
letter_spacing number
Returns: object
x number
y number
// move to 10,10, line to 90,90
Creates set of shapes to represent given font at given position with given size.
Result of the method is set object (see ) which contains each letter as separate path
object.
Parameters
x position of the text
y position of the text
text to print
font object, see
size of the font, default is 16
could be "baseline" or "middle", default is
"middle"
number in range -1..1, default is 0
resulting set of letters
Usage
var txt = r.print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});// following line will paint first letter in redtxt[0].attr({fill: "#f00"});
Points to the object/function
Draws a rectangle.
Parameters
x coordinate of the top left corner
y coordinate of the top left corner
Paper.print(x, y, text, font, [size], [origin],
[letter_spacing])
Paper.raphael
Paper.rect(x, y, width, height, [r])
Raphaël Reference http://raphaeljs.com/reference.html
27 of 49 10/15/2011 12:33 PM
width number
height number
r number
Returns: object
Returns: object
width
height
radius for rounded corners, default is 0
Raphaël element object with type “rect”
Usage
// regular rectanglevar c = paper.rect(10, 10, 50, 50);// rectangle with rounded cornersvar c = paper.rect(40, 40, 50, 50, 10);
Removes the paper from the 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.
array-like object that represents set of
elements
Usage
Paper.remove()
Paper.renderfix()
Paper.safari()
Paper.set()
Raphaël Reference http://raphaeljs.com/reference.html
28 of 49 10/15/2011 12:33 PM
Returns: object
width number
height number
var st = paper.set();st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5));st.attr({fill: "red"}); // changes the fill of both circles
See . This method finishes catching and returns resulting set.
set
If you need to change dimensions of the canvas call this method
Parameters
new width of the canvas
new height of the canvas
Usage
var st = paper.set();st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5));st.attr({fill: "red"});
Creates . All elements that will be created after calling this method and before calling
will be added to the set.
Usage
paper.setStart();paper.circle(10, 10, 5),
Paper.setFinish()
Paper.setSize(width, height)
Paper.setStart()
Raphaël Reference http://raphaeljs.com/reference.html
29 of 49 10/15/2011 12:33 PM
x number
y number
w number
h number
fit boolean
x number
y number
text string
Returns: object
paper.circle(30, 10, 5)var st = paper.setFinish();st.attr({fill: "red"}); // changes the fill of both circles
Sets the view box of the paper. Practically it gives you ability to zoom and pan whole
paper surface by specifying new boundaries.
Parameters
new x position, default is 0
new y position, default is 0
new width of the canvas
new height of the canvas
true if you want graphics to fit into new
boundary box
Draws a text string. If you need line breaks, put “\n” in the string.
Parameters
x coordinate position
y coordinate position
The text string to draw
Raphaël element object with type “text”
Usage
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
Points to the topmost element on the paper
Paper.setViewBox(x, y, w, h, fit)
Paper.text(x, y, text)
Paper.top
Raphael(…)
Raphaël Reference http://raphaeljs.com/reference.html
30 of 49 10/15/2011 12:33 PM
container HTMLElement string
width number
height number
callback function
x number
y number
width number
height number
callback function
all array
callback function
onReadyCallback function
Returns: object
Creates a canvas object on which to draw. You must do this first, as all future calls to
drawing methods from this instance will be bound to this canvas.
Parameters
DOM element or its ID which is
going to be a parent for drawing
surface
callback function which is going to be
executed in the context of newly created
paper
or
callback function which is going to be
executed in the context of newly created
paper
or
(first 3 or 4 elements in the array are equal to
[containerID, width, height] or [x, y, width,
height]. The rest are element descriptions in
format {type: type, <attributes>})
callback function which is going to be
executed in the context of newly created
paper
or
function that is going to be called on DOM
ready event. You can also subscribe to this
event via Eve’s “DOMLoad” event. In this case
method returns undefined.
Usage
// Each of the following examples create a canvas// that is 320px wide by 200px high.// Canvas is created at the viewport’s 10,50 coordinate.var paper = Raphael(10, 50, 320, 200);
Raphaël Reference http://raphaeljs.com/reference.html
31 of 49 10/15/2011 12:33 PM
x1 number
y1 number
x2 number
y2 number
x3 number
y3 number
Returns: number
// 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 abovevar paper = Raphael("notepad", 320, 200);// Image dumpvar 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
Parameters
x coord of first point
y coord of first point
x coord of second point
y coord of second point
x coord of third point
y coord of third point
angle in degrees.
Creates an animation object that can be passed to the or methods. See also and
methods.
Raphael.angle(x1, y1, x2, y2, [x3], [y3])
Raphael.animation(params, ms, [easing],
[callback])
Raphaël Reference http://raphaeljs.com/reference.html
32 of 49 10/15/2011 12:33 PM
params object
ms number
easing string
callback function
Returns: object
clr string
Returns: object
r number
g number
b number
hex string
error boolean
h number
s number
v number
l number
deg
Parameters
final attributes for the element, see also
number of milliseconds for animation to run
easing type. Accept one of or CSS format:
cubic‐bezier(XX, XX, XX, XX)
callback function. Will be called at the end of
animation.
Parses the color string and returns object with all values for the given color.
Parameters
color string in one of the supported formats
(see )
Combined RGB & HSB object in format:
{
red,
green,
blue,
color in HTML/CSS format: #••••••,
true if string can’t be parsed,
hue,
saturation,
value (brightness),
lightness
}
Returns RFC4122, version 4 ID
Transform angle to degrees
Parameters
Raphael.color(clr)
Raphael.createUUID()
Raphael.deg(deg)
Raphaël Reference http://raphaeljs.com/reference.html
33 of 49 10/15/2011 12:33 PM
number
Returns: number
object
angle in radians
angle in degrees.
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”
See also 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.
Usage
Raphael.el.red = function () { this.attr({fill: "#f00"});};// then use itpaper.circle(100, 100, 20).red();
Utility method Find dot coordinates on the given cubic bezier curve at the given t.
Raphael.easing_formulas
Raphael.el
Raphael.findDotsAtSegment(p1x, p1y, c1x,
c1y, c2x, c2y, p2x, p2y, t)
Raphaël Reference http://raphaeljs.com/reference.html
34 of 49 10/15/2011 12:33 PM
p1x number
p1y number
c1x number
c1y number
c2x number
c2y number
p2x number
p2y number
t number
Returns: object
x: number
y: number
x: number
y: number
x: number
y: number
x: number
y: number
x: number
y: number
alpha: number
object
Parameters
x of the first point of the curve
y of the first point of the curve
x of the first anchor of the curve
y of the first anchor of the curve
x of the second anchor of the curve
y of the second anchor of the curve
x of the second point of the curve
y of the second point of the curve
position on the curve (0..1)
point information in format:
{
x coordinate of the point
y coordinate of the point
m: {
x coordinate of the left anchor
y coordinate of the left anchor
}
n: {
x coordinate of the right anchor
y coordinate of the right anchor
}
start: {
x coordinate of the start of the curve
y coordinate of the start of the curve
}
end: {
x coordinate of the end of the curve
y coordinate of the end of the curve
}
angle of the curve derivative at the point
}
You can add your own method to the canvas. For example if you want
to draw a pie chart, you can create your own pie chart function and
ship it as a Raphaël plugin. To do this you need to extend the Raphael.fn object.
Please note that you can create your own namespaces inside the fn object —
Raphael.fn
Raphaël Reference http://raphaeljs.com/reference.html
35 of 49 10/15/2011 12:33 PM
token string
… string
Returns: string
methods will be run in the context of canvas anyway. You should alter the fn object
before a Raphaël instance is created, otherwise it will take no effect.
Usage
Raphael.fn.arrow = function (x1, y1, x2, y2, size) { return this.path( ... );};// or create namespaceRaphael.fn.mystuff = { arrow: function () {…}, star: function () {…}, // etc…};var paper = Raphael(10, 10, 630, 480);// then use itpaper.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.
Parameters
string to format
rest of arguments will be treated as
parameters for replacement
formated string
Usage
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{1},{2}h{3}v{4}h{5}z", x, y, width, height, -width));
Raphael.format(token, …)
Raphaël Reference http://raphaeljs.com/reference.html
36 of 49 10/15/2011 12:33 PM
token string
json object
Returns: string
value number
Returns: string
A little bit more advanced format function than . Replaces construction of type
“{<name>}” to the corresponding argument.
Parameters
string to format
object which properties will be used as a
replacement
formated string
Usage
// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"paper.path(Raphael.format("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
Parameters
brightness, default is 0.75
hex representation of the colour.
Resets spectrum position for back to red.
Return coordinates of the point located at the given length on the given path.
Raphael.fullfill(token, json)
Raphael.getColor([value])
Raphael.getColor.reset()
Raphael.getPointAtLength(path, length)
Raphaël Reference http://raphaeljs.com/reference.html
37 of 49 10/15/2011 12:33 PM
path string
length number
Returns: object
x: number
y: number
alpha: number
colour string
Returns: object
r number
g number
b number
hex string
error boolean
Parameters
SVG path string
representation of the point:
{
x coordinate
y coordinate
angle of derivative
}
Parses colour string as RGB object
Parameters
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(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)
hsb(•••, •••, •••) — hue, saturation and brightness values:
(“hsb(0.5, 0.25, 1)”)
hsb(•••%, •••%, •••%) — same as above, but in %
hsl(•••, •••, •••) — same as hsb
hsl(•••%, •••%, •••%) — same as hsb
RGB object in format:
{
red,
green,
blue
color in HTML/CSS format: #••••••,
true if string can’t be parsed
}
Raphael.getRGB(colour)
Raphaël Reference http://raphaeljs.com/reference.html
38 of 49 10/15/2011 12:33 PM
path string
from number
to number
Returns: string
path string
Returns: number
h number
s number
b number
Returns: string
h number
s number
v number
Returns:
Return subpath of a given path from given length to given length.
Parameters
SVG path string
position of the start of the segment
position of the end of the segment
pathstring for the segment
Returns length of the given path in pixels.
Parameters
SVG path string.
length.
Converts HSB values to hex representation of the colour.
Parameters
hue
saturation
value or brightness
hex representation of the colour.
Converts HSB values to RGB object.
Parameters
hue
saturation
value or brightness
Raphael.getSubpath(path, from, to)
Raphael.getTotalLength(path)
Raphael.hsb(h, s, b)
Raphael.hsb2rgb(h, s, v)
Raphaël Reference http://raphaeljs.com/reference.html
39 of 49 10/15/2011 12:33 PM
object
r number
g number
b number
hex string
h number
s number
l number
Returns: string
h number
s number
l number
Returns: object
r number
g number
b number
hex string
RGB object in format:
{
red,
green,
blue,
color in HTML/CSS format: #••••••
}
Converts HSL values to hex representation of the colour.
Parameters
hue
saturation
luminosity
hex representation of the colour.
Converts HSL values to RGB object.
Parameters
hue
saturation
luminosity
RGB object in format:
{
red,
green,
blue,
color in HTML/CSS format: #••••••
}
Raphael.hsl(h, s, l)
Raphael.hsl2rgb(h, s, l)
Raphael.is(o, type)
Raphaël Reference http://raphaeljs.com/reference.html
40 of 49 10/15/2011 12:33 PM
o …
type string
Returns: boolean
a number
b number
c number
d number
e number
f number
Returns: object
Returns: object
Handfull replacement for typeof operator.
Parameters
any object or primitive
name of the type, i.e. “string”, “function”,
“number”, etc.
is given value is of given type
Utility method Returns matrix based on given parameters.
Parameters
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.
Raphael object
Usage
(function (local_raphael) { var paper = local_raphael(10, 10, 320, 200); …})(Raphael.ninja());
Raphael.matrix(a, b, c, d, e, f)
Raphael.ninja()
Raphael.parsePathString(pathString)
Raphaël Reference http://raphaeljs.com/reference.html
41 of 49 10/15/2011 12:33 PM
pathString string array
Returns: array
TString string array
Returns: array
pathString string array
Returns: array
pathString string array
Returns: array
Utility method Parses given path string into an array of arrays of path segments.
Parameters
path string or array of segments
(in the last case it will be
returned straight away)
array of segments.
Utility method Parses given path string into an array of transformations.
Parameters
transform string or array of
transformations (in the last case
it will be returned straight away)
array of transformations.
Utility method Converts path to a new path where all segments are cubic bezier
curves.
Parameters
path string or array of segments
array of segments.
Utility method Converts path to relative form
Parameters
path string or array of segments
array of segments.
Raphael.parseTransformString(TString)
Raphael.path2curve(pathString)
Raphael.pathToRelative(pathString)
Raphaël Reference http://raphaeljs.com/reference.html
42 of 49 10/15/2011 12:33 PM
deg number
Returns: number
font object
Returns: object
r number
g number
b number
Returns: string
Transform angle to radians
Parameters
angle in degrees
angle 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.
Parameters
the font to register
the font you passed in
Usage
Cufon.registerFont(Raphael.registerFont({…}));
Converts RGB values to hex representation of the colour.
Parameters
red
green
blue
hex representation of the colour.
Converts RGB values to HSB object.
Raphael.rad(deg)
Raphael.registerFont(font)
Raphael.rgb(r, g, b)
Raphael.rgb2hsb(r, g, b)
Raphaël Reference http://raphaeljs.com/reference.html
43 of 49 10/15/2011 12:33 PM
r number
g number
b number
Returns: object
h number
s number
b number
r number
g number
b number
Returns: object
h number
s number
l number
newwin window
Parameters
red
green
blue
HSB object in format:
{
hue
saturation
brightness
}
Converts RGB values to HSL object.
Parameters
red
green
blue
HSL object in format:
{
hue
saturation
luminosity
}
Used when you need to draw in <iframe>. Switched window to the iframe one.
Parameters
new window object
Raphael.rgb2hsl(r, g, b)
Raphael.setWindow(newwin)
Raphael.snapTo(values, value, [tolerance])
Raphaël Reference http://raphaeljs.com/reference.html
44 of 49 10/15/2011 12:33 PM
values array number
value number
tolerance number
Returns: number
object
boolean
string
boolean
Snaps given value to given grid.
Parameters
given array of values or step of
the grid
value to adjust
tolerance for snapping. Default is 10.
adjusted 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. See also .
Usage
Raphael.el.red = function () { this.attr({fill: "#f00"});};Raphael.st.red = function () { this.forEach(function () { this.red(); });};// then use itpaper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();
true if browser supports SVG.
Can be “SVG”, “VML” or empty, depending on browser support.
Raphael.st
Raphael.svg
Raphael.type
Raphael.vml
Raphaël Reference http://raphaeljs.com/reference.html
45 of 49 10/15/2011 12:33 PM
element object
Returns: boolean
callback function
thisArg object
Returns: object
Returns: object
true if browser supports VML.
Removeds all elements from the set
Removes given element from the set
Parameters
element to remove
true if object was found & removed from the
set
Executes given function for each element in the set.
If function returns false it will stop loop running.
Parameters
function to run
context object for the callback
Set object
Removes last element and returns it.
element
Set
Set.clear()
Set.exclude(element)
Set.forEach(callback, thisArg)
Set.pop()
Set.push()
Raphaël Reference http://raphaeljs.com/reference.html
46 of 49 10/15/2011 12:33 PM
Returns: object
index number
count number
insertion… object
Returns: object
name string
scope object
varargs ...
Returns: object
name string
Returns: array
Adds each argument to the current set.
original element
Removes given element from the set
Parameters
position of the deletion
number of element to remove
elements to insert
set elements that were deleted
Fires event with given name, given scope and other parameters.
Arguments
name of the event, dot (.) or slash (/)
separated
context for the event handlers
the rest of arguments will be sent to event
handlers
array of returned values from the listeners
Internal method which gives you array of all event handlers that will be triggered by
the given name.
Arguments
name of the event, dot (.) or slash (/)
separated
array of event handlers
Set.splice(index, count, [insertion…])
eve(name, scope, varargs)
eve.listeners(name)
Raphaël Reference http://raphaeljs.com/reference.html
47 of 49 10/15/2011 12:33 PM
subname string
Returns: string
Returns: boolean
name string
f function
Returns: function
Could be used inside event handler to figure out actual name of the event.
Arguments
subname of the event
name of the event, if subname is not specified
or
true, if current event’s name contains
subname
Binds given event handler with a given name. You can use wildcards “*” for the
names:
eve.on("*.under.*", f);eve("mouse.under.floor"); // triggers f
Use to trigger the listener.
Arguments
name of the event, dot (.) or slash (/)
separated, with optional wildcards
event handler function
returned function accept one number
parameter that represents z-index of the handler. It is optional feature and only used
when you need to ensure that some subset of handlers will be invoked in a given
order, despite of the order of assignment.
Example:
eve.on("mouse", eat)(2);eve.on("mouse", scream);eve.on("mouse", catch)(1);
This will ensure that catch function will be called before eat. If you want to put you
hadler before not indexed handlers specify negative value. Note: I assume most of
eve.nt([subname])
eve.on(name, f)
Raphaël Reference http://raphaeljs.com/reference.html
48 of 49 10/15/2011 12:33 PM
name string
f function
string
the time you don’t need to worry about z-index, but it’s nice to have this feature “just
in case”.
Is used inside event handler to stop event
Removes given function from the list of event listeners assigned to given name.
Arguments
name of the event, dot (.) or slash (/)
separated, with optional wildcards
event handler function
Current version of the library.
eve.stop()
eve.unbind(name, f)
eve.version
Raphaël Reference http://raphaeljs.com/reference.html
49 of 49 10/15/2011 12:33 PM