Instant RaphaelJS Starter

Get to grips with RaphaelJS - a powerful cross-browser compatible vector graphics library, to create interactive 2D graphics and animations with ease

A.Krishna sagar

62 Pages

8286 Reads



PDF Format

1.66 MB

Java Script

Download PDF format

  • A.Krishna sagar   
  • 62 Pages   
  • 03 Mar 2015
  • Page - 1 read more..

  • Page - 2

    Instant RaphaelJS Starter Get to grips with RaphaelJS - a powerful cross-browser compatible vector graphics library, to create interactive 2D graphics and animations with ease A.Krishna sagar BIRMINGHAM - MUMBAI read more..

  • Page - 3

    Instant RaphaelJS Starter Copyright © 2 013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. information presented. However, the read more..

  • Page - 4

    Credits Author A.Krishna sagar Reviewer Flarnie Marchán Acquisition Editor Mary Nadar Commissioning Editor Ameya Sawant Technical Editors Charmaine Pereira Sadhana Varma Copy Editor Insiya Morbiwala Project Coordinator Sherin Padayatty Proofreader Maria Gould Graphics Aditi Gajjar Production Coordinator Prachali Bhiwandkar Cover Work Prachali Bhiwandkar Cover Image Conidon Miranda read more..

  • Page - 5

    About the Author A.Krishna sagar is a professional web developer and designer who has a love for creativity and enjoys experimenting with various frontend web technologies. He is a technical enthusiast specializing in frontend development (JavaScript, jQuery, CSS3, HTML5, Canvas, RaphaelJS, WebGL, and Google Maps JavaScript API), with over 4 years of industrial experience. As a read more..

  • Page - 6

    About the Reviewer Flarnie Marchán is a professional freelancer specializing in web design and frontend development (JavaScript, HTML, and CSS). She shares her passion for design and technology at . Be sure to check it out, or get in touch at . read more..

  • Page - 7 You might want to visit your book. and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@ for more details. At , you can also read a collection of free technical articles, sign up for a read more..

  • Page - 8 library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? Fully searchable across every book published by Packt Copy and paste, print and bookmark content On demand and accessible via web browser If you have an account with Packt at , you can use this to access PacktLib today and view nine read more..

  • Page - 9 read more..

  • Page - 10

    Table of Contents Instant RaphaelJS Starter 1 Two-headed and three-lettered 3 The marriage of two problems and the birth of RaphaelJS 3 JavaScript – the binder of oddities 3 Browser support 3 A little about vector and raster graphics 4 RaphaelJS as a vector 5 The x, y positioning that RaphaelJS uses 5 Installation 6 Step 2 – Downloading RaphaelJS 6 Step 3 – Adding it to read more..

  • Page - 11

    Table of Contents [ ii ] Transforming an element 22 Manipulating a shape 22 Animating a shape 26 Animating transformations 28 Adding events to Raphael elements 29 Click event 29 Mouseover event 30 Methods you'll want to know and use 31 Element methods 31 Paper methods 39 Set methods 42 People and places you should get to know 45 Articles and tutorials 45 Community 45 Blogs 46 read more..

  • Page - 12

    Instant RaphaelJS Starter Welcome to Instant RaphaelJS Starter. This book has especially been created to provide you with all the information that you need to set up RaphaelJS. You will learn the basics of RaphaelJS, get using RaphaelJS. This document contains the following sections: So what is RaphaelJS? – Find out what RaphaelJS actually is, what you can do with it, read more..

  • Page - 13 read more..

  • Page - 14

    3 Instant RaphaelJS Starter RaphaelJS is a vector graphics library, which is used to draw objects in the browser. libraries, and how it sets itself apart from HTML5 Canvas . Almost a decade ago, we had a great technology called Scalable Vector Graphics (SVG), which was derived from (VML) to draw simple to complex 2D graphics on browsers. SVG was a (W3C the minds of read more..

  • Page - 15

    4 Instant RaphaelJS Starter We now know what RaphaelJS is—it's a combination of SVG and VML using whichever of these two technologies the current browser supports, therefore it is versatile and reliable. But it's equally important to also know what is not RaphaelJS. Just like the world is of two primary states water and land, graphics are of two primitive types—vector read more..

  • Page - 16

    5 Instant RaphaelJS Starter RaphaelJS as a vector RaphaelJS is a vector graphics library, therefore the drawings are real DOM objects. Thus they can be dynamically accessed, manipulated, resized, and practically hammered into anything you want in runtime. Best of all is that they can be assigned events like click , mouseover , mouseleave , and so on. The capabilities of RaphaelJS read more..

  • Page - 17

    6 Instant RaphaelJS Starter Installation Installing and setting up RaphaelJS is very simple, it's as simple as downloading the latest In three easy steps, you can install RaphaelJS and get it set up. Before you install RaphaelJS, you will need to check that you have all of the following required elements: A web browser A text editor read more..

  • Page - 18

    7 Instant RaphaelJS Starter Include it in the bottom section of your HTML page using the <script> tag and point the src attribute to the path where the raphael.js Script included at the bottom The browser reads the HTML code in a linear fashion. If there is a script tag at the top, the browser will download the script and it will start executing it. During read more..

  • Page - 19

    8 Instant RaphaelJS Starter Initializing a Raphael object is as simple as munching a banana, and there are two ways to munch. It can either be created directly in the browser's viewport (viewable area) or in an element. It's usually advisable to create the Raphael object in an element, probably a Div tag. It's important to keep in mind that the paper (drawing area) read more..

  • Page - 20

    9 Instant RaphaelJS Starter To initiate the Raphael object inside an element, we must add the element ID or the element itself in the place of the positioning coordinates (x, y). Let's consider the following example: //The element itself is passed //This line creates a Raphael paper inside 'paperDiv', which is 650px in width and 400px in height var elm= read more..

  • Page - 21

    10 Instant RaphaelJS Starter The output for the preceding code is as shown in the following screenshot: A circle created using RaphaelJS We now have a smooth circle. It's absolutely fantastic, but wouldn't it be much better if we could It's a fairly straightforward method. Styles and other customizations to our new circle are done using the attr() method. This method takes read more..

  • Page - 22

    11 Instant RaphaelJS Starter The output for the preceding code snippet is as shown in the following screenshot: A circle with styles applied using the attr() method Raphael's paper allows easy integration of vector graphics in an HTML layout, which makes it even more appealing. Paper—the shiny new wand. There are a ton of attributes available for each object and a list of read more..

  • Page - 23

    12 Instant RaphaelJS Starter As you learn to use RaphaelJS, you will realize that there are a plethora of things you can do with it. This section will teach you all about the most commonly performed tasks and most commonly used features in RaphaelJS. By the end of this section, you will be able to: Create a Raphael element Manipulate the style of the element read more..

  • Page - 24

    13 Instant RaphaelJS Starter The output for the preceding code snippet is shown in the following screenshot: Plain rectangle The following code will create a basic rectangle with rounded corners: // creating a raphael paper in 'paperDiv' var paper = Raphael ("paperDiv", 650,400); //The fifth parameter will make the rectangle rounded by the number of pixels specified – A read more..

  • Page - 25

    14 Instant RaphaelJS Starter We can create other basic shapes in the same way. Let's create an ellipse with our magic wand. Ellipse An ellipse is created using the ellipse() method and it takes four required parameters, namely x,y, horizontal radius, and vertical radius. The horizontal radius will be the width of the ellipse divided by two and the vertical radius will read more..

  • Page - 26

    15 Instant RaphaelJS Starter It's pretty easy to create basic shapes, but what about complex shapes such as stars, octagons, or any other shape which isn't a circle, rectangle, or an ellipse. It's time for the next step of Raphael wizardry. Complex shapes are created using the path() method which has only one parameter called pathString . Though the path string may look read more..

  • Page - 27

    16 Instant RaphaelJS Starter The uppercase commands are absolute (M20, 20 ); they are calculated from the 0,0 position of the drawing area (paper). The lowercase commands are relative (m20, 20 ); they are calculated There are so many commands, which might feel like too much to take in—don't worry; there is no need to remember every command and its format. Because we'll read more..

  • Page - 28

    17 Instant RaphaelJS Starter Well, a triangle may be an easy shape to put into a path string. How about a complex shape such minimal fuss and sharp accuracy. The vector graphics editors are meant for creating complex shapes with ease and they have some powerful tools in their disposal to help us draw. For this example, we'll create a star shape using an open source read more..

  • Page - 29

    18 Instant RaphaelJS Starter Step 2 – Saving the shape as SVG The paths used by SVG and RaphaelJS are similar. The trick is to use the paths generated by the Saving the shape as an SVG file Step 3 – Copying the SVG path string The next step is to copy the path from SVG and paste it into Raphael's path() method. SVG is a markup language, and therefore it's read more..

  • Page - 30

    19 Instant RaphaelJS Starter After copying the path string from SVG, paste it into Raphael's path() method. var newpath=paper.path("copied path string from SVG").attr({ "fill":"#5DDEF4", "stroke":"#2A6570", "stroke-width":2 }); That's it! We have created a complex shape in RaphaelJS with absolute simplicity. Using this technique, we can read more..

  • Page - 31

    20 Instant RaphaelJS Starter Creating text Text can be created using the text() method. Raphael gives us a way to add a battery of styles to the text object, right from changing colors to animating physical properties like position and size. The text() method takes three required parameters, namely, x,y, and the text string. The syntax for the text() method is as read more..

  • Page - 32

    21 Instant RaphaelJS Starter A brief explanation of text-anchor property A screenshot of the text rendered using the text() method is as follows: Rendering text using the text() method read more..

  • Page - 33

    22 Instant RaphaelJS Starter The attr() an element. The following example explains the attr() method: rect.attr('fill','#ddd'); // This will update the background color of the rectangle to gray RaphaelJS not only creates elements, but it also allows the manipulating or transforming of any element and its properties dynamically. Manipulating a shape By the end of this section, you would read more..

  • Page - 34

    23 Instant RaphaelJS Starter As with the path string, the uppercase letters are for absolute transformations and the lowercase for relative transformation. If the transformation string reads r90T100,0 , then the element will rotate 90 degrees and move 100 px in the x axis (left). If the same reads r90t100,0 , then the element will rotate 90 degrees and since the translation is read more..

  • Page - 35

    24 Instant RaphaelJS Starter Getting a grip on this simple logic will save you a lot of frustration in the future while developing as well as while debugging. The following is a screenshot depicting relative translation: Using relative translation The following is a screenshot depicting absolute translation: Using absolute translation read more..

  • Page - 36

    25 Instant RaphaelJS Starter Notice the gap on top of the rotated rectangle; it's moved 100px on the one with relative translation and there is no such gap on top of the rectangle with absolute translation. By default, the transform method will append to any transformation already applied to the element. To reset all transformations, use element.transform("") . Adding read more..

  • Page - 37

    26 Instant RaphaelJS Starter The triangle is transformed using relative translation (t). Now you know the reason why the triangle has moved down rather than moving to its right. What good is a magic wand if it can't animate inanimate objects! RaphaelJS can animate as smooth as butter almost any property from color, opacity, width, height, and so on with little fuss. read more..

  • Page - 38

    27 Instant RaphaelJS Starter // Print 'Animation complete' when the animation is complete $("#animation_status").html("Animation complete") }) The following screenshot shows a rectangle before animation: Rectangle before animation A screenshot demonstrating the use of a callback function when the animation is complete is as follows. The text will appear in the read more..

  • Page - 39

    28 Instant RaphaelJS Starter The following code animates the background color and opacity of a rectangle: rect.animate({ "fill":"#ddd", // final color, "fill-opacity":0.7 },300,"easeIn",function(){ // something to do when the animation is complete – this call back function is optional // Alerts done when the animation is complete read more..

  • Page - 40

    29 Instant RaphaelJS Starter The following is a screenshot of the same rectangle after animation: After animation Animation can be done on almost any property. Animation is an awesome feature and it's really smooth. But it comes at a cost; it takes up precious browser resources. It won't drain the browser impact on the end performance. Therefore, the developer must use animations read more..

  • Page - 41

    30 Instant RaphaelJS Starter "fill":"#5DDEF4", "stroke":"#2A6570", "stroke-width":2 } //creating a plain circle var cir =,120,30).attr(blueStyle);{ alert('Clicked circle'); }) The following is a screenshot demonstrating the click event handler: Click event handler Mouseover event The mouseover event can be added using read more..

  • Page - 42

    31 Instant RaphaelJS Starter },400) }) // The preceding code animates the background color and scales up the circle twice on mouseover This section will cover only the most common and frequent methods, as an entire list of attributes and methods is beyond the scope of this book. These methods can only be used with an element and not directly. For example, . read more..

  • Page - 43

    32 Instant RaphaelJS Starter The following is an example of the attr() method: // Adding background color and stroke to a rectangle rect.attr({ "fill":"#17A9C6", // Adds a background color "stroke":"#2A6570", // the color of the border "stroke-width":2 // the width of the border }) The click() method is used to bind the click read more..

  • Page - 44

    33 Instant RaphaelJS Starter The mouseup() event binds the mouseup event to Raphael elements—it triggers when any mouse button is released. The following is an example of the mouseup() method: rect.mouseup(function(){ // The rectangle will animate to 100px wide any mouse button is released rect.animate({ 'width':'100' },400) }) The mousemove() method triggers when the mouse read more..

  • Page - 45

    34 Instant RaphaelJS Starter The mouseout() method triggers when the mouse leaves the Raphael element. The following is an example of the mouseout() method: // scaling down the size of the circle when the mouse leaves it cir.mouseout(function(){ cir.animate({ transform:'s0.5' // scaling down the circle to half of its original size },500,'bounce') //adding and elastic read more..

  • Page - 46

    35 Instant RaphaelJS Starter It's obvious that copying the variable didn't work, as it's evident that the background color has been applied to the same rectangle, and there is no second rectangle as there is supposed to be. This problem can be addressed by the clone() method in a simple and elegant way. //To duplicate a rectangle var newRect=rect.clone(); newRect.attr({ read more..

  • Page - 47

    36 Instant RaphaelJS Starter{ alert('name')); }) The following is a screenshot depicting the data contents of the circle when clicked: Data contents of the circle when clicked The removedata() method takes the key as a parameter. If the key isn't provided, it will remove all the associated data. The syntax for this method is: removedata(key) The read more..

  • Page - 48

    37 Instant RaphaelJS Starter The following is an example of the getBBox() method: cir.getBBox() // returns the bounding box cir.getBBox({ isWithoutTransform:true // this will return the bouding box values before any transformation that has been applied on the element. It will still return the old values ignoring the transformations }) The getBBox() method returns an object with the read more..

  • Page - 49

    38 Instant RaphaelJS Starter The toFront() method brings the element to the forefront on top of all other elements. Its function is similar to . It doesn't take any parameters. The following is an example of the toFront() method: cir.toFront();//brings the circle on top of all the elements The following screenshot demonstrates the use of the toFront() method. The circle is read more..

  • Page - 50

    39 Instant RaphaelJS Starter The transform() method adds a transformation to a given element. It takes only one parameter and it's the transformation string. The syntax for this method is as follows: transform([transformationString]); The following is an example of the transform() method: rect.transform("s1.5t100,100,r90"); //scales the rectangle to 1.5 times larger and then translates read more..

  • Page - 51

    40 Instant RaphaelJS Starter The paper.ellipse() method creates an ellipse. The following is the syntax for this method: ellipse(x,y,rx,ry); where x is the x position of the circle, y is the y position of the circle, rx is the horizontal radius, and ry is the vertical radius. The following is an example of the paper.ellipse() method: var ell = paper.ellipse(15,30,80,50); read more..

  • Page - 52

    41 Instant RaphaelJS Starter The paper.image() method allows us to import images on to the paper. This method takes Description src The path of the image X The x coordinate point where the image should be placed Y The y coordinate point where the image should be placed Width The width of the image Height The height of the image The following is an example of the read more..

  • Page - 53

    42 Instant RaphaelJS Starter The following is an example of the paper.set() method: // the following code will create a new set called raphaelSet, add elements to it and change the color of the set to red var raphaelSet=paper.set();//creating a new set // adding elements to the set using the push() method raphaelSet.push(circle,rect,ellipse); //changing the color of the set – read more..

  • Page - 54

    43 Instant RaphaelJS Starter The following is an example of the set.clear() method: raphaelSet.clear(); // The preceding code will remove the set called raphaelSet, not its elements Clearing a set seems to be simple—a call to the clear method and kaboom, everything is gone. set.exclude() method, which can be used to remove only a particular element from the set. This method read more..

  • Page - 55

    44 Instant RaphaelJS Starter The set.splice() method is used to delete and insert an element. This method takes three parameters, namely, index , count , and element , which are to be inserted. Index is where the element should be deleted, count is the number of elements to remove from the index position, The following is the syntax of this method: set.splice(index, count, read more..

  • Page - 56

    45 Instant RaphaelJS Starter If you need help with RaphaelJS, here are some people and places that will prove invaluable. : : : : A useful list of articles and tutorials for further reference and reading is as follows: read more..

  • Page - 57

    46 Instant RaphaelJS Starter The blog of Dmitry Baranovskiy, the creator of RaphaelJS and various other libraries: RaphaelJS tweets: Follow RaphaelJS on Twitter at For more open source information, follow Packt at!/ packtopensource read more..

  • Page - 58

    47 Instant RaphaelJS Starter RaphaelJS is a versatile and easy-to-use vector graphics library, allowing us to do tasks which were unthinkable a few years ago. Though HTML5 Canvas was inspired from vector graphics, it doesn't mean that it's a replacement for SVG, rather they compliment each other. Today's browsers have faster and better JavaScript engines that make rendering read more..

  • Page - 59 read more..

  • Page - 60

    Instant RaphaelJS Starter Management" in April 2004 and subsequently continued to specialize in publishing highly focused Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks. Our solution based books give you the knowledge and power to customize the software and technologies you're read more..

  • Page - 61

    ISBN: 978-1-84951-722-5 Paperback: 320 pages Over 80 recipes with examples and practical tips to help you quickly learn and develop cross-platform applications with jQuery Mobile 1. Create applications that use custom animations and use various techniques to improve application performance 2. Use and customize the various controls such as toolbars, buttons, and read more..

  • Page - 62

    ISBN: 978-1-84969-126-0 Paperback: 352 pages Create six fun games using the latest HTML5, Canvas, CSS, and JavaScript techniques 1. Learn HTML5 game development by building six fun example projects 2. Full, clear explanations of all the essential techniques 3. Covers puzzle games, action games, multiplayer, and Box 2D physics 4. Use the Canvas with multiple read more..

Write Your Review