Your SlideShare is downloading. ×
Raphael JavaScript Library
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

Raphael JavaScript Library

340
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
340
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
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 JavaScript Library By Jax
  • 2. Step • Over View • Create Paper • Create Element • Sample run 1 • Element animate • Element event • Sample run 2 • drag • Sample run 3
  • 3. Over View • Raphael • Paper • Element • Animation • Matrix • Set
  • 4. Create Paper var paper = Raphael("elementId", 840, 480); var paper = Raphael(element, 840, 480); var paper = Raphael(10, 10, 840, 480);
  • 5. Create Element paper.circle(x, y, radius) paper.ellipse(x, y, radiusX, radiusY) paper.rect(x, y, width, height, [radius]) paper.text(x, y, text) paper.path("M10 10 L90 90") paper.image(src, x, y, width, height)
  • 6. Paper.path http://raphaeljs.com/reference.html#Paper.path Command Name Parameters M moveto (x y)+ Z closepath (none) L lineto (x y)+ H horizontal lineto x+ V vertical lineto y+ C curveto (x1 y1 x2 y2 x y)+ S smooth curveto (x2 y2 x y)+ Q quadratic Bézier curveto (x1 y1 x y)+ T smooth quadratic Bézier curveto (x y)+ A elliptical arc (rx ry x-axis-rotation large- arc-flag sweep-flag x y)+ R Catmull-Rom curveto* x1 y1 (x y)+
  • 7. Raphael.fn Raphael.fn.arrow = function (x1, y1, x2, y2, size) { return this.path( ... ); }; var paper = Raphael(10, 10, 630, 480); // then use it paper.arrow(10, 10, 30, 30, 5);
  • 8. Element.attr // get Element.attr('attrName') Element.attr(['attrName1', 'attrName2']) // set Element.attr('attrName', 'value') Element.attr({ 'attrName': 'value' })
  • 9. Element attributes • cx • cy • r • rx • ry • x • y • fill • fill-opacity • height • width • opacity • path • stroke • stroke-opacity • stroke-width http://raphaeljs.com/reference.ht ml#Element.attr
  • 10. Sample run 1 • In JsBin <script src="https://rawgithub.com/DmitryBaranovskiy/raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script>
  • 11. Element animate Element.animate(attrObj, ms, [easing]) • “linear” • “<” or “easeIn” or “ease-in” • “>” or “easeOut” or “ease-out” • “<>” or “easeInOut” or “ease-in-out” • “backIn” or “back-in” • “backOut” or “back-out” • “elastic” • “bounce”
  • 12. Element event • click (handler) • dblclick (handler) • drag(onmove, onstart, onend, [mcontext], [scontext], [econtext]) • hover(f_in, f_out, [in_context], [out_context]) • mousedown (handler) • mousemove (handler) • mouseout (handler) • mouseover (handler) • mouseup (handler) • onDragOver (handler)
  • 13. Sample run 2 • Use animate 200ms on hover
  • 14. Element Other Method • data(key, [value]) • removeData([key]) • glow([glow]) • clone() • remove() • show() • hide() • toBack() • toFront() • rotate(deg, [cx], [cy]) • scale(sx, sy, [cx], [cy]) • transform([tstr]) • translate(dx, dy) • resume([anim]) • status([anim], [value]) • stop([anim])
  • 15. drag paper.circle(50, 50, 20).attr('fill', 'red').drag( function (dx, dy, x, y, event) { this.attr({ cx: this.ox + dx, cy: this.oy + dy }); },  function (x, y, event) { this.ox = this.attr("cx"); this.oy = this.attr("cy"); } );
  • 16. Sample run 3