Raphaël—JavaScript Library

Raphaël--一个小巧但功能强大的javascript画图库。

Main Function

Raphael

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

container HTMLElement or string

width number

height number

or

x number

y number

width number

height number

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

Element’s generic methods

Each object created on the canvas shares these same generic methods:

node

Gives you a reference to the DOM object, so you can assign event
handlers or just mess around.

Usage

var c = paper.circle(10, 10, 10); // draw a circle at coordinate 10,10 with radius of 10
c.node.onclick = function () { c.attr("fill", "red"); };

remove

Removes element from the DOM. You can’t use it after this method call.

Usage

var c = paper.circle(10, 10, 10);
c.remove();

hide

Makes element invisible.

Usage

var c = paper.circle(10, 10, 10);
c.hide();

show

Makes element visible.

Usage

var c = paper.circle(10, 10, 10);
c.show();

rotate

Rotates the element by the given degree from its center point.

Parameters

degree number Degree of rotation (0 – 360°)

isAbsolute boolean [optional] Specifies is degree is relative to previous position (

false

) or is it absolute angle (

true

)

or

degree number Degree of rotation (0 – 360°)

cx number [optional] X coordinate of the origin of rotation

cY number [optional] Y coordinate of the origin of rotation

Usage

var c = paper.circle(10, 10, 10);
c.rotate(45);        // rotation is relative
c.rotate(45, true);  // rotation is absolute

translate

Moves the element around the canvas by the given distances.

Parameters

dx number Pixels of translation by X axis

dy number Pixels of translation by Y axis

Usage

var c = paper.circle(10, 10, 10);
c.translate(10, 10); // moves the circle down the canvas, in a diagonal line

scale

Resizes the element by the given multiplier.

Parameters

Xtimes number Amount to scale horizontally

Ytimes number Amount to scale vertically

Usage

var c = paper.circle(10, 10, 10);
c.scale(1.5, 1.5); // makes the circle 1.5 times larger
c.scale(.5, .75);  // makes the circle half as wide, and 75% as high

attr

Sets the attributes of elements directly.

Parameters

attributeName string

value string

or

params object

or

attributeName string in this case method returns current value for given attribute name

or

attributeNames array in this case method returns array of current values for given attribute names

Possible parameters

Please refer to the SVG specification for an explanation of these parameters.

cx number

cy number

fill colour

fill-opacity number

font string

font-family string

font-size number

font-weight string

gradient object|string "‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›"

height number

opacity number

path pathString

r number

rotation number

rx number

ry number

scale CSV

src string (URL)

stroke colour

stroke-dasharray string [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]

stroke-linecap string [“butt”, “square”, “round”, “miter”]

stroke-linejoin string [“butt”, “square”, “round”, “miter”]

stroke-miterlimit number

stroke-opacity number

stroke-width number

translation CSV

width number

x number

y number

Usage

var c = paper.circle(10, 10, 10);
c.attr("fill", "black");                              // using strings
c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object

animate

Linearly changes an attribute from its current value to its specified value in the given amount of milliseconds.

Parameters

newAttrs object A parameters object of the animation results. (Not all attributes can be animated.)

ms number The duration of the animation, given in milliseconds.

callback function [optional]

Attributes that can be animated

The

newAttrs

parameter accepts an object whose properties are the attributes to animate. However, not all attributes listed in the

attr

method reference can be animated. The following is a list of those properties that can be animated:

cx number

cy number

fill colour

fill-opacity number

font-size number

height number

opacity number

path pathString

r number

rotation number

rx number

ry number

scale CSV

stroke colour

stroke-opacity number

stroke-width number

translation CSV

width number

x number

y number

Usage

var c = paper.circle(10, 10, 10);

c.animate({cx: 20, r: 20}, 2000);

getBBox

Returns the dimensions of an element.

Usage

var c = paper.circle(10, 10, 10);

var width = c.getBBox().width;

toFront

Moves the element so it is the closest to the viewer’s eyes, on top of
other elements.

Usage

var c = paper.circle(10, 10, 10);

c.toFront();

toBack

Moves the element so it is the furthest from the viewer’s eyes, behind
other elements.

Usage

var c = paper.circle(10, 10, 10);

c.toBack();

insertBefore

Inserts current object before the given one.

Usage

var r = paper.rect(10, 10, 10, 10);

var c = paper.circle(10, 10, 10);

c.insertBefore(r);

insertAfter

Inserts current object after the given one

Usage

var r = paper.rect(10, 10, 10, 10);

var c = paper.circle(10, 10, 10);

r.insertAfter(c);

Graphic Primitives

circle

Draws a circle.

Parameters

x number X coordinate of the centre

y number Y coordinate of the centre

r number radius

Usage

var c = paper.circle(10, 10, 10);

rect

Draws a rectangle.

Parameters

x number X coordinate of top left corner

y number Y coordinate of top left corner

width number

height number

r number [optional] radius for rounded corners, default is 0

Usage

// regular rectangle

var c = paper.rect(10, 10, 10, 10);

// rectangle with rounded corners

var c = paper.rect(10, 10, 100, 50, 10);

ellipse

Draws an ellipse.

Parameters

x number X coordinate of the centre

y number X coordinate of the centre

rx number Horisontal radius

ry number Vertical radius

Usage

var c = paper.ellipse(100, 100, 30, 40);

image

Embeds an image into the SVG/VML canvas.

Parameters

src string URI of the source image

x number X coordinate position

y number Y coordinate position

width number Width of the image

height number Height of the image

Usage

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

set

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.

Usage

var st = paper.set();

st.push(paper.circle(10, 10, 5));

st.push(paper.circle(30, 10, 5));

st.attr({fill: "red"});

text

Draws a text string. If you need line breaks, put “/n” in the string.

Parameters

x number X coordinate position.

y number Y coordinate position.

text string The text string to draw.

Usage

var t = paper.text(10, 10, "Look mom, I'm scalable!");

path

Initialises path drawing. Typically, this function returns an empty

path

object and to draw paths you use its built-in methods like

lineTo

and

curveTo

. However, you can also specify a path literally by supplying the path data as a second argument.

Parameters

params object Attributes for the resulting path as described in the

attr

reference.

pathString string [optional] Path data in SVG path string format.

Usage

var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50); // draw a diagonal line
var c = paper.path({stroke: "#036"}, "M 10 10 L 50 50");            // same

Path Methods

absolutely

Sets a trigger to count all following units as absolute ones, unless said otherwise. (This is on by default.)

Usage

var c = paper.path({stroke: "#036"}).absolutely()
.moveTo(10, 10).lineTo(50, 50);

relatively

Sets a trigger to count all following units as relative ones, unless
said otherwise.

Usage

var c = paper.path({stroke: "#036"}).relatively()
.moveTo(10, 10).lineTo(50, 50);

moveTo

Moves the drawing point to the given coordinates.

Parameters

x number X coordinate

y number Y coordinate

Usage

// Begins drawing the path at coordinate 10,10
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);

lineTo

Draws a straight line to the given coordinates.

Parameters

x number X coordinate

y number Y coordinate

Usage

// Draws a line starting from 10,10 to 50,50
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);

cplineTo

Draws a curved line to the given coordinates. The line will have horizontal anchors on start and on finish.

Parameters

x number

y number

width number

Usage

var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);

curveTo

Draws a bicubic curve to the given coordinates.

Parameters

x1 number

y1 number

x2 number

y2 number

x3 number

y3 number

Usage

var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);

qcurveTo

Draws a quadratic curve to the given coordinates.

Parameters

x1 number

y1 number

x2 number

y2 number

Usage

var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);

addRoundedCorner

Draws a quarter of a circle from the current drawing point.

Parameters

r number

dir string Two-letter directional instruction, as described below.

Possible

dir

values

luleft upldleft downruright uprdright downurup rightulup leftdrdown rightdldown left

Usage

var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");

andClose

Closes the path being drawn.

Usage

var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();

setSize

If you need to change dimensions of the canvas call this method

Parameters

width number new width of the canvas

height number new height of the canvas

setWindow

Should be called before main Raphael method. Sets which window should
be used for drawing. Default is the current one. You need to use it if
you want to draw inside

iframe

Parameters

window object

getColor

Returns a colour object for the next colour in spectrum

Parameters

value number brightness [optional]

Usage

var c = paper.path({stroke: Raphael.getColor()}, "M10,10L100,100")

getColor.reset

Resets getColor function, so it will start from the beginning

Some Rights Reserved by Dmitry Baranovskiy

Font by Jos Buivenga · Logo by Wasabicube · Work at this project started as 20% time at Atlassian