1. Raphaël JavaScript Library
By Jax

2. Step
• Over View
• Create Paper
• Create Element
• Sample run 1
• Element animate
• Element event
• Sample run 2
• drag
• Sample run 3

3. Over View
• Raphael
• Paper
• Element
• Animation
• Matrix
• Set

4. Create Paper
var paper = Raphael("elementId", 840, 480);
var paper = Raphael(element, 840, 480);
var paper = Raphael(10, 10, 840, 480);

5. Create Element
paper.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)

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

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

8. Element.attr
// get
Element.attr('attrName')
Element.attr(['attrName1', 'attrName2'])
// set
Element.attr('attrName', 'value')
Element.attr({ 'attrName': 'value' })

9. 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.ht
ml#Element.attr

11. Sample run 1
• In JsBin
<script src="https://rawgithub.com/DmitryBaranovskiy/raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>

12. 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”

13. 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)

14. Sample run 2
• Use animate 200ms on hover

15. 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])

16. 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");
}
);

17. Sample run 3