Your SlideShare is downloading. ×
0
Raphaël JavaScript Library
By Jax
Step
• Over View
• Create Paper
• Create Element
• Sample run 1
• Element animate
• Element event
• Sample run 2
• drag
• ...
Over View
• Raphael
• Paper
• Element
• Animation
• Matrix
• Set
Create Paper
var paper = Raphael("elementId", 840, 480);
var paper = Raphael(element, 840, 480);
var paper = Raphael(10, 1...
Create Element
paper.circle(x, y, radius)
paper.ellipse(x, y, radiusX, radiusY)
paper.rect(x, y, width, height, [radius])
...
Paper.path
http://raphaeljs.com/reference.html#Paper.path
Command Name Parameters
M moveto (x y)+
Z closepath (none)
L lin...
Raphael.fn
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
return this.path( ... );
};
var paper = Raphael(10, 10, 63...
Element.attr
// get
Element.attr('attrName')
Element.attr(['attrName1', 'attrName2'])
// set
Element.attr('attrName', 'val...
Element attributes
• cx
• cy
• r
• rx
• ry
• x
• y
• fill
• fill-opacity
• height
• width
• opacity
• path
• stroke
• stro...
Sample run 1
• In JsBin
<script src="https://rawgithub.com/DmitryBaranovskiy/raphael/master/raphael-min.js" type="text/jav...
Element animate
Element.animate(attrObj, ms, [easing])
• “linear”
• “<” or “easeIn” or “ease-in”
• “>” or “easeOut” or “ea...
Element event
• click (handler)
• dblclick (handler)
• drag(onmove, onstart, onend, [mcontext], [scontext],
[econtext])
• ...
Sample run 2
• Use animate 200ms on hover
Element Other Method
• data(key, [value])
• removeData([key])
• glow([glow])
• clone()
• remove()
• show()
• hide()
• toBa...
drag
paper.circle(50, 50, 20).attr('fill', 'red').drag(
function (dx, dy, x, y, event) {
this.attr({ cx: this.ox + dx, cy:...
Sample run 3
Raphael JavaScript Library
Upcoming SlideShare
Loading in...5
×

Raphael JavaScript Library

395

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

No notes for slide

Transcript of "Raphael JavaScript Library"

  1. 1. Raphaël JavaScript Library By Jax
  2. 2. Step • Over View • Create Paper • Create Element • Sample run 1 • Element animate • Element event • Sample run 2 • drag • Sample run 3
  3. 3. Over View • Raphael • Paper • Element • Animation • Matrix • Set
  4. 4. Create Paper var paper = Raphael("elementId", 840, 480); var paper = Raphael(element, 840, 480); var paper = Raphael(10, 10, 840, 480);
  5. 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. 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. 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. 8. Element.attr // get Element.attr('attrName') Element.attr(['attrName1', 'attrName2']) // set Element.attr('attrName', 'value') Element.attr({ 'attrName': 'value' })
  9. 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. 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. 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. 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. 13. Sample run 2 • Use animate 200ms on hover
  14. 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. 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. 16. Sample run 3
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×