SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler 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

Mais conteúdo relacionado

Semelhante a 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
 

Semelhante a 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
 

Mais de 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
 

Último

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
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Último (20)

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Ữ Â...
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
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
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
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
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
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
 
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)
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
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
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
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
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 

Raphaël JS Conf