Type of the technology used by this paper, either SVG or VML.
Points to the bottom element on the paper. null when there is no element.
The SVG element used by this paper.
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:
paper.customAttributes.hue = function (num) {
num = num % 1;
return {fill: "hsb(" + num + ", .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: ".5 .8 1"});
c.animate({hsb: "1 0 .5"}, 1e3);
Note to TypeScript users
To declare your plugin, you should extend the raphael module and add to the RaphaelAttributes:
import { RaphaelAttributes } from "raphael"
declare module "raphael" {
interface RaphaelAttributes {
hue: number;
hsb: string;
}
}
The height of this pager.
Points to the Raphael object/function.
Points to the topmost element on the paper. null when there is no element.
The width of this paper.
Draws a circle.
x coordinate of the center.
y coordinate of the center.
Radius of the circle.
The newly created element representing the circle.
Clears the paper, i.e. removes all the elements.
Draws a connection between two mindmap nodes.
Source node where the connection starts.
Target node where the connection ends.
Color of the connection.
Background specifier for the connection.
Effect speed for showing the new connection, in milliseconds.
An object with the newly created connection and the given source and target nodes.
Draws an ellipse.
x coordinate of the center.
y coordinate of the center.
Horizontal half-axis of the ellipse.
Vertical half-axis of the ellipse.
The newly created element representing the ellipse.
Executes given function for each element on the paper
If callback function returns false it will stop the loop running.
Callback that is invoked with each element on the paper.
Optional this context that is passed to the callback.
this paper for chaining.
Returns an element by its internal ID.
ID of an element to fetch.
The element with the given ID, or null if no such element exists.
Return the topmost element at given point.
paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
x coordinate from the top left corner of the window.
y coordinate from the top left corner of the window.
The topmost element at given point, null if no such element exists..
Finds font object in the registered fonts by given parameters. You could specify only one word from the font
name, like Myriad for Myriad Pr.
paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
Font family name or any word from it
Font weight
Font style
Font stretch
The font object with the given options, or undefined if no such font exists.
Embeds an image into this paper.
var c = paper.image("apple.png", 10, 10, 80, 80);
URI of the source image.
x coordinate position
y coordinate position
Width of the image
Height of the image
The newly created element representing the image.
Creates a path element by given path data string.
Path string consists of one-letter commands, followed by comma separated arguments in numerical form:
"M10,20L30,40"
For example:
var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90
Path string in SVG format.
The newly created element representing the path.
Creates set of shapes to represent given font at given position with given size. Result of the method is set object (see set) which contains each letter as separate path object.
var txt = r.print(10, 50, "print", r.getFont("Arial"), 30).attr({fill: "#fff"});
// following line will paint first letter in red
txt[0].attr({fill: "#f00"});
x Position of the text
y Position of the text
Text to print
Font object, see getFont.
Size of the font, default is 16.
Whether the text is centered on the baseline or middle line.
Number between -1 and 1, default is 0.
Each letter as separate path object.
Draws a rectangle.
x coordinate of the top left corner.
y coordinate of the top left corner
Width of th rectangle.
Height of th rectangle.
Radius for rounded corners, default is 0.
The newly created element representing the rectangle.
Removes this 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.
Elements to add to the set.
A newly created set with the given elements.
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.
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
Elements to add to the set.
A newly created set with the given elements.
See setStart. This method finishes catching elements and returns the resulting set.
A set with all the elements added to this paper since setStart was called.
If you need to change dimensions of the canvas, call this method.
New width of the canvas.
New height of the canvas.
this paper for chaining.
Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by specifying new boundaries.
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
this paper for chaining.
Draws a text string. If you need line breaks, put \n in the string.
x coordinate position.
y coordinate position.
The text string to draw.
The newly created element representing the drawn text.
Generated using TypeDoc
Interface for a paper that may be implemented either via VML or SVG, see RaphaelTechnology.
The paper that represents a drawing surface, implemented via SVG.
You can use the paper to draw shapes such as circles or paths.