Raphaël JavaScript Library

By Jax

Step

• Over View

• Create Paper

• Create Element

• Sample run 1

• Element animate

• Element event

• Sample run 2

• drag

• Sample run 3

Over View

• Raphael

• Paper

• Element

• Animation

• Matrix

• Set

Create Paper

var paper = Raphael("elementId", 840, 480);

var paper = Raphael(element, 840, 480);

var paper = Raphael(10, 10, 840, 480);

Create Elementpaper.circle(x, y, radius) paper.ellipse(x, y, radiusX, radiusY)

paper.rect(x, y, width, height, [radius])

paper.text(x, y, text)

paper.path("M10 10 L90 90")

paper.image(src, x, y, width, height)

Paper.path

http://raphaeljs.com/reference.html#Paper.path

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

Raphael.fn

Raphael.fn.arrow = function (x1, y1, x2, y2, size) {  return this.path( ... ); 

}; 

var paper = Raphael(10, 10, 630, 480); 

// then use it  paper.arrow(10, 10, 30, 30, 5); 

Element.attr

// get Element.attr('attrName') Element.attr(['attrName1', 'attrName2'])

// set Element.attr('attrName', 'value') Element.attr({ 'attrName': 'value' })

Element attributes • cx • cy • r • rx • ry • x • y

• fill • fill-opacity • height • width • opacity • path • stroke • stroke-opacity • stroke-width

http://raphaeljs.com/reference.html#Element.attr

Sample run 1• In JsBin

<script src="https://rawgithub.com/DmitryBaranovskiy/raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>

Element animate

Element.animate(attrObj, ms, [easing])

• “linear” • “<” or “easeIn” or “ease-in” • “>” or “easeOut” or “ease-out” • “<>” or “easeInOut” or “ease-in-out” • “backIn” or “back-in” • “backOut” or “back-out” • “elastic” • “bounce”

Element event

• click (handler)• dblclick (handler)• drag(onmove, onstart, onend, [mcontext], [scontext],

[econtext])• hover(f_in, f_out, [in_context], [out_context])• mousedown (handler)• mousemove (handler)• mouseout (handler)• mouseover (handler)• mouseup (handler)• onDragOver (handler)

Sample run 2

• Use animate 200ms on hover

Element Other Method

• data(key, [value])• removeData([key])• glow([glow])• clone()• remove()• show()• hide()• toBack()• toFront()

• rotate(deg, [cx], [cy])• scale(sx, sy, [cx], [cy])• transform([tstr])• translate(dx, dy)

• resume([anim])• status([anim], [value])• stop([anim])

drag

paper.circle(50, 50, 20).attr('fill', 'red').drag(function (dx, dy, x, y, event) {

this.attr({ cx: this.ox + dx, cy: this.oy + dy }); }, function (x, y, event) {

this.ox = this.attr("cx"); this.oy = this.attr("cy");

});

Sample run 3