Raphaël                  magicКсения Редунова
Чего хочет заказчик?
SVG              CanvasDoes all the job   Complete controlDOM elements       Lots of workVector graphics    Pixel perfect
    Scalable Vector GraphicsSVG                    XML           DOM elements          JS events      for IE6 – 8VML  ...
Firefox -SVG<div id="mypaper" class="paper"> <svg height="302" version="1.1" width="302"xmlns="http://www.w3.org/2000/svg"...
<div class="paper" id="mypaper">                                                        IE8 - VML  <div style="left: 0px; ...
Raphael for SVGis likejQuery for DOMAPI and Reference
Basic DemosКружочекМного квадратиков
SVG paths"M 250 250 l 0 -50l -50 0l 0 -50 l -50 0l 0 50 l -50 0 l 0 50 z"
SVG paths syntaxSVG path reference
SVG iconshttp://raphaeljs.com/icons/                              M1,1v30h30V1H1zM17.326,24.398c0,2.92-1.712,4.248-       ...
Transformation"t100,100r30,100,100s2,2,100,100r45s1.5"// translate 100, 100, rotate 45el.transform("t100,100r45");Paper.se...
AnimationBasic animation demoEasing demo
Drag’n’Drop exampler.drag(move, start, up);Drag-n-drop demo
From the scratch to webanimation with RaphaelSpline morphing demo
Convert any SVG toRaphael objectSVG to Raphael ConverterDemo - catCats morphing
Demo – world maphttp://raphaeljs.com/world/
Free Transformmydeco.floorplanner.com/rooms/moodboard
RaphaelJShttp://raphaeljs.comDmitry Baranovskyhttp://dmitry.baranovskiy.com/SVG paths referencehttp://www.w3.org/TR/SVG/pa...
Q&A  Ксения Редунова     @Katidotk
RaphaëlJS magic
Upcoming SlideShare
Loading in …5
×

RaphaëlJS magic

677 views

Published on

RaphaelJS library overview, OdessaJS conference, 2013

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
677
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

RaphaëlJS magic

  1. 1. Raphaël magicКсения Редунова
  2. 2. Чего хочет заказчик?
  3. 3. SVG CanvasDoes all the job Complete controlDOM elements Lots of workVector graphics Pixel perfect
  4. 4.  Scalable Vector GraphicsSVG   XML DOM elements  JS events for IE6 – 8VML  “VML пока поддерживается лишь немногими программами, среди которых Internet Explorer 5.0+ и Microsoft Office 2000+” © Wikipedia  Google Maps использует VML для визуализации векторов на IE
  5. 5. Firefox -SVG<div id="mypaper" class="paper"> <svg height="302" version="1.1" width="302"xmlns="http://www.w3.org/2000/svg"style="overflow: hidden; position: relative; left: -0.5px;"> <desc>Created with Raphaël 2.1.0</desc> <defs/> <circle cx="150" cy="150" r="50" fill="#ff0000"stroke="#ffffff" style="" stroke-width="3"/> </svg></div>
  6. 6. <div class="paper" id="mypaper"> IE8 - VML <div style="left: 0px; top: 0px; width: 302px; height: 302px; overflow: hidden; display:inline-block; position: relative; cliptop: 0px; clipright: 302px; clipbottom: 302px; clipleft: 0px;"> <span style="left: -9999em; top: -9999em; line-height: 1; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom:0px; margin-left: 0px; position: absolute; "> </span> <shape class="rvml" style="left: 0px; top: 0px; width: 1px; height: 1px;position: absolute;" raphael="true" raphaelid="0"> <stroke class="rvml"></stroke> <skew class="rvml"></skew> <fill class="rvml"></fill> </shape> </div></div>
  7. 7. Raphael for SVGis likejQuery for DOMAPI and Reference
  8. 8. Basic DemosКружочекМного квадратиков
  9. 9. SVG paths"M 250 250 l 0 -50l -50 0l 0 -50 l -50 0l 0 50 l -50 0 l 0 50 z"
  10. 10. SVG paths syntaxSVG path reference
  11. 11. SVG iconshttp://raphaeljs.com/icons/ M1,1v30h30V1H1zM17.326,24.398c0,2.92-1.712,4.248- 4.209,4.248c-2.255,0-3.564-1.168-4.229- 2.576l0,0l0,0l0,0l2.296- 1.391c0.443,0.777,0.846,1.442,1.812,1.442c0.926,0,1.511- 0.354,1.511-1.771V14.77h2.819V24.398zM23.992,28.646c- 2.618,0-4.311-1.248-5.135-2.879l2.295- 1.328c0.604,0.979,1.39,1.711,2.779,1.711c1.168,0,1.904- 0.584,1.904-1.396c0-0.966-0.766-1.311-2.054- 1.865L23.08,22.58c-2.034-0.865-3.383-1.953-3.383- 4.249c0-2.114,1.604-3.726,4.128- 3.726c1.792,0,3.081,0.625,4.008,2.254l-2.19,1.406c-0.479- 0.861-1.006-1.209-1.812-1.209c-0.825,0-1.353,0.521- 1.353,1.209c0,0.852,0.521,1.188,1.729,1.711l0.704,0.309c2. 396,1.021,3.746,2.07,3.746,4.43C28.664,27.259,26.671,28.6 46,23.992,28.646zLeaf icon demo
  12. 12. Transformation"t100,100r30,100,100s2,2,100,100r45s1.5"// translate 100, 100, rotate 45el.transform("t100,100r45");Paper.set() var st = paper.set(); st.push( paper.circle(10, 10, 5), paper.circle(30, 10, 5) ); st.attr({fill: "red"});
  13. 13. AnimationBasic animation demoEasing demo
  14. 14. Drag’n’Drop exampler.drag(move, start, up);Drag-n-drop demo
  15. 15. From the scratch to webanimation with RaphaelSpline morphing demo
  16. 16. Convert any SVG toRaphael objectSVG to Raphael ConverterDemo - catCats morphing
  17. 17. Demo – world maphttp://raphaeljs.com/world/
  18. 18. Free Transformmydeco.floorplanner.com/rooms/moodboard
  19. 19. RaphaelJShttp://raphaeljs.comDmitry Baranovskyhttp://dmitry.baranovskiy.com/SVG paths referencehttp://www.w3.org/TR/SVG/paths.htmlSVG paths to Raphael converterhttp://toki-woki.net/p/SVG2RaphaelJS/
  20. 20. Q&A Ксения Редунова @Katidotk

×