RaphaëlJS magic
Download as PPTX, PDF1 like975 views
The document discusses RaphaelJS, an open source JavaScript library for working with vector graphics on the web. It provides examples of how to use RaphaelJS to draw basic shapes, animate objects, handle drag and drop, convert SVG files, and more. The document also provides references and resources for learning more about RaphaelJS and using SVG paths.
RaphaëlJS magic
- 1. Raphaël magic Ксения Редунова
- 4. SVG Canvas Does all the job Complete control DOM elements Lots of work Vector graphics Pixel perfect
- 5. Scalable Vector Graphics SVG XML DOM elements JS events for IE6 – 8 VML “VML пока поддерживается лишь немногими программами, среди которых Internet Explorer 5.0+ и Microsoft Office 2000+” © Wikipedia Google Maps использует VML для визуализации векторов на IE
- 6. 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>
- 7. <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>
- 8. Raphael for SVG is like jQuery for DOM API and Reference
- 10. SVG paths "M 250 250 l 0 -50 l -50 0l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"
- 11. SVG paths syntax SVG path reference
- 12. SVG icons http://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.646z Leaf icon demo
- 13. Transformation "t100,100r30,100,100s2,2,100,100r45s1.5" // translate 100, 100, rotate 45 el.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"});
- 15. Drag’n’Drop example r.drag(move, start, up); Drag-n-drop demo
- 16. From the scratch to web animation with Raphael Spline morphing demo
- 17. Convert any SVG to Raphael object SVG to Raphael Converter Demo - cat Cats morphing
- 18. Demo – world map http://raphaeljs.com/world/
- 20. RaphaelJS http://raphaeljs.com Dmitry Baranovsky http://dmitry.baranovskiy.com/ SVG paths reference http://www.w3.org/TR/SVG/paths.html SVG paths to Raphael converter http://toki-woki.net/p/SVG2RaphaelJS/
- 21. Q&A Ксения Редунова @Katidotk