Check out the source: raphael.js
Creates copy of existing animation object with given delay.
Parameters
Returns: object new altered Animation object
Creates copy of existing animation object with given repetition.
Parameters
Infinity
Returns: object new altered Animation object
Creates and starts animation for given element.
Parameters
cubic-bezier(XX, XX, XX, XX)
or
Returns: object original element
Returns: object clone of a given element
Return bounding box for a given element
Parameters
true
if you want to have bounding box before transformations. Default is false
.Returns: object Bounding box object:
{
x: //top left corner x,
y: //top left corner y,
width: //width,
height: //height
}
Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.
Parameters
Returns: object representation of the point:
{
x: //x coordinate,
y: //y coordinate,
alpha: //angle of derivative
}
Return subpath of a given element from given length to given length. Only works for element of “path” type.
Parameters
Returns: string pathstring for the segment
Returns length of the path in pixels. Only works for element of “path” type.
Returns: number length.
Return set of elements that create glow-like effect around given element. See Paper.set.
Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.
Returns: object set of elements that represents glow
Adds rotation by given angle around given point to the list oftransformations of the element.
Parameters
If cx & cy aren’t specified centre of the shape is used as a point of rotation.
Returns: object Element
Adds scale by given amount relative to given point to the list oftransformations of the element.
Parameters
If cx & cy aren’t specified centre of the shape is used instead.
Returns: object Element
Sets the status of animation of the element in milliseconds. Similar to Element.status method.
Parameters
Returns: object original element if value
is specified
Gets or sets the status of animation of the element.
Parameters
Returns: number status
or
Returns: array status if anim
is not specified in format:
[{
anim: // animation object,
status: // status
}, {
anim: // animation object,
status: // status
}, ...]
or
Returns: object original element if value
is specified
Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change x
or y
of the rectange. The formatof 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 forscale and m
is for matrix.
So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.
Parameters
If tstr isn’t specified
Returns: string current transformation string
else
Returns: object Element
Adds translation by given amount to the list of transformations of the element.
Parameters
Returns: object Element
Points to the bottom element on the paper
Draws a circle.
Parameters
Returns: object Raphaël element object with type “circle”
Usage
var c = paper.circle(50, 50, 40);
Draws an ellipse.
Parameters
Returns: object 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 function returns false
it will stop loop running.
Parameters
Returns: object Paper object
Returns you element by it’s internal ID.
Parameters
Returns: object Raphaël element object
Returns you topmost element under given point.
Returns: object Raphaël element object
Parameters
Usage
paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
Embeds an image into the surface.
Parameters
Returns: object Raphaël element object with type “image”
Usage
var c = paper.image("apple.png", 10, 10, 80, 80);
Creates a path element by given path data string.
Parameters
Returns: object Raphaël element object with type “ellipse”
Details of a path's data attribute's format are described in the SVG specification.Usage
var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90
Points to the Raphael object/function
Draws a rectangle.
Parameters
Returns: object Raphaël element object with type “rect”
Usage
// regular rectangle
var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);
Creates array-like object to keep and operate couple of elements at once.Warning: it doesn’t create any elements for itself in the page.
Returns: object array-like object that represents set of elements
Usage
var st = paper.set();
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"});
If you need to change dimensions of the canvas call this method
Parameters
Usage
var st = paper.set();
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"});
Draws a text string. If you need line breaks, put “\n” in the string.
Parameters
Returns: object 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
Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.
Parameters
or
or
or
undefined
.Returns: object Paper
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);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
Returns angle between two or three points
Parameters
Returns: number angle in degrees.
Creates animation object. That later could be used for Element.animate or Element.animateWith methods.See also Animation.delay and Animation.repeat methods.
Parameters
cubic-bezier(XX, XX, XX, XX)
Returns: object Animation
Transform angle to degrees
Parameters
Returns: number angle in degrees.
Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:
See also Easing demo.
Utility methodFind dot coordinates on the given cubic bezier curve at the given t.
Parameters
Returns: object point information in format:
{
x: // x coordinate of the point,
y: // y coordinate of the point,
m: {
x: // x coordinate of the left anchor,
y: // y coordinate of the left anchor
},
n: {
x: // x coordinate of the right anchor,
y: // y coordinate of the right anchor
},
start: {
x: // x coordinate of the start of the curve,
y: // y coordinate of the start of the curve
},
end: {
x: // x coordinate of the end of the curve,
y: // y coordinate of the end of the curve
},
alpha: // angle of the curve derivative at the point.
}
You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend Raphael.fn
object. Please note that you can create your own namespacesinside fn
object. Methods will be run in context of canvas anyway. You should alter fn
object before Raphaël instance was created, otherwise it will take no effect.
Usage
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
return this.path( ... );
};
// or create namespace
Raphael.fn.mystuff = {
arrow: function () {…},
star: function () {…},
// etc…
};
var paper = Raphael(10, 10, 630, 480);
// then use it
paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"});
paper.mystuff.arrow();
paper.mystuff.star();
On each call returns next colour in the spectrum. To reset it back to red call Raphael.getColor.reset
Parameters
0.75
Returns: string hex representation of the colour.
Resets spectrum position for Raphael.getColor back to red.
Return coordinates of the point located at the given length on the given path.
Parameters
Returns: object representation of the point:
{
x: //x coordinate,
y: //y coordinate,
alpha: //angle of derivative
}
Parses colour string as RGB object
Parameters
Returns: object RGB object in format:
{
r: // red,
g: // green,
b: // blue
hex: // color in HTML/CSS format: #••••••,
error: // true if string can’t be parsed
}
Return subpath of a given path from given length to given length.
Parameters
Returns: string pathstring for the segment
Returns length of the given path in pixels.
Parameters
Returns: number length.
Converts HSB values to hex representation of the colour.
Parameters
Returns: string hex representation of the colour.
Converts HSB values to RGB object.
Parameters
Returns: object RGB object in format:
{
r: // red,
g: // green,
b: // blue
hex: // color in HTML/CSS format: #••••••
}
Converts HSL values to hex representation of the colour.
Parameters
Returns: string hex representation of the colour.
Converts HSL values to RGB object.
Parameters
Returns: object RGB object in format:
{
r: // red,
g: // green,
b: // blue
hex: // color in HTML/CSS format: #••••••
}
Handfull replacement for typeof
operator.
Parameters
Returns: boolean is given value is of given type
Utility methodParses given path string into an array of arrays of path segments.
Parameters
Returns: array array of segments.
Utility methodParses given path string into an array of transformations.
Parameters
Returns: array array of transformations.
Utility methodConverts path to path where all segments are cubic bezier curves.
Parameters
Returns: array array of segments.
Utility methodConverts path to relative form
Parameters
Returns: array array of segments.
Transform angle to radians
Parameters
Returns: number angle in radians.
Converts RGB values to hex representation of the colour.
Parameters
Returns: string hex representation of the colour.
Converts RGB values to HSB object.
Parameters
Returns: object HSB object in format:
{
h: // hue,
s: // saturation,
b: // brightness
}
Converts RGB values to HSL object.
Parameters
Returns: object HSL object in format:
{
h: // hue,
s: // saturation,
l: // luminosity
}
Used when you need to draw in <iframe>
. Switched window to the iframe one.
Parameters
Snaps given value to given grid.
Parameters
10
.Returns: number adjusted value.
true
if browser supports SVG.
Can be “SVG”, “VML” or empty, depending on browser support.
true
if browser supports VML.