»

Raphaël JavaScript Library

presented by:

Samuel Clay

SVG Open 2009 - Friday, October 2nd, 2009

Google - Mountain View, California
«

»

Firefox / Safari / Opera

Internet Explorer
«

»

Raphaël - Vector Objects

var R = paper, x = 310, y = 210, r = 150; R.ellipse(x, y + r - 3, r + 10, r / 2) .attr({fill: "r#000-#000", stroke: "none", opacity: 0}); R.circle(x, y, r) .attr({fill: "r(.5,.9)#39c-#036", stroke: "none"}); R.ellipse(x, y, r - 10, r - 3) .attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0});
«

»

Firefox / Safari / Opera

Internet Explorer

Raphaël - Objects, Methods, and Attributes

Vector Objects	Object Methods	Object Properties	Object Attributes
circle ellipse image path rect text	animate attr getBBox hide insertAfter insertBefore remove rotate scale show stop toBack toFront translate	fill fill-opacity font font-family font-size gradient opacity rotation scale stroke stroke-fasharray stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width translation	cx cy height path r rx ry src width x y

«

»

Raphaël - JavaScript Interaction

Next Photo Previous Photo

var images = [ { 'src': "images-tomato1.jpg" }, { 'src': "images-tomato2.jpg" }, { 'src': "images-tomato3.jpg" }, { 'src': "images-tomato4.jpg" }, { 'src': "images-tomato5.jpg" }, { 'src': "images-tomato6.jpg" } ]; var slideshow_id = "slideshow"; var options = { slideshow_id: slideshow_id, canvas_width: 640, canvas_height: 480, image_width: 400, image_height: 300, image_transition_time: 850, image_transition_type: 'bounce', slideshow_type: 'svg' }; var slideshow = new ImageSlideshow(paper, options, images); setTimeout(function() { slideshow.runner(images); }, 100);
«

»

Raphaël - All Together
var images = [ { 'img': "images-whitehouse.jpg", 'text': "White House", 'link': "http://beta.daylife.com/topic/White_House", 's': "large" }, { 'img': "images-repub.jpg", 'text': "U.S. Republican Party", 'link': "http://beta.daylife.com/topic/U.S._Republican_Party", 's': "large" }, { 'img': "images-demo.jpg", 'text': "U.S. Democratic Party", 'link': "http://beta.daylife.com/topic/U.S._Democratic_Party", 's': "large" }, { 'img': "images-congress.jpg", 'text': "U.S. Congress", 'link': "http://beta.daylife.com/topic/U.S._Congress", 's': "medium" }, { 'img': "images-bush.jpg", 'text': "George W. Bush", 'link': "http://beta.daylife.com/topic/George_W._Bush", 's': "medium" }, { 'img': "images-senate.jpg", 'text': "U.S. Senate", 'link': "http://beta.daylife.com/topic/U.S._Senate", 's': "small" }, { 'img': "images-econ.jpg", 'text': "Economic Recession", 'link': "http://beta.daylife.com/topic/Economic_Recession", 's': "small" } ]; var topic_image = { 'img': "images-obama.jpg", 's': 'xlarge' }; var center_x = 180; var center_y = 180; var offset_x = 125; var offset_y = 75; var graph_id = "connections_graph_186817"; var graph_x = 840; var graph_y = 680; var sizes = { 'small': 35, 'medium': 55, 'large': 75, 'xlarge': 100 } setTimeout(function() { var topic_graph = new TopicConnectionGraph(paper, graph_id, graph_x, graph_y, center_x, center_y, offset_x, offset_y, sizes); topic_graph.runner(images, topic_image); }, 1000);
«

»

Raphaël JavaScript Library

Version 1.0 - Released October 2nd, 2009
«

»

Raphaël JavaScript Library

http://raphaeljs.com

SVG Open 2009 - Friday, October 2nd, 2009