Upload
dmitry-baranovskiy
View
3.417
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Web Standards Group talk about Raphaël — JavaScript Vector Library http://raphaeljs.com
Citation preview
Raphaël
JavaScript Library for Vector Graphics
Dmitry BaranovskiyWSG meeting
11 March 2009
Cool
Cool Cool Cool WTF
Raphaël
What is it for?
Demo
What is it?
JavaScript
window.onload = function () { var hldr = document.getElementById("holder"); var text = hldr.getElementsByTagName("p")[0].innerHTML; hldr.innerHTML = ""; var R = Raphael("holder", 640, 480), txt = R.set(), attr = {"font": '50px "Georgia"', opacity: 0.5}; txt.push(R.text(320, 240, text).attr("fill", "#0f0")); txt.push(R.text(320, 240, text).attr("fill", "#f00")); txt.push(R.text(320, 240, text).attr("fill", "#00f")); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; };};
window.onload = function () { var hldr = document.getElementById("holder"); var text = hldr.getElementsByTagName("p")[0].innerHTML; hldr.innerHTML = ""; var R = Raphael("holder", 640, 480), txt = R.set(), attr = {"font": '50px "Georgia"', opacity: 0.5}; txt.push(R.text(320, 240, text).attr("fill", "#0f0")); txt.push(R.text(320, 240, text).attr("fill", "#f00")); txt.push(R.text(320, 240, text).attr("fill", "#00f")); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; };};
Raphael("holder", 640, 480)
How does it work?
Canvas SVG VML
Canvas SVG VML
pixels DOM DOM
SVG VML
DOM?
SVG VML
API
circleellipseimagepathrecttext
circleellipseimagepathrecttext
animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate
circleellipseimagepathrecttext
animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate
circleellipseimagepathrecttext
animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate
fillfill-opacityfontfont-familyfont-sizegradientopacityrotationscalestrokestroke-dasharraystroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtranslation
circleellipseimagepathrecttext
animateattrgetBBoxhideinsertAfterinsertBeforeremoverotatescaleshowstoptoBacktoFronttranslate
fillfill-opacityfontfont-familyfont-sizegradientopacityrotationscalestrokestroke-dasharraystroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthtranslation
cxcyheightpathrrxrysrcwidthxy
Element.node
Circle.node.onclick = function () {…};
$(Circle.node).click(…);
16 Kb
0.6.4
0.7
gRaphaël
Yet Another Demo
Raphaël could make you stand out of the crowd.
Using Raphaël could amaze your colleagues
Thank You