background preloader

Raphaël Reference

Raphaël Reference
Creates a copy of existing animation object with given delay. delay number number of ms to pass between animation start and actual animation Returns: object new altered Animation object Animation.repeat(repeat)⚓➭ Creates a copy of existing animation object with given repetition. repeat number iterations of animation. Element.animate(…)⚓➭ Creates and starts animation for given element. params object final attributes for the element, see also Element.attr ms number of milliseconds for animation to run easing optional string easing type. callback function callback function. or animation animation object, see Raphael.animation Returns: object original element Acts similar to Element.animate, but ensure that given animation runs in sync with another given element. el element to sync with anim animation to sync with easing type. element Sets the attributes of the element. attrName attribute’s name value object of name/value pairs attrNames array in this case method returns array of current values for given attribute names key any Related:  raphael.js

Raphaël—JavaScript Library Raphael.js Tutorial Preview Download Free Preview Never mind the HTML5 canvas, here’s SVG with Raphael.js! For 15 years, front-end web developers have missed out on one of the most basic parts of any programming environment: drawing. Fortunately, browsers are now capable of displaying SVG: scalable vector graphics. In this 50 minute Raphael.js tutorial, you’ll benefit from tips and tricks we’ve learned from over a decade of working with drawing systems, and several years of working with Raphael. Whether you’re a back-end database developer or a front-end designer, you’ll become confident with basic drawing, text, animation, and interaction that’s now available to you with the straightforward API of Raphael.js and the open standard of SVG. Topics covered: Available as part of a PeepCode Unlimited subscription (including streaming on our iOS app!) Includes a typed transcript. Skills

An Introduction to the Raphael JS Library Raphael JS is a lightweight and super-sexy JavaScript framework that allows you to draw vector graphics in your browser! In this tutorial, I will introduce you to some basic drawing functionality, take a look at animation, provide DOM access and finally finish off by creating a cool widget for your site... Framework: Raphael JSVersion: 1.0Difficulty: Beginner to IntermediateEstimated Completion Time: 30 minutes Let's get started by downloading the Raphael JS framework from here. With that downloaded, let's set up a simple HTML document called index.htm and include Raphael in it. N.B. When we draw with Raphael, we do so onto a canvas. I generally prefer the latter method (b), since we usually know where our divs are. All our drawing methods will now be bound to the paper variable. Now that we have our canvas, let's draw some shapes onto it. First off, a circle. This will draw a circle with a radius of 80px with its center placed at x = 100, y = 100. Next, let's draw a rectangle.

Creating a chart with raphael.js from a google spreadsheet - Jérémi Joslin's blog We want to get data from a google spreadsheet and display it as a chart using gRaphaël . We are going to transform the following spreadsheet into a bar graph. gRaphaël’s goal is to help you create stunning charts on your website. gRaphaël is based on raphael.js . Raphael.js is a small JavaScript library that should simplify your work with vector graphics on the web. It currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. You can download the code of the sample at the end of this article. 1. Google spreadsheet offers to serve its data thanks to the Google Data Protocol . 1.1 Preparing our spreadsheet Create a spreadsheet that look like our (2 columns: the first one contain the label, and the second one the data) Save and publish the spreadsheet (Warning! 1.2 Loading the spreadsheet data /* * Specify the information about our spreadsheet */ var spreadsheet_id = "tiRm6cBSE3AZJnyLC6Wlysw" , worksheet_id = "od6" ; 2. You have now a beautiful Graph. see the result

Introduction to Raphaël.js Introduction SVG, short for Scalable Vector Graphics, is a XML-based language for describing objects and scenes. SVG elements can fire events and can be scripted with JavaScript. Drawing Your First Scene Let's begin by drawing a simple scene with Raphaël. Each SVG object can have attributes assigned to it for things like the the color, rotation, stroke color and size, etc. Drawing Advanced Shapes with Paths A path is a series of instructions used by the renderer to create objects. The code and figure below show a rectangle and closed curved drawn with paths. Drawing Text Having illustrations without the ability to draw text would be really boring, luckily, Raphaël provides two methods to draw text. The second method, print, draws the text as a collection of paths. The Vegur font isn't in Raphaël, nor is any font for that matter. Events The snippet below binds a function to rotate a given letter in "ROCKS" 45 degrees when it is clicked. SVG vs Canvas Authoring Tools for SVG svg-edit Inkscape

Animated Skills Diagram with Raphaël In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle […] View demo Download source In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs. Let’s start with the markup. The Markup The HTML structure is going to consist of a main container with the class ‘get’. The CSS In the CSS we will only do two things: hide the elements with the class ‘get’ and set the width and height of the div with the id ‘diagram': The JavaScript Now, let’s go one step further. Conclusion View demoDownload source

Raphael JavaScript library simplifies creating graphics The Raphael JavaScript library delivers a simple-to-use framework for creating graphics. Tony Patton explains how to use the Raphael library and describes the various options that are available in it. Adding flare to a Web page often requires thorough knowledge of a graphic package like Photoshop or another technology like Flash. Using vector graphics Mathematical equations are at the heart of vector graphics. Raphael utilizes vector graphics via SVG and VML as its base for creating graphics. Now that we have an idea of the technology of Raphael, let's take a closer look at using it. Getting Raphael Like most libraries, Raphael is freely available. Creating shapes Using Raphael is as simple as placing one line in your page. The complete path to the raphael.js depends on where it is placed on your Web server. <title>Raphael Test</title> var paper = Raphael(10, 50, 320, 200); var circle = paper.circle(50, 40, 10); circle.attr("fill", "#f00"); circle.attr("stroke", "#fff"); c.attr("stroke","#f33");

Raphael js, Drawing a funny monster | H.Bensalem When i was young i discovered that it’s possible to draw using Qbasic language .. So i passed all my time exploring circles, lines sprites and etc. Now the web is populated by great tools for simple and complex graphics, Rapahel is one of them. Raphael is a javascript library for vectorial graphics, but it can also be used to make nice animations and it is using SVG. In this tutorial i will try to explain how to draw a funny monster face (which looks like Domo) view Demo , or Download source files. So first of all you’ll need to download raphael js library and create a simple html file : Setting up The important thing is “paper” value which is the raphale object : 1 . drawing the head and the mouth : This code will give us : 2. Result : 3. Okey our little monster needs some teeth we’ll use loops to draw em. Final Result : Et voilà !

Des graphes avec Raphaël JS | Foujino-Blog Assez récemment j’ai découvert une superbe librairie JavaScript Open Source qui permet tout simplement de manipuler des objets vectoriels. On arrive a obtenir des résultats tout simplement bluffant, de manière dynamique et super fluide. C’est une librairie très légère, il est compatible et fonctionne de façon correcte avec les navigateurs : Firefox 3.0 et versions postérieuresSafari 3.0 et versions postérieuresChrome 5.0 et versions postérieuresOpera 9.5 et versions postérieuresInternet Explorer 6.0 et versions postérieures Il est disponible sous licence MIT et donc, permet de jouer avec des objets SVG. Les objets SVG (Scalable Vector Graphics) sont un ensemble de données qui permettent de décrire des graphiques vectoriels en se basant sur le langage XML. Comme le SVG utilise l’XML, le contenu du document XML est organisés sous forme d’arbre. Pour commencer il nous faut les données, dans mon exemple les données seront fournis via une requêtes à une table dans une base de données MySQL.

Raphaël: a JavaScript API for SVG By Dmitry Baranovskiy Introduction The first time I saw SVG in 2000–2001, I was blown away by the power it has, and the simplicity of the language, but I was also dismayed that I couldn't really make use of it, because browsers didn't support it. To solve both the compatibility issues and the knowledge gap, I decided to create Raphaël. A simple first example Lets see how it all works by looking at a simple example - let's create a typical "progress throbber", as seen in Apple interfaces, and copied by many. Let's recreate such a throbber without using any images - just SVG via Raphaël. The HTML First things first - the HTML file for our example (spinner.html in the code download) is very simple: <! The body contains a simple div, which in turn will contain our spinner. I prefer to create the container for such graphics in HTML, because it is easier to control it later with CSS, fitting it into layouts nicely, etc. Coding Next, let's take a look at our spinner.js code: Summary

Related: