Raphaël JS
Arie M. Prasetyo
JakartaJS Meetup #4, Feb 25th 2014
Raphaël JS
- Lightweight JavaScript framework.
- Draw vector graphics programmatically.
- Animation, event, and many more.
Scalable Vector Graphics
- XML-based language for describing objects and scenes.
- SVG elements can fire events and can be scripted with JavaScript.
- SVG can serve multiple resolutions with the same level of detail.
Creating Our First Scene
We begin drawing the scene by instantiating a Raphaël object. We put two primitive shapes into the Raphaël object. Then we add an attribute to each primitives.
// Creates canvas 320 * 200 at layer "container"
var r = Raphael("container", 320, 200);
// Creates rectangle at x = 10, y = 10, with width 50, height 50
var rect = r.rect(10, 10, 50, 50);
// Creates circle at x = 110, y = 35, with radius 25
var circle = r.circle(110, 35, 25);
// Add a fill color to each primitives
rect.attr({fill: "#45B29D"});
circle.attr({fill: "#DF5A49"});
Draw a Path
We can also use paths to draw vector graphics. Basic rules:
- M followed by coordinates moves the pen to that position.
- L followed by coordinate pair draws a line from that the current position to that position.
- s draws a smooth Bézier curve.
- Z closes a path.
var r = Raphael("container", 300, 300);
var curvePath = r.path("M 110 10 s 155 25 40 80 Z");
curvePath.attr({fill:"#EFC94C"});
var customPath = r.path("M 250 250 L 0 -50 L -50 0 L 0 -50 L -50 0 L 0 50 L -50 0 L 0 50 L 150 0 Z");
customPath.attr({
gradient: '90-#EFC94C-#DF5A49',
stroke: '#334D5C', 'stroke-width': 2, 'stroke-linejoin': 'round'
});
Write a Text
Raphaël provides two methods to draw text.
- Raphael.text(), takes a x and y coordinates along with the string to draw.
- Raphael.print(), draws the text as a collection of paths. The font need to be Cufonized.
var r = Raphael("container", 600, 100);
var text = r.text(50, 10, "Raphael Rules");
var print = r.print(50, 50, "Raphael Rules", r.getFont("Arial"), 40).attr({fill: "#E27A3F"});
Triggering Events
SVG elements can directly subscribe to all the traditional mouse-based events: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, hover.
var r = Raphael(10, 10, 640, 480);
var rect = r.rect(10, 10, 50, 50);
var ellipse1 = r.ellipse(200, 100, 25, 20);
var ellipse2 = r.ellipse(200, 100, 100, 50);
rect.attr({fill: "#DF5A49"});
ellipse1.attr({fill: "#45B29D", stroke: '#DF5A49', 'stroke-width': 2});
ellipse2.attr({stroke: '#334D5C', 'stroke-width': 2});
rect.click(function(evt) {
ellipse1.rotate(36);
ellipse2.rotate(-15);
});
Animate The Shape
Add custom animations to Raphaël shapes. We can also add easing formulas to the animation, such as: linear, elastic, bounce, easeIn, easeOut, easeInOut, backIn, and backOut.
var paper = Raphael(10, 50, 300, 500);
var circle = paper.circle(150, 40, 30);
circle.attr({fill: "#45B29D", stroke: '#333333'});
var anim = Raphael.animation({cx: 150, cy: 400, opacity: 0.5, "fill": "#DF5A49"}, 2000, "bounce");
circle.animate(anim.repeat(10));
Sample 1
Mood Widget
view sample »Sample 2
Morris.js
view sample »Sample 3
Sound Visualizer
view sample »Reading materials
Thank You
BY Arie M. Prasetyo / @arisetyo
Raphaël JS
By Arie Mochamad Prasetyo
Raphaël JS
- 2,895