Raphaël (JavaScript Library)
Encyclopedia
Raphaël is a cross-browser
Cross-browser
Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers. The term cross-browser is often confused with multi-browser...

 JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....

 library that draws vector graphics for web sites. It will use SVG for most browsers, but will use VML for older versions of Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...

. Raphaël currently supports Firefox 3.0+, Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...

 3.0+, Opera
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...

 9.5+ and Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...

 6.0+.

Use

Raphaël is used by first creating an instance of the Raphaël object
Object (computer science)
In computer science, an object is any entity that can be manipulated by the commands of a programming language, such as a value, variable, function, or data structure...

, which manages the creation of the canvas. The following examples create a canvas that is 320 pixels wide and 200 pixels high:


// top left of canvas at the viewport's 10,50 coordinate
var r = Raphael(10, 50, 320, 200);

// top left of canvas at the top left corner of the #example element (in elements where dir="ltr")
var r = Raphael(document.getElementById("example"), 320, 200);

// same as above
var r = Raphael("example", 320, 200);


Once the Raphaël object has been instantiated, its various drawing, resizing and animation methods may be called to build up a vector graphic. This library includes support of Cùfon fonts, a format that turns a given font into a set of vector paths. It is extensible through plugins.

Usage

Raphaël is used by the Evri
Evri
Evri is a mobile content discovery engine. It focuses on topic-based news aggregation. It has offices in Seattle and San Francisco. The technology specializes in returning results for breaking news, regularly followed topics, new topic searches, and friends' recommendation...

 widget
Web widget
In computing a web widget is a software widget for the web. It's a small application that can be installed and executed within a web page by an end user. They are derived from the idea of code reuse. Other terms used to describe web widgets include: portlet, gadget, badge, module, webjit, capsule,...

 to create cross-browser vector graphics. The widget is used on the Washington Post and the Times Online
The Times
The Times is a British daily national newspaper, first published in London in 1785 under the title The Daily Universal Register . The Times and its sister paper The Sunday Times are published by Times Newspapers Limited, a subsidiary since 1981 of News International...

 websites.

Raphaël is also used by iCloud
ICloud
iCloud is a cloud storage and cloud computing service from Apple Inc. announced on June 6, 2011 at the Apple Worldwide Developers Conference . The service allows users to store data such as music files on remote computer servers for download to multiple devices such as iPhones, iPods, iPads, and...

.com, and by the White House
White House
The White House is the official residence and principal workplace of the president of the United States. Located at 1600 Pennsylvania Avenue NW in Washington, D.C., the house was designed by Irish-born James Hoban, and built between 1792 and 1800 of white-painted Aquia sandstone in the Neoclassical...

.

External links

  • http://raphaeljs.com/ Raphaël homepage
  • http://raphaeljs.com/reference.html Raphaël syntax
  • http://dev.opera.com/articles/view/raphael-a-javascript-api-for-svg/ Raphaël: a JavaScript API for SVG
  • http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ An introduction to Raphaël
  • http://www.fosslc.org/drupal/content/raphaeljs-javascript-vector-graphics-library-web/ Raphael.js: javascript vector graphics library for the web
The source of this article is wikipedia, the free encyclopedia.  The text of this article is licensed under the GFDL.
 
x
OK