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

JavaScript Library for Vector Graphics


               Dmitry Baranovskiy
                  WSG meeting
                 11 March 2009
Cool
Cool Cool Cool WTF
Raphaël
What is it for?
Demo
What is it?
JavaScript
window.onload = function () {
   var hldr = document.getElementById(quot;holderquot;);
   var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML;
   hldr.innerHTML = quot;quot;;
   var R = Raphael(quot;holderquot;, 640, 480),
        txt = R.set(),
        attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5};
   txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;));
   txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;));
   txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;));
   txt.attr(attr);
   var mouse = null, rot = 0;
   document.onmousemove = function (e) {
      if (mouse === null) {
        mouse = e.pageX;
        return;
      }
      rot += e.pageX - mouse;
      txt[0].rotate(e.pageX - mouse);
      txt[1].rotate((e.pageX - mouse) /1.5);
      txt[2].rotate((e.pageX - mouse) /2);
      mouse = e.pageX;
   };
};
window.onload = function () {
   var hldr = document.getElementById(quot;holderquot;);
   var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML;
   hldr.innerHTML = quot;quot;;
   var R = Raphael(quot;holderquot;, 640, 480)
                                    480),
        txt = R.set(),
        attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5};
   txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;));
   txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;));
   txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;));
   txt.attr(attr);
   var mouse = null, rot = 0;
   document.onmousemove = function (e) {
      if (mouse === null) {
        mouse = e.pageX;
        return;
      }
      rot += e.pageX - mouse;
      txt[0].rotate(e.pageX - mouse);
      txt[1].rotate((e.pageX - mouse) /1.5);
      txt[2].rotate((e.pageX - mouse) /2);
      mouse = e.pageX;
   };
};
How does it work?
Canvas   SVG   VML
Canvas   SVG   VML
pixels   DOM   DOM
SVG   VML
DOM?
SVG   VML
API
circle
ellipse
image
path
rect
text
animate
        attr
        getBBox
        hide
circle insertAfter
ellipse insertBefore
image remove
path    rotate
        scale
rect
text    show
        stop
        toBack
        toFront
        translate
animate
        attr
        getBBox
        hide
circle insertAfter
ellipse insertBefore
image remove
path    rotate
        scale
rect
text    show
        stop
        toBack
        toFront
        translate
fill
        animate
                       fill-opacity
        attr           font
        getBBox        font-family
        hide           font-size
                       gradient
circle insertAfter
                       opacity
ellipse insertBefore
                       rotation
image remove
                       scale
path    rotate         stroke
        scale
rect                   stroke-dasharray
text    show           stroke-linecap
                       stroke-linejoin
        stop
                       stroke-miterlimit
        toBack
                       stroke-opacity
        toFront        stroke-width
        translate      translation
fill
        animate
                       fill-opacity
        attr           font                cx
        getBBox        font-family         cy
        hide           font-size
                                           height
                       gradient
circle insertAfter
                                           path
                       opacity
ellipse insertBefore
                                           r
                       rotation
image remove
                                           rx
                       scale
path    rotate         stroke              ry
        scale
rect                   stroke-dasharray    src
text    show           stroke-linecap
                                           width
                       stroke-linejoin
        stop
                                           x
                       stroke-miterlimit
        toBack
                                           y
                       stroke-opacity
        toFront        stroke-width
        translate      translation
Element.node
Circle.node.onclick =
   function () {…};
$(Circle.node).click(…);
16 Kb
0.6.4
0.7
gRaphaël
Yet Another Demo
Raphaël could make you stand out of the crowd.
Using Raphaël could amaze your colleagues
http://RaphaelJS.com/
Thank You

More Related Content

Viewers also liked

H ren through michelangelo
H ren through michelangeloH ren through michelangelo
H ren through michelangelo
NCS
 
Egyptian Paintingteam 10
Egyptian Paintingteam 10Egyptian Paintingteam 10
Egyptian Paintingteam 10
xmeowxmixx
 
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Edeliza Macalandag
 
History of painting
History of paintingHistory of painting
History of painting
SFYC
 

Viewers also liked (20)

Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)
 
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in DetailREMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
 
What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web
 
H ren through michelangelo
H ren through michelangeloH ren through michelangelo
H ren through michelangelo
 
Barroco III
Barroco IIIBarroco III
Barroco III
 
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The MasterpiecesVienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
 
VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)
 
Egyptian Paintingteam 10
Egyptian Paintingteam 10Egyptian Paintingteam 10
Egyptian Paintingteam 10
 
Modern World History: Chapter 1
Modern World History: Chapter 1Modern World History: Chapter 1
Modern World History: Chapter 1
 
Michelangelo
Michelangelo  Michelangelo
Michelangelo
 
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
 
Jan van Eyck
Jan van EyckJan van Eyck
Jan van Eyck
 
Renoir
RenoirRenoir
Renoir
 
Ancient Egyptian Civilization
Ancient Egyptian CivilizationAncient Egyptian Civilization
Ancient Egyptian Civilization
 
Raphael Art and Life
Raphael Art and LifeRaphael Art and Life
Raphael Art and Life
 
Michelangelo - Cappella Sistina
Michelangelo -  Cappella SistinaMichelangelo -  Cappella Sistina
Michelangelo - Cappella Sistina
 
History of painting
History of paintingHistory of painting
History of painting
 
History of Internet Searching
History of Internet SearchingHistory of Internet Searching
History of Internet Searching
 
History of the_internet
History of the_internetHistory of the_internet
History of the_internet
 
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
 

Similar to Raphael

Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptBuilding Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
David Isbitski
 
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
Mindfire Solutions
 
楽々Scalaプログラミング
楽々Scalaプログラミング楽々Scalaプログラミング
楽々Scalaプログラミング
Tomoharu ASAMI
 
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Spiffy
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
 

Similar to Raphael (20)

SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptBuilding Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
 
SVG
SVGSVG
SVG
 
SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
Raphaël and You
Raphaël and YouRaphaël and You
Raphaël and You
 
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
 
An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_rendering
 
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics PerformanceGoogle I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
 
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics PerformanceGoogle I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
 
Html5 Canvas and Media
Html5 Canvas and MediaHtml5 Canvas and Media
Html5 Canvas and Media
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
楽々Scalaプログラミング
楽々Scalaプログラミング楽々Scalaプログラミング
楽々Scalaプログラミング
 
Specs2, go functional
Specs2,  go functionalSpecs2,  go functional
Specs2, go functional
 
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 

More from Dmitry Baranovskiy (11)

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

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 

Raphael

  • 1. Raphaël JavaScript Library for Vector Graphics Dmitry Baranovskiy WSG meeting 11 March 2009
  • 3.
  • 5.
  • 7.
  • 8. What is it for?
  • 12. window.onload = function () { var hldr = document.getElementById(quot;holderquot;); var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML; hldr.innerHTML = quot;quot;; var R = Raphael(quot;holderquot;, 640, 480), txt = R.set(), attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5}; txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;)); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; }; };
  • 13. window.onload = function () { var hldr = document.getElementById(quot;holderquot;); var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML; hldr.innerHTML = quot;quot;; var R = Raphael(quot;holderquot;, 640, 480) 480), txt = R.set(), attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5}; txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;)); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; }; };
  • 14. How does it work?
  • 15. Canvas SVG VML
  • 16. Canvas SVG VML pixels DOM DOM
  • 17. SVG VML
  • 18. DOM?
  • 19. SVG VML
  • 20. API
  • 22. animate attr getBBox hide circle insertAfter ellipse insertBefore image remove path rotate scale rect text show stop toBack toFront translate
  • 23. animate attr getBBox hide circle insertAfter ellipse insertBefore image remove path rotate scale rect text show stop toBack toFront translate
  • 24. fill animate fill-opacity attr font getBBox font-family hide font-size gradient circle insertAfter opacity ellipse insertBefore rotation image remove scale path rotate stroke scale rect stroke-dasharray text show stroke-linecap stroke-linejoin stop stroke-miterlimit toBack stroke-opacity toFront stroke-width translate translation
  • 25. fill animate fill-opacity attr font cx getBBox font-family cy hide font-size height gradient circle insertAfter path opacity ellipse insertBefore r rotation image remove rx scale path rotate stroke ry scale rect stroke-dasharray src text show stroke-linecap width stroke-linejoin stop x stroke-miterlimit toBack y stroke-opacity toFront stroke-width translate translation
  • 26.
  • 27.
  • 28.
  • 30. Circle.node.onclick = function () {…};
  • 32. 16 Kb
  • 33.
  • 34.
  • 35.
  • 36.
  • 37. 0.6.4
  • 38. 0.7
  • 41. Raphaël could make you stand out of the crowd.
  • 42. Using Raphaël could amaze your colleagues