Raphael

Function that creates canvas for future drawing.

Parameters

  1. container HTMLElement or string
  2. width number
  3. height number

or

  1. x number
  2. y number
  3. width number
  4. height number

Usage


// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var paper = Raphael(document.getElementById("notepad"), 320, 200);
var paper = Raphael("notepad", 320, 200);

Element

Object-wrapper for SVG/VML elements. Returned by Raphael methods.

Element[0]

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

Usage

var c = paper.circle(10, 10, 10);
c[0].onclick = function () { c.attr("fill", "red"); };

Element.rotate

Rotates element by given degree around its center.

Parameters

  1. degree number

Usage

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

Element.translate

Moves element around the canvas by given dimensions.

Parameters

  1. dx number
  2. dy number

Usage

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

Element.matrix

Performs matrix transformation on element.

Parameters

  1. xx number
  2. xy number
  3. yx number
  4. yy number
  5. dx number
  6. dy number

Usage

var c = paper.circle(10, 10, 10);
// reflects circle down
c.matrix(1, 0, 0, -1, 0, 0);

Element.scale

Scales element by given amount of times.

Parameters

  1. Xtimes number
  2. Ytimes number

Usage

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

Element.attr

Sets attributes of elements.

Parameters

  1. params object

or

  1. attribute string
  2. value string

Possible parameters

  • cx
  • cy
  • dasharray
  • fill-opacity
  • fill
  • font-family
  • font-size
  • font-weight
  • font
  • gradient
  • height
  • joinstyle
  • opacity
  • r
  • rx
  • ry
  • stroke-opacity
  • stroke-width
  • stroke
  • width
  • x
  • y

Usage

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

Element.getBBox

Returns dimensions of given element.

Parameters

  1. n/a

Usage

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

Element.toFront

Moves element to front in hierarchy.

Parameters

  1. n/a

Usage

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

circle

Creates circle.

Parameters

  1. x number
  2. y number
  3. r number

Usage

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

rect

Creates rectangle.

Parameters

  1. x number
  2. y number
  3. width number
  4. height number
  5. r number [optional]

Usage

// regular rectangle
var c = paper.rect(10, 10, 10, 10);
// rounded rectangle
var c = paper.rect(10, 10, 100, 50, 10);

ellipse

Creates an ellipse.

Parameters

  1. x number
  2. y number
  3. rx number
  4. ry number

Usage

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

path

Initialise path drawing. In general case this function returns empty path object. To draw path use built in methods like lineTo and curveTo.

Parameters

  1. params object Similar to object for attr method
  2. pathString string [optional] path in SVG path string format. See SVG documentation.

Usage

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

absolutely

Sets trigger to count all following units as absolute ones, unless said otherwise. [on by default]

Usage

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

relatively

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

redraw

Redraws the path. Make sense to use when points has been changed. This is possible via accessing path property of the object. This property is array of objects representing commands given to path.

Usage

c.path[3].arg[2] = 20;
c.redraw();

moveTo

Moves drawing point to given coordinates.

Parameters

  1. x number
  2. y number

Usage

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

lineTo

Draws straight line to given coordinates.

Parameters

  1. x number
  2. y number

Usage

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

cplineTo

Draws curved line to given coordinates. Line will have horizontal anchors on start and on finish.

Parameters

  1. x number
  2. y number
  3. width number

Usage

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

curveTo

Draws curved line to given coordinates.

Parameters

  1. x1 number
  2. y1 number
  3. x2 number
  4. y2 number
  5. x3 number
  6. y3 number

Usage

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

addRoundedCorner

Draws quarter of circle form current point.

Parameters

  1. r number
  2. dir string two letters direction

Possible dir values

lu
left up
ld
left down
ru
right up
rd
right down
ur
up right
ul
up left
dr
down right
dl
down left

Usage

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

andClose

Closes the path.

Usage

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

image

Embeds an image in SVG/VML area.

Parameters

  1. src string
  2. x number
  3. y number
  4. width number
  5. height number

Usage

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

group

Creates a group. Could be useful if you want to group your objects in layers, etc.

Usage

var c = paper.group();