Soumettre la recherche
Mettre en ligne
Raphael
•
5 j'aime
•
1,393 vues
Dmitry Baranovskiy
Suivre
Web Standards Group talk about Raphaël — JavaScript Vector Library http://raphaeljs.com
Lire moins
Lire la suite
Technologie
Art & Photos
Signaler
Partager
Signaler
Partager
1 sur 44
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Aysylu Greenberg
Loom at Clojure/West
Loom at Clojure/West
Aysylu Greenberg
Loom and Graphs in Clojure
Loom and Graphs in Clojure
Aysylu Greenberg
DrawingML Subject: Shape Properties & Effects
DrawingML Subject: Shape Properties & Effects
Shawn Villaron
Raphaël JS Conf
Raphaël JS Conf
Dmitry Baranovskiy
RaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
Raphaël
Raphaël
Dmitry Baranovskiy
JavaScript: enter the dragon
JavaScript: enter the dragon
Dmitry Baranovskiy
Recommandé
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Aysylu Greenberg
Loom at Clojure/West
Loom at Clojure/West
Aysylu Greenberg
Loom and Graphs in Clojure
Loom and Graphs in Clojure
Aysylu Greenberg
DrawingML Subject: Shape Properties & Effects
DrawingML Subject: Shape Properties & Effects
Shawn Villaron
Raphaël JS Conf
Raphaël JS Conf
Dmitry Baranovskiy
RaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
Raphaël
Raphaël
Dmitry Baranovskiy
JavaScript: enter the dragon
JavaScript: enter the dragon
Dmitry Baranovskiy
Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)
Valeriu Margescu
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
guimera
What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web
Vimi.co Ltd - Bangkok Web Agency
H ren through michelangelo
H ren through michelangelo
NCS
Barroco III
Barroco III
Arquivos-arte
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
guimera
VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)
guimera
Egyptian Paintingteam 10
Egyptian Paintingteam 10
xmeowxmixx
Modern World History: Chapter 1
Modern World History: Chapter 1
ldaill
Michelangelo
Michelangelo
Arquivos-arte
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Edeliza Macalandag
Jan van Eyck
Jan van Eyck
Jerry Daperro
Renoir
Renoir
SvetlanaMasenko
Ancient Egyptian Civilization
Ancient Egyptian Civilization
Jesuit Tertianship in Dublin, Ireland
Raphael Art and Life
Raphael Art and Life
Denver School of the Arts, Denver Public Schools
Michelangelo - Cappella Sistina
Michelangelo - Cappella Sistina
Sotirios Raptis
History of painting
History of painting
SFYC
History of Internet Searching
History of Internet Searching
Scott Lee
History of the_internet
History of the_internet
Apostolos Syropoulos
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
guimera
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
David Isbitski
Contenu connexe
En vedette
Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)
Valeriu Margescu
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
guimera
What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web
Vimi.co Ltd - Bangkok Web Agency
H ren through michelangelo
H ren through michelangelo
NCS
Barroco III
Barroco III
Arquivos-arte
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
guimera
VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)
guimera
Egyptian Paintingteam 10
Egyptian Paintingteam 10
xmeowxmixx
Modern World History: Chapter 1
Modern World History: Chapter 1
ldaill
Michelangelo
Michelangelo
Arquivos-arte
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Edeliza Macalandag
Jan van Eyck
Jan van Eyck
Jerry Daperro
Renoir
Renoir
SvetlanaMasenko
Ancient Egyptian Civilization
Ancient Egyptian Civilization
Jesuit Tertianship in Dublin, Ireland
Raphael Art and Life
Raphael Art and Life
Denver School of the Arts, Denver Public Schools
Michelangelo - Cappella Sistina
Michelangelo - Cappella Sistina
Sotirios Raptis
History of painting
History of painting
SFYC
History of Internet Searching
History of Internet Searching
Scott Lee
History of the_internet
History of the_internet
Apostolos Syropoulos
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
guimera
En vedette
(20)
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 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
H ren through michelangelo
H ren through michelangelo
Barroco III
Barroco III
Vienna, 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)
Egyptian Paintingteam 10
Egyptian Paintingteam 10
Modern World History: Chapter 1
Modern World History: Chapter 1
Michelangelo
Michelangelo
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Jan van Eyck
Jan van Eyck
Renoir
Renoir
Ancient Egyptian Civilization
Ancient Egyptian Civilization
Raphael Art and Life
Raphael Art and Life
Michelangelo - Cappella Sistina
Michelangelo - Cappella Sistina
History of painting
History of painting
History of Internet Searching
History of Internet Searching
History of the_internet
History of the_internet
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
Similaire à Raphael
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
David Isbitski
SVG
SVG
Dmitry Baranovskiy
SVGo workshop
SVGo workshop
Anthony Starks
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Juho Vepsäläinen
Raphaël and You
Raphaël and You
Trotter Cashion
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
Mindfire Solutions
An Introduction to NV_path_rendering
An Introduction to NV_path_rendering
Mark Kilgard
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Html5 Canvas and Media
Html5 Canvas and Media
Suresh Balla
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
David Isbitski
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Justin Dorfman
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
楽々Scalaプログラミング
楽々Scalaプログラミング
Tomoharu ASAMI
Specs2, go functional
Specs2, go functional
specs2
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Spiffy
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 -...
Codemotion
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
Similaire à Raphael
(20)
SVGo: 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 JavaScript
SVG
SVG
SVGo workshop
SVGo workshop
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Raphaël and You
Raphaël and You
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
An Introduction to NV_path_rendering
An Introduction to NV_path_rendering
Google 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 Performance
Html5 Canvas and Media
Html5 Canvas and Media
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
楽々Scalaプログラミング
楽々Scalaプログラミング
Specs2, go functional
Specs2, go functional
MS 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 -...
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Plus de Dmitry Baranovskiy
The Origins of Magic
The Origins of Magic
Dmitry Baranovskiy
Demystifying Prototypes
Demystifying Prototypes
Dmitry Baranovskiy
Type Recognition
Type Recognition
Dmitry Baranovskiy
Obvious Secrets of JavaScript
Obvious Secrets of JavaScript
Dmitry Baranovskiy
Your JavaScript Library
Your JavaScript Library
Dmitry Baranovskiy
Canvas
Canvas
Dmitry Baranovskiy
Java Script Workshop
Java Script Workshop
Dmitry Baranovskiy
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
Typography on the Web
Typography on the Web
Dmitry Baranovskiy
Microformats—the hidden treasure
Microformats—the hidden treasure
Dmitry Baranovskiy
Advanced JavaScript Techniques
Advanced JavaScript Techniques
Dmitry Baranovskiy
Plus de Dmitry Baranovskiy
(11)
The Origins of Magic
The Origins of Magic
Demystifying Prototypes
Demystifying Prototypes
Type Recognition
Type Recognition
Obvious Secrets of JavaScript
Obvious Secrets of JavaScript
Your JavaScript Library
Your JavaScript Library
Canvas
Canvas
Java Script Workshop
Java Script Workshop
Web Vector Graphics
Web Vector Graphics
Typography on the Web
Typography on the Web
Microformats—the hidden treasure
Microformats—the hidden treasure
Advanced JavaScript Techniques
Advanced JavaScript Techniques
Dernier
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Dernier
(20)
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Raphael
1.
Raphaël JavaScript Library for
Vector Graphics Dmitry Baranovskiy WSG meeting 11 March 2009
2.
Cool
3.
4.
Cool Cool Cool
WTF
5.
6.
Raphaël
7.
8.
What is it
for?
9.
Demo
10.
What is it?
11.
JavaScript
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
21.
circle ellipse image path rect text
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.
29.
Element.node
30.
Circle.node.onclick =
function () {…};
31.
$(Circle.node).click(…);
32.
16 Kb
33.
34.
35.
36.
37.
0.6.4
38.
0.7
39.
gRaphaël
40.
Yet Another Demo
41.
Raphaël could make
you stand out of the crowd.
42.
Using Raphaël could
amaze your colleagues
43.
http://RaphaelJS.com/
44.
Thank You
Télécharger maintenant