raphael
Post on 15-May-2015
3.417 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related