Check out the source: raphael.js
Creates copy of existing animation object with given delay. +
Creates a copy of existing animation object with given delay.
Parameters
@@ -11,8 +11,12 @@Returns: object new altered Animation object
-Creates copy of existing animation object with given repetition. +
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
+circle1.animate(anim); // run the given animation immediately
+circle2.animate(anim.delay(500)); // run the given animation after 500 ms
+Creates a copy of existing animation object with given repetition.
Parameters
@@ -21,9 +25,9 @@InfinityReturns: object new altered Animation object
-Creates and starts animation for given element. +
Creates and starts animation for given element.
Parameters
@@ -36,7 +40,7 @@cubic‐bezier(XX, XX, XX, XX)cubic‐bezier(XX, XX, XX, XX)Returns: object original element
-Acts similar to Element.animate, but ensure that given animation runs in sync with another given element. +
Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.
Parameters
-or
-Returns: object original element
-Sets the attributes of the element. +
Sets the attributes of the element.
Parameters
@@ -116,8 +135,8 @@
<type>[-<width>[-<length>]]. Possible types: classic, block, open, oval, diamond, none, width: wide, narrow, midium, length: long, short, midium.
-â, â.â, â-.â, â-..â, â. â, â- â, â--â, â- .â, â--.â, â--..â]
@@ -174,13 +193,62 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can o
hsl(240deg, 1, .5)â or, if you want to go fancy, âhsl(240°, 1, .5)âReturns: object clone of a given element
-Adds event handlers for drag of the element. +
Adds event handler for click for the element. +
+Parameters +
+Returns: object Element
+Returns: object clone of a given element
+Adds or retrieves given value asociated with given key. +See also Element.removeData +
+Parameters +
+Returns: object Element
+or, if value is not specified: +
+Returns: any value
+Usage +
+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 +
+Returns: object Element
+Adds event handlers for drag of the element.
Parameters
@@ -229,8 +297,8 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can oReturns: object Element
-Return bounding box for a given element +
Return bounding box for a given element
Parameters
@@ -244,8 +312,8 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can oReturn coordinates of the point located at the given length on the given path. Only works for element of âpathâ type. +
Return coordinates of the point located at the given length on the given path. Only works for element of âpathâ type.
Parameters
@@ -258,8 +326,8 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can oReturn subpath of a given element from given length to given length. Only works for element of âpathâ type. +
Return subpath of a given element from given length to given length. Only works for element of âpathâ type.
Parameters
@@ -271,22 +339,36 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can oReturns: string pathstring for the segment
-Returns length of the path in pixels. Only works for element of âpathâ type. +
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. +
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. +
Note: Glow is not connected to the element. If you change element attributes it wonât adjust itself.
+Parameters +
+10
+false
+0.5
+0
+0
+black
+Returns: object Paper.set of elements that represents glow
-Makes element invisible. See Element.show. +
Makes element invisible. See Element.show.
Returns: object Element
-Adds event handlers for hover for the element. +
Adds event handlers for hover for the element.
Parameters
@@ -306,23 +388,74 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can oReturns: object Element
-Unique id of the element. Especially usesful when you want to listen to events of the element, +
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 Paper.getById method.
Inserts current object after the given one. +
Inserts current object after the given one. +
+Returns: object Element
+Inserts current object before the given one. +
+Returns: object Element
+Adds event handler for mousedown for the element. +
+Parameters +
+Returns: object Element
+Adds event handler for mousemove for the element. +
+Parameters +
+Returns: object Element
+Adds event handler for mouseout for the element. +
+Parameters
+Returns: object Element
-Inserts current object before the given one. +
Adds event handler for mouseover for the element.
+Parameters +
+Returns: object Element
-Reference to the next element in the hierarchy. +
Adds event handler for mouseup for the element.
-Gives you a reference to the DOM object, so you can assign event handlers or just mess around. +
Parameters +
+Returns: object Element
+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
@@ -332,17 +465,17 @@ c.node.onclick = function () { c.attr("fill", "red"); }; -Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id).
+
Shortcut for assigning event handler for drag.over.<id> event, where id is id of the element (see Element.id).
Parameters
Internal reference to âpaperâ where object drawn. Mainly for use in plugins and element extensions. +
Internal reference to âpaperâ where object drawn. Mainly for use in plugins and element extensions.
Usage
@@ -352,8 +485,8 @@ c.node.onclick = function () { .attr({stroke: "red"}); } -Stops animation of the element with ability to resume it later on. +
Stops animation of the element with ability to resume it later on.
Parameters
@@ -363,11 +496,11 @@ c.node.onclick = function () {Returns: object original element
-Reference to the previous element in the hierarchy. +
Reference to the previous element in the hierarchy.
-Internal reference to Raphael object. In case it is not available. +
Internal reference to Raphael object. In case it is not available.
Usage
@@ -377,11 +510,23 @@ c.node.onclick = function () { this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex}); } -Removes element form the paper. +
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.
-Resumes animation if it was paused with Element.pause method. +
Parameters +
+Returns: object Element
+Resumes animation if it was paused with Element.pause method.
Parameters
@@ -391,8 +536,8 @@ c.node.onclick = function () {Returns: object original element
-Adds rotation by given angle around given point to the list of +
Adds rotation by given angle around given point to the list of transformations of the element.
Parameters @@ -412,8 +557,8 @@ transformations of the element.
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 of +
Adds scale by given amount relative to given point to the list of transformations of the element.
Parameters @@ -436,8 +581,8 @@ transformations of the element.
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. +
Sets the status of animation of the element in milliseconds. Similar to Element.status method.
Parameters
@@ -453,12 +598,12 @@ transformations of the element.On each animation frame event anim.frame.<id>, on start anim.start.<id> and on end anim.finish.<id>.
Makes element visible. See Element.hide. +
Makes element visible. See Element.hide.
Returns: object Element
-Gets or sets the status of animation of the element. +
Gets or sets the status of animation of the element.
Parameters
@@ -481,8 +626,8 @@ transformations of the element.or
Returns: object original element if value is specified
Stops animation of the element. +
Stops animation of the element.
Parameters
@@ -492,16 +637,56 @@ transformations of the element.Returns: 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 furthest from the viewerâs eyes, behind other elements.
Returns: object Element
-Moves the element so it is the closest to the viewerâs eyes, on top of other elements. +
Moves the element so it is the closest to the viewerâs eyes, on top of other elements.
Returns: object Element
-Adds transformation to the element which is separate to other attributes, +
Adds event handler for touchcancel for the element. +
+Parameters +
+Returns: object Element
+Adds event handler for touchend for the element. +
+Parameters +
+Returns: object Element
+Adds event handler for touchmove for the element. +
+Parameters +
+Returns: object Element
+Adds event handler for touchstart for the element. +
+Parameters +
+Returns: object Element
+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:
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.
So, example line could be read like âtranslate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100 -rotate 45° around centre and scale 1.5 times relative to centreâ. As you see rotate and scale commands has origin -coordinates as a optional parameters. +
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 @@ -543,8 +730,8 @@ console.log(el.transform());
else
Returns: object Element
-Adds translation by given amount to the list of transformations of the element. +
Adds translation by given amount to the list of transformations of the element.
Parameters
@@ -556,11 +743,31 @@ console.log(el.transform());Returns: object Element
-Removes all drag event handlers from given element. +
Removes event handler for click for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for double click for the element.
-Removes event handlers for hover for the element. +
Parameters +
+Returns: object Element
+Removes all drag event handlers from given element. +
+Removes event handlers for hover for the element.
Parameters
@@ -572,12 +779,260 @@ console.log(el.transform());Returns: object Element
-Points to the bottom element on the paper +
Removes event handler for mousedown for the element.
-Draws a circle. +
Parameters +
+Returns: object Element
+Removes event handler for mousemove for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for mouseout for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for mouseover for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for mouseup for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for touchcancel for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for touchend for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for touchmove for the element. +
+Parameters +
+Returns: object Element
+Removes event handler for touchstart for the element. +
+Parameters +
+Returns: object Element
+Adds given matrix to existing one. +
+Parameters +
+Returns copy of the matrix +
+Returns: object Matrix
+Returns inverted version of the matrix +
+Returns: object Matrix
+Rotates the matrix +
+Parameters +
+Scales the matrix +
+Parameters +
+Splits matrix into primitive transformations +
+Returns: object in format:
+Return transform string that represents given matrix +
+Returns: string transform string
+Translate the matrix +
+Parameters +
+Return x coordinate for given point after transformation described by the matrix. See also Matrix.y +
+Parameters +
+Returns: number x
+Return y coordinate for given point after transformation described by the matrix. See also Matrix.x +
+Parameters +
+Returns: number y
+Imports elements in JSON array in format {type: type, <attributes>}
+
Parameters +
+Returns: object resulting set of imported elements
+Usage +
+
paper.import([
+ {
+ type: "circle",
+ cx: 10,
+ cy: 10,
+ r: 5
+ },
+ {
+ type: "rect",
+ x: 10,
+ y: 10,
+ width: 10,
+ height: 10,
+ fill: "#fc0"
+ }
+]);
+Points to the bottom element on the paper +
+Shortcut for Paper.customAttributes +
+Draws a circle.
Parameters
@@ -596,18 +1051,18 @@ console.log(el.transform());var c = paper.circle(50, 50, 40);
Clears the paper, i.e. removes all the elements. +
Clears the paper, i.e. removes all the elements.
-If you have a set of attributes that you would like to represent +
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 + ", .75, 1)"};
+ return {fill: "hsb(" + num + ", 0.75, 1)"};
};
// Custom attribute âhueâ will change fill
// to be given hue with fixed saturation and brightness.
@@ -621,11 +1076,11 @@ c.animate({hue: 1}, 1e3);
paper.customAttributes.hsb = function (h, s, b) {
return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
-c.attr({hsb: ".5 .8 1"});
-c.animate({hsb: "1 0 .5"}, 1e3);
+c.attr({hsb: "0.5 .8 1"});
+c.animate({hsb: [1, 0, 0.5]}, 1e3);
Draws an ellipse. +
Draws an ellipse.
Parameters
@@ -637,7 +1092,7 @@ c.animate({hsb: "1 0 y coordinate of the centrevar c = paper.ellipse(50, 50, 40, 20);
Executes given function for each element on the paper +
Executes given function for each element on the paper
-If function returns false it will stop loop running.
+
If callback function returns false it will stop loop running.
Parameters
@@ -662,8 +1117,8 @@ c.animate({hsb: "1 0 context object for the callbackReturns: object Paper object
-Returns you element by itâs internal ID. +
Returns you element by its internal ID.
Parameters
@@ -672,8 +1127,8 @@ c.animate({hsb: "1 0 idReturns: object Raphaël element object
-Returns you topmost element under given point. +
Returns you topmost element under given point.
Returns: object Raphaël element object
Parameters
@@ -689,8 +1144,34 @@ c.animate({hsb: "1 0
-paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
Embeds an image into the surface. +
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 +
+Returns: object the font object
+Usage +
+paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
+Embeds an image into the surface.
Parameters
@@ -715,28 +1196,87 @@ c.animate({hsb: "1 0var c = paper.image("apple.png", 10, 10, 80, 80);
Creates a path element by given path data string. +
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. +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)+ |
| T | smooth quadratic Bézier curveto | (x y)+ |
| A | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom curveto* | x1 y1 (x y)+ |
* âCatmull-Rom curvetoâ is a not standard SVG command and added in 2.0 to make life easier. +
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 +
Creates set of shapes to represent given font at given position with given size. +Result of the method is set object (see Paper.set) which contains each letter as separate path object.
-Parameters +
+16"baseline" or "middle", default is "middle"-1..1, default is 0Returns: object 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 red
+txt[0].attr({fill: "#f00"});
+Points to the Raphael object/function +
+Draws a rectangle.
Parameters
@@ -753,9 +1293,10 @@ Details of a path's data attribute's format are described in the height
Returns: object Raphaël element object with type ârectâ Usage
@@ -765,33 +1306,23 @@ Details of a path's data attribute's format are described in the // rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);
-
Removes the paper from the DOM. +
Removes the paper from the DOM.
-Adds event handlers for hover for the element. +
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.
-Parameters +
There is an inconvenient rendering bug in Safari (WebKit): +sometimes the rendering should be forced. +This method should help with dealing with this bug.
-Returns: object Element
-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. +
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.
Returns: object array-like object that represents set of elements
Usage @@ -801,10 +1332,14 @@ st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5) ); -st.attr({fill: "red"}); +st.attr({fill: "red"}); // changes the fill of both circles -
If you need to change dimensions of the canvas call this method +
See Paper.setStart. This method finishes catching and returns resulting set. +
+Returns: object set
+If you need to change dimensions of the canvas call this method
Parameters
@@ -824,8 +1359,20 @@ st.push( ); st.attr({fill: "red"}); -Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by +
Creates Paper.set. All elements that will be created after calling this method and before calling +Paper.setFinish will be added to the set. +
+Usage +
+
paper.setStart();
+paper.circle(10, 10, 5),
+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 @@ -846,8 +1393,8 @@ specifying new boundaries.
true if you want graphics to fit into new boundary boxDraws a text string. If you need line breaks, put â\nâ in the string. +
Draws a text string. If you need line breaks, put â\nâ in the string.
Parameters
@@ -866,11 +1413,11 @@ specifying new boundaries.var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
Points to the topmost element on the paper +
Points to the topmost element on the paper
-Creates a canvas object on which to draw. +
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.
@@ -878,13 +1425,17 @@ from this instance will be bound to this canvas.or
@@ -900,12 +1451,20 @@ from this instance will be bound to this canvas.or
or
@@ -916,8 +1475,9 @@ from this instance will be bound to this canvas.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
+// 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)
@@ -939,8 +1499,8 @@ from this instance will be bound to this canvas.
text: "Dump"
}]);
-Returns angle between two or three points +
Returns angle between two or three points
Parameters
@@ -966,8 +1526,8 @@ from this instance will be bound to this canvas.Returns: number angle in degrees.
-Creates animation object. That later could be used for Element.animate or Element.animateWith methods. +
Creates an animation object that can be passed to the Element.animate or Element.animateWith methods. See also Animation.delay and Animation.repeat methods.
Parameters
@@ -988,8 +1548,31 @@ See also Animation.delay and callback function. Will be called at the end of animation.
Returns: object Animation
Transform angle to degrees +
Parses the color string and returns object with all values for the given color. +
+Parameters +
+Returns: object Combined RGB & HSB object in format:
+true if string canât be parsed,
+Returns RFC4122, version 4 ID +
+Transform angle to degrees
Parameters
@@ -998,8 +1581,8 @@ See also Animation.delay and angle in radiansReturns: 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: +
Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
See also Easing demo.
-You can add your own method to elements. This is usefull when you want to hack default functionality or +
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 +you can redefine element method at any time. Expending element methods wouldnât affect set.
Usage
@@ -1025,8 +1608,8 @@ you can redefine element method at any time. Expending element methods wouldnâ // then use it paper.circle(100, 100, 20).red(); -Utility method +
Utility method Find dot coordinates on the given cubic bezier curve at the given t.
Parameters @@ -1072,12 +1655,13 @@ Find dot coordinates on the given cubic bezier curve at the given t.
You can add your own method to the canvas. For example if you want to draw pie chart, +
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 Raphael.fn object. Please note that you can create your own namespaces
-inside 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.
+you need to extend the Raphael.fn object. You should modify the fn object before a
+Raphaël instance is created, otherwise it will take no effect. Please note that the
+ability for namespaced plugins was removed in Raphael 2.0. It is up to the plugin to
+ensure any namespacing ensures proper context.
Usage
@@ -1096,8 +1680,56 @@ paper.arrow(10, 10, Raphael.getColor([value])⚓➭ -On each call returns next colour in the spectrum. To reset it back to red call Raphael.getColor.reset +
Simple format function. Replaces construction of type â{<number>}â to the corresponding argument.
+
Parameters +
+Returns: string 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{0},{1}h{2}v{3}h{4}z", x, y, width, height, -width));
+A little bit more advanced format function than Raphael.format. Replaces construction of type â{<name>}â to the corresponding argument.
+
Parameters +
+Returns: string 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 Raphael.getColor.reset
Parameters
@@ -1107,11 +1739,11 @@ paper.mystuff.star();0.75Returns: string hex representation of the colour.
-Resets spectrum position for Raphael.getColor back to red. +
Resets spectrum position for Raphael.getColor back to red.
-Return coordinates of the point located at the given length on the given path. +
Return coordinates of the point located at the given length on the given path.
Parameters
@@ -1127,8 +1759,8 @@ paper.mystuff.star();Parses colour string as RGB object +
Parses colour string as RGB object
Parameters
@@ -1136,6 +1768,17 @@ paper.mystuff.star();redâ, âgreenâ, âcornflowerblueâ, etc)#000â, â#fc0â, etc)#000000â, â#bd2300â)rgb(200, 100, 0)â)rgb(100%, 175%, 0%)â)hsb(0.5, 0.25, 1)â)Returns: object RGB object in format:
Return subpath of a given path from given length to given length. +
Return subpath of a given path from given length to given length.
Parameters
@@ -1159,8 +1802,8 @@ paper.mystuff.star();Returns: string pathstring for the segment
-Returns length of the given path in pixels. +
Returns length of the given path in pixels.
Parameters
@@ -1169,8 +1812,8 @@ paper.mystuff.star();Returns: number length.
-Converts HSB values to hex representation of the colour. +
Converts HSB values to hex representation of the colour.
Parameters
@@ -1185,8 +1828,8 @@ paper.mystuff.star();Returns: string hex representation of the colour.
-Converts HSB values to RGB object. +
Converts HSB values to RGB object.
Parameters
@@ -1206,8 +1849,8 @@ paper.mystuff.star();Converts HSL values to hex representation of the colour. +
Converts HSL values to hex representation of the colour.
Parameters
@@ -1222,8 +1865,8 @@ paper.mystuff.star();Returns: string hex representation of the colour.
-Converts HSL values to RGB object. +
Converts HSL values to RGB object.
Parameters
@@ -1243,8 +1886,8 @@ paper.mystuff.star();Handfull replacement for typeof operator.
+
Handfull replacement for typeof operator.
Parameters
@@ -1256,31 +1899,69 @@ paper.mystuff.star();Returns: boolean is given value is of given type
-Utility method +
Utility method +Returns matrix based on given parameters. +
+Parameters +
+Returns: object Matrix
+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.
+
Returns: object Raphael object
+Usage +
+(function (local_raphael) {
+ var paper = local_raphael(10, 10, 320, 200);
+ â¦
+})(Raphael.ninja());
+Utility method Parses given path string into an array of arrays of path segments.
Parameters
Returns: array array of segments.
-Utility method +
Utility method Parses given path string into an array of transformations.
Parameters
Returns: array array of transformations.
-Utility method -Converts path to path where all segments are cubic bezier curves. +
Utility method +Converts path to a new path where all segments are cubic bezier curves.
Parameters
@@ -1289,8 +1970,8 @@ Converts path to path where all segments are cubic bezier curves.Returns: array array of segments.
-Utility method +
Utility method Converts path to relative form
Parameters @@ -1300,8 +1981,8 @@ Converts path to relative form
Returns: array array of segments.
-Transform angle to radians +
Transform angle to radians
Parameters
@@ -1310,8 +1991,24 @@ Converts path to relative formReturns: number angle in radians.
-Converts RGB values to hex representation of the colour. +
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 +
+Returns: object the font you passed in
+Usage +
+Cufon.registerFont(Raphael.registerFont({â¦}));
+Converts RGB values to hex representation of the colour.
Parameters
@@ -1326,8 +2023,8 @@ Converts path to relative formReturns: string hex representation of the colour.
-Converts RGB values to HSB object. +
Converts RGB values to HSB object.
Parameters
@@ -1346,8 +2043,8 @@ Converts path to relative formConverts RGB values to HSL object. +
Converts RGB values to HSL object.
Parameters
@@ -1366,8 +2063,8 @@ Converts path to relative formUsed when you need to draw in <iframe>. Switched window to the iframe one.
+
Used when you need to draw in <iframe>. Switched window to the iframe one.
Parameters
@@ -1375,8 +2072,8 @@ Converts path to relative formSnaps given value to given grid. +
Snaps given value to given grid.
Parameters
@@ -1392,18 +2089,49 @@ Converts path to relative form10.Returns: number adjusted value.
-true if browser supports SVG.
+
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 Raphael.el.
-Can be âSVGâ, âVMLâ or empty, depending on browser support. +
Usage
-true if browser supports VML.
+
Raphael.el.red = function () {
+ this.attr({fill: "#f00"});
+};
+Raphael.st.red = function () {
+ this.forEach(function () {
+ this.red();
+ });
+};
+// then use it
+paper.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. +
+true if browser supports VML.
Executes given function for each element in the set. +
Removeds all elements from the set +
+Removes given element from the set +
+Parameters +
+Returns: boolean 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.
Returns: object Set object
-Removes last element and returns it. +
Removes last element and returns it.
Returns: object element
-Adds each argument to the current set. +
Adds each argument to the current set.
Returns: object original element
-Removes given element from the set +
+Parameters +
+Returns: object set elements that were deleted
+Fires event with given name, given scope and other parameters.
+
Arguments +
+.) or slash (/) separatedReturns: object 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 +
+.) or slash (/) separatedReturns: array array of event handlers
+Could be used inside event handler to figure out actual name of the event. +
+Arguments +
+Returns: string name of the event, if subname is not specified
or +
+Returns: boolean 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 eve to trigger the listener. +
+Arguments +
+.) or slash (/) separated, with optional wildcardsReturns: function returned function accepts a single numeric parameter that represents z-index of the handler. It is an 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 your handler before non-indexed handlers, specify a negative value.
+Note: I assume most of the time you donât need to worry about z-index, but itâs nice to have this feature âjust in caseâ.
+
Binds given event handler with a given name to only run once then unbind itself. +
+eve.once("login", f);
+eve("login"); // triggers f
+eve("login"); // no listeners
+Use eve to trigger the listener. +
+Arguments +
+.) or slash (/) separated, with optional wildcardsReturns: function same return function as eve.on
+Is used inside an event handler to stop the event, preventing any subsequent listeners from firing. +
+Removes given function from the list of event listeners assigned to given name. +
+Arguments +
+.) or slash (/) separated, with optional wildcardsCurrent version of the library. +
+