SlideShare a Scribd company logo
1 of 52
Download to read offline
Raphaël

Dmitry Baranovskiy · JSConf 2010
How is it done?
SVG
VML
JavaScript


SVG           VML
SVG   VML
20 Kb
Anything, but charts?
Raphaël—JavaScript Library


       What is it?                                                                  Download v. 1.3.1 (57 Kb)
Raphaël is a small JavaScript library that should simplify your work with vector    Our recommendation is to GZIP it. It
graphics on the web. If you want to create your own specific chart or image crop    will help to reduce file size to 20 Kb.
and rotate widget, for example, you can achieve it simply and easily with this      You can download uncompressed
library.                                                                            source (133 Kb) as well.
    Raphaël uses the SVG W3C Recommendation and VML as a base for
creating graphics. This means every graphical object you create is also a DOM       Documentation
object, so you can attach JavaScript event handlers or modify them later.
                                                                                    Hope it will help
Raphaël’s goal is to provide an adapter that will make drawing vector art
compatible cross-browser and easy.
                                                                                    Discussion Group
    Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet
Explorer 6.0+.                                                                      Ask your questions there.
    For more examples take a look at charting plugin: gRaphaël.
                                                                                    Twitter
       How to use it?                                                               Best source of updates, so far.

Download and include raphael.js into your HTML page, then use it as simple
                                                                                    Donate
as:
                                                                                    You know you want to…
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);                                              It is Open
// Creates circle at x = 50, y = 40, with radius 10                                 This project is distributed under MIT
var circle = paper.circle(50, 40, 10);                                              License.
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
                                                                                    Source & Bugs
Raphaël—JavaScript Library


       What is it?                                                                  Download v. 1.3.1 (57 Kb)
Raphaël is a small JavaScript library that should simplify your work with vector    Our recommendation is to GZIP it. It
graphics on the web. If you want to create your own specific chart or image crop    will help to reduce file size to 20 Kb.
and rotate widget, for example, you can achieve it simply and easily with this      You can download uncompressed
library.                                                                            source (133 Kb) as well.
    Raphaël uses the SVG W3C Recommendation and VML as a base for
creating graphics. This means every graphical object you create is also a DOM       Documentation
object, so you can attach JavaScript event handlers or modify them later.
                                                                                    Hope it will help
Raphaël’s goal is to provide an adapter that will make drawing vector art
compatible cross-browser and easy.
                                                                                    Discussion Group
    Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet
Explorer 6.0+.                                                                      Ask your questions there.
    For more examples take a look at charting plugin: gRaphaël.
                                                                                    Twitter
       How to use it?                                                               Best source of updates, so far.

Download and include raphael.js into your HTML page, then use it as simple
                                                                                    Donate
as:
                                                                                    You know you want to…
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);                                              It is Open
// Creates circle at x = 50, y = 40, with radius 10                                 This project is distributed under MIT
var circle = paper.circle(50, 40, 10);                                              License.
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
                                                                                    Source & Bugs
Size does Matter
Printing
iPad
API
Creating
var paper = Raphael("holder", 800, 600);

var paper = Raphael(holder, 800, 600);

var paper = Raphael(10, 20, 800, 600);
Primitives
var circle = paper.circle(cx, cy, r);

var rect = paper.rect(x, y, width, height, r);

var ellipse = paper.ellipse(cx, cy, rx, ry);
animate            mousemove
animateAlong       mouseout
animateAlongBack   mouseover
animateWith        mouseup
attr               onAnimation
click              remove
clone              rotate
dblclick           scale
getBBox            show
hide               stop
hover              toBack
insertAfter        toFront
insertBefore       translate
mousedown
circle.attr({
    fill: "#fc0",
    stroke: "hsb(0.6, 0.7, 0.9)",
    "stroke-width": 5,
    "stroke-opacity": 0.5,
    cx: 50
});

var fill = circle.attr("fill");

circle.animate({
    cx: 100,
    cy: 100
}, 1000, function () {
    alert("Animation is finished");
});
clip-rect      height             stroke-linecap
cursor         href               stroke-linejoin
cx             opacity            stroke-miterlimit
cy             path               stroke-opacity
fill           r                  stroke-width
fill-opacity   rotation           target
font           rx                 text-anchor
font-family    ry                 title
font-size      scale              translation
font-style     src                width
font-weight    stroke             x
gradient       stroke-dasharray   y
Paths


&
var path = paper.path(pathString);
M278.939,132.632l-0.641-0.853l0.183-1.97l-0.975,0.091l-0.92-0.092l-0.506,0.415l-0.
526,0.234l-0.541,0.053l-0.939-0.271l-1.049,0.468l-0.813-0.833l-0.938-0.272l-0.851,
0.631l-0.67,0.614l-1.083,0.106l-0.904,0.09l-0.108,0.741l0.288,1.068l0.722-0.073l-0
.651,0.795l-0.129,0.559l-1.049,0.47l-0.757-0.291l-0.433-0.688l-0.651,0.794l-0.651,
0.795l-0.309,0.578l-0.688,0.433l-0.47-1.049l-0.069-0.723l-0.435-0.688l-0.415-0.507
l-0.631-0.85l-1.121-0.254l-1.643-0.021l-0.577-0.309l-0.761-0.29l-0.722,0.071l-0.23
5-0.524l-0.903,0.089l-1.41,0.504l-1.3-0.237l-1.321-0.416l-0.541,0.053L250,132.249l
-1.104-0.073l-0.073,1.102l-0.722,0.072l0.053,0.543l-0.869,0.449l-53.113-0.052l-0.0
02,0.043v45.292l0.08-0.038l1.109-0.168l1.834,0.86l1.024-0.723l1.748,0.305l2.12,0.2
48l1.73,1.44l0.492,2.009l1.092,0.971l0.045-0.953l1.055-0.539l0.98,0.232l1.721,0.11
9l1.008,0.413l0.604,2.748l1.444,2.054l1.138,0.018l1.619,0.701l1.973,1.783l0.379,1.
268l1.277,0.943l1.619,0.701l1.295-0.195l-0.223-1.481l0.471-0.638l0.741-0.11l0.823,
0.444l1.85-0.28l1.434,0.729l0.925-0.139l1.223,0.571l1.164,0.204l0.658-0.666l0.896-
0.327l1.037,0.603l1.961,0.461l1.451-0.408l1.083-0.354l0.74-0.111l0.711-0.295l0.899
-0.326l1.433,0.73l-0.204,1.168l0.566,1.235l0.722,1.028l0.354,1.082l-0.178,1.349l8.
182,4.065l1.721,0.121l0.873,0.643h0.513l-0.213,0.64l0.112-0.336l0.227,0.167l0.939-
0.471l-0.213-1.704l0.427-0.212h0.425l-0.425-1.065l-0.853-0.213l0.426-0.853l-0.426-
1.064l0.426,0.214l0.427-1.491l0.851-3.406l-0.213-2.131l0.426-1.277h-0.426l1.065-0.
852l-0.64-0.853l0.854,0.213l1.703-4.046l1.49-0.428l-0.641-1.275l0.641-0.214v0.853l
0.424-0.214l-0.424-1.276l-0.426,0.213l0.213-0.426l-0.854-0.213l1.49-0.64l0.427-1.4
91l-0.427-0.639l0.64-0.215v-1.489l1.703-1.703l-0.638-0.214l1.063-0.213l-1.276-0.42
6l1.489-0.213l0.214-1.064l-0.64,0.426l-0.427-0.426l0.64,0.213l-0.213-0.639l0.64,0.
426l0.213-1.704v-0.212l-0.427,0.425v-0.639l-0.213,0.214l-0.213-0.641l0.64,0.427l0.
213-1.064v0.853l0.852-0.426l0.214-1.064l-0.427-0.427h0.854l0.637-1.703l-0.637,0.85
3l-0.214-0.853h0.638v-0.853l0.213,0.853l0.854-1.491l-0.213-0.426h0.427v0.64l2.556-
1.491l-0.853-0.213l-0.853,0.639l-0.213-0.213l0.426-0.426l-0.213-0.426l0.853,0.426l
0.638-0.426l0.215,0.426l0.853-1.277l1.489-0.853l0.214-1.702l-0.64-0.215v0.428l-0.8
52-0.428h1.064l0.213-1.49l1.49-1.277l1.918-6.176l-0.213-4.26l1.489-3.834l0.213-0.6
39l0.64-3.62l-0.64-0.426l0.64,0.213l-0.213-0.853l1.703-3.193h-0.426l0.426-0.214L27
8.939,132.632zM261.268,143.072h-0.215l-0.213-0.639l0.641-0.214L261.268,143.072z
M278.939,132.632l-0.641-0.853l0.183-1.97
Command


M278.939,132.632l-0.641-0.853l0.183-1.97
Command


M278.939,132.632l-0.641-0.853l0.183-1.97


   x
Command


M278.939,132.632l-0.641-0.853l0.183-1.97


   x        y
Plugins
Raphael.fn.arrow = function (x, y) {
    return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16
-10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({
        fill: "#fff",
        stroke: "none",
        opacity: 0.2
    });
};

Raphael.el.fill = function (fill) {
    this.attr({fill: fill});
};
Raphael.el.stroke = function (stroke) {
    this.attr({stroke: stroke});
};
gRaphaël
Everyone Can Draw
Thank You
http://raphaeljs.com/



http://github.com/DmitryBaranovskiy/raphael



http://dmitry.baranovskiy.com/



http://twitter.com/raphaeljs

More Related Content

Similar to Raphaël JS Conf

Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Mediacurrent
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic Tutorial
Tao Jiang
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
Bryce Kerley
 

Similar to Raphaël JS Conf (20)

pastel
pastelpastel
pastel
 
pastel
pastelpastel
pastel
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and Tricks
 
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic Tutorial
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Plunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s beginPlunge into HTML5 Canvas – Let’s begin
Plunge into HTML5 Canvas – Let’s begin
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Java Fx Overview Tech Tour
Java Fx Overview Tech TourJava Fx Overview Tech Tour
Java Fx Overview Tech Tour
 
Working With Canvas
Working With CanvasWorking With Canvas
Working With Canvas
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
JavaScript Lecture notes.pptx
JavaScript Lecture notes.pptxJavaScript Lecture notes.pptx
JavaScript Lecture notes.pptx
 
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8HTML5: The Future of Web Development with IE9, IE10 and Windows 8
HTML5: The Future of Web Development with IE9, IE10 and Windows 8
 

More from Dmitry Baranovskiy (12)

The Origins of Magic
The Origins of MagicThe Origins of Magic
The Origins of Magic
 
Demystifying Prototypes
Demystifying PrototypesDemystifying Prototypes
Demystifying Prototypes
 
Type Recognition
Type RecognitionType Recognition
Type Recognition
 
Obvious Secrets of JavaScript
Obvious Secrets of JavaScriptObvious Secrets of JavaScript
Obvious Secrets of JavaScript
 
Your JavaScript Library
Your JavaScript LibraryYour JavaScript Library
Your JavaScript Library
 
Canvas
CanvasCanvas
Canvas
 
SVG
SVGSVG
SVG
 
Java Script Workshop
Java Script WorkshopJava Script Workshop
Java Script Workshop
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Microformats—the hidden treasure
Microformats—the hidden treasureMicroformats—the hidden treasure
Microformats—the hidden treasure
 
Advanced JavaScript Techniques
Advanced JavaScript TechniquesAdvanced JavaScript Techniques
Advanced JavaScript Techniques
 

Recently uploaded

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 

Recently uploaded (20)

Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 

Raphaël JS Conf