Red Raphaël - JavaScript Graphics Library on Steroids (JSFOO 2013)

100 %
0 %
Information about Red Raphaël - JavaScript Graphics Library on Steroids (JSFOO 2013)

Published on September 21, 2013

Author: FusionCharts

Source: slideshare.net

Description

FusionCharts presentation on Red Raphaël at the JSFOO 2013 conference held in Bangalore. A brief history and examples of how we built cool stuff.

RedRaphaëlJavaScriptgraphicslibraryonsteroids! Sushant Sudarshan

The inception… Flash was our first love 1

2 Till Almighty punched us in the face

A stitch in time saves nine 3

But temporary arrangements are just that… temporary 4

We were now looking for a life partner 5

And we met Raphaël 6

The conception… All marriages are made in heaven… 7

Till you start realizing the shortcomings 8

you can fight it out, compromise or fix it 9

We fixed it and the prodigy RedRaphaël was born 10

Why was Raphaël the obvious choice? • Cross browser support • A library of functions for graphics related operations • Easy enough to extend • Open source 11

A step back - Raphaël • Basic Purpose & Usage • The Raphael() constructor • Paper • A blank canvas used to draw shapes • Multiple ways of invoking the constructor • Arguments the constructor takes include width, height, container element, callback etc • Raphael documentation: http://raphaeljs.com/reference.html#Raphael 12

A step back - Raphaël • Element: A class used to create and manipulate shapes • Shapes in Raphael – Rectangle, Circle, Ellipse, Path, Text • Collections in Raphael - Sets // Create a rectangle var rectEl = paper.rect(x, y, width, height); // Create a path var pathEl = paper.circle(path); // Create a set var setEl = paper.set(); setEl.push(pathEl); // Adding elements to set 13

A step back - Raphaël • Custom Attributes: creating your own attributes • Attributes created are applicable to all elements of the paper • Performance issues paper.customAttributes.hue = function (num) { num = num % 1; return {fill: "hsb(" + num + ", 0.75, 1)"}; }; // Using custom attributes var c = paper.circle(10, 10, 10).attr({hue: .45}); 14

Extending Raphaël • Basic groundwork provided by the Raphaël framework • Raphael.fn: Adding new shapes • Raphael.el: Adding methods directly to Element.prototype Raphael.fn.arrow = function (x1, y1, x2, y2, size){ return this.path( ... ); }; var paper = Raphael(10, 10, 630, 480); // Use the new shape paper.arrow(10, 10, 30, 30, 5).attr({fill: #f00"}); 15

RedRaphaël – the joys it brought us • All good qualities from Raphaël, and more • Groups • Custom attributes overhauled • Defining custom shapes: Raphael.define • Canvas support 16

Groups vs Sets • Both are high level collections • Iterations • Transformations • Time for some demos 17

Faceoff - Groups vs Sets! 18

Custom Attributes • Also available per element • Can override existing attributes var rectEl = paper.rect(0, 0, 30, 40); //Add custom attributes rectEl.ca.borderColor = function (value) { // Instead of doing // return {stroke: value} this.attr({stroke: value}); return false; } // Apply the custom attribute rectEl.attr({borderColor: ‘#ff0000’}); 19

Breaking the code of conduct • Followers: A special class of elements that emulates a target element’s attributes. • Stalkers: A special class of FOLLOWERS that also stalks the target element all around the DOM tree. var textEl = paper.text(), // A blank text element rectEl = paper.rect(); // A blank rect element // Make the rect stalk the text element rectEl.follow(textEl, function () { // Code to stalk goes here… }, ‘before’); textEl.attr({x: 0, y: 0, text: ‘Has a follower’}); 20

A new breed of stalkers! 21

Raphael.define • A one-stop-shop for all your extension needs • Usage: Raphael.define({ name: ‘cube’, cube: function () { // How to draw the element }, ca: { // Define custom attributes for it }, fn: { // Custom methods }, e: {// Pre-defined event listeners} }); 22

WARNING: Do not try this without RedRaphael! 23

Supporting Canvas – we care for all • More power to the user • No change in the way the library is used • Work in progress 24

What lies ahead? • More features, more power! • Optimizing performance • Feedback • Guidelines for contributors 25

Q&A 26

References • Github link: https://github.com/fusioncharts/redraphael • In case of any technical queries about RedRaphael shamasis@fusioncharts.com sushant@fusioncharts.com • Interested in contributing to RedRaphael or FusionCharts, or generally talking dirty? We’ve a stall outside. 27

Add a comment

Related presentations

Related pages

RedRaphael - JavaScript graphics library on steroids ...

RedRaphael - JavaScript graphics library on steroids! by Sushant Sudarshan (~sushantbs), JSFoo 2013
Read more

RedRaphael - JavaScript graphics library on steroids ...

JSFoo 2013 Day 1 ... JavaScript graphics library on steroids! Login for more options. Share. Twitter; Google+; ... Sushant Sudarshan is a senior JavaScript ...
Read more

RedRaphael Part 1 – A JavaScript Graphics Library on ...

... and touted it as a JavaScript graphics library on steroids. ... Painting Raphael red. ... JSFoo 2013 Highlights ;
Read more

Sushant Sudarshan - RedRaphael - JavaScript graphics ...

Sushant Sudarshan - RedRaphael - JavaScript graphics library on steroids! HasGeek TV. ... 2013. Introducing ... Raphael.js Presentation for ...
Read more

redraphael Archives – FusionBrew – The FusionCharts Blog

FusionBrew – The FusionCharts Blog. About FusionBrew ... A JavaScript Graphics Library on Steroids. by sushant. ... and the JSWarrior Game – JSFoo 2013 ...
Read more

RedRaphael - A JavaScript graphics library on steroids!

... JavaScript Graphics library built on top of raphaeljs ... org/fusioncharts/redraphael/ - … Sep 19, 2013 ... the DOM tree using Raphael methods ...
Read more

Paper JS

Paper.js. About; Features; Examples; Showcase; Tutorials; Reference; Sketch; Download; Donation; License; Mailing List; Follow on Twitter; Watch on Github ...
Read more

RGraph: 2D/3D JavaScript charts - Free and Open Source

... an Open Source 2D/3D JavaScript charts library. ... RGraph is available to ... 'rgba(0,0,0,0)', colors: ['Gradient(#fbb:red ...
Read more

Beautiful HTML5 JavaScript Charts | CanvasJS

HTML5 JavaScript Charting Library with a simple API and 10x better performance. ... © 2013 fenopix info@canvasjs.com Privacy Policy.
Read more

jQWidgets - jQuery HTML5 UI Widgets framework

jQWidgets takes the JavaScript & HTML UI development to a new level. ... standards compliant JavaScript library based on jQuery, HTML5, CSS & SVG.
Read more