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

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Recently uploaded (20)

INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
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
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
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Ữ Â...
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
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
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 

Raphaël JS Conf