Your SlideShare is downloading. ×
RaphaëlJS magic
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

RaphaëlJS magic

271

Published on

RaphaelJS library overview, OdessaJS conference, 2013

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
271
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Raphaël magicКсения Редунова
  • 2. Чего хочет заказчик?
  • 3. SVG CanvasDoes all the job Complete controlDOM elements Lots of workVector graphics Pixel perfect
  • 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. 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. <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. Raphael for SVGis likejQuery for DOMAPI and Reference
  • 8. Basic DemosКружочекМного квадратиков
  • 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. SVG paths syntaxSVG path reference
  • 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. 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. AnimationBasic animation demoEasing demo
  • 14. Drag’n’Drop exampler.drag(move, start, up);Drag-n-drop demo
  • 15. From the scratch to webanimation with RaphaelSpline morphing demo
  • 16. Convert any SVG toRaphael objectSVG to Raphael ConverterDemo - catCats morphing
  • 17. Demo – world maphttp://raphaeljs.com/world/
  • 18. Free Transformmydeco.floorplanner.com/rooms/moodboard
  • 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. Q&A Ксения Редунова @Katidotk

×