O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Instant RaphaelJS Starter

Book Description

Get to grips with RaphaelJS to create simple to complex drawings and animations with cross-browser suppor

  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Create cross-browser imageless drawings and animations, with DOM access
  • Create your own shape, almost any shape, with simple and illustrated techniques
  • Write once and run in almost any browsers including IE6

In Detail

Drawing in a browser without images has been around for a long time but it was a complex task with browser support issues. Raphael JS aims to solve all these problems with simple and clear methods to draw cross-browser compatible drawings. Imagine drawing complex dials, graphs, and meters for a dashboard, all without images, and the ability to dynamically manipulate those drawings. Creativity is the only limit with Raphael JS.

"Raphael JS Starter" is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the real power that is behind Raphael JS, and give you a good grounding in using it in your web pages.

"Raphael JS Starter" looks at the HTML5 video formats available, and breaks down the mystery and confusion that surrounds which format to use. It will take you through a number of clear, practical recipes that will help you to take advantage of the new HTML5 video standard, quickly and painlessly.

You will also learn how to draw your own shapes using any vector graphics editor, or by using one of the pre-defined shapes. We will also take a look at adding functionality such as DOM events, or animations, as well as how to manipulate the shapes dynamically. If you want to take advantage of imageless vector graphics for browsers using Raphael JS, then this is the book for you.

You will learn everything you need to know to convert shapes and perform animations, as well as how to draw custom shapes with simple techniques using Raphael JS and use them across multiple browsers.

Table of Contents

  1. Instant RaphaelJS Starter
    1. Instant RaphaelJS Starter
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.packtpub.com
      1. Support files, eBooks, discount offers and more
    6. packtLib.packtpub.com
      1. Why Subscribe?
      2. Free Access for Packt account holders
    7. 1. Instant RaphaelJS Starter
      1. So, what is RaphaelJS?
        1. Two-headed and three-lettered
        2. The marriage of two problems and the birth of RaphaelJS
          1. JavaScript – the binder of oddities
        3. Browser support
        4. What is RaphaelJS and what is not RaphaelJS?
          1. A little about vector and raster graphics
          2. RaphaelJS as a vector
        5. The x, y positioning that RaphaelJS uses
      2. Installation
        1. Step 1 – What do I need?
        2. Step 2 – Downloading RaphaelJS
        3. Step 3 – Adding it to the HTML
        4. And that's it!
      3. Quick start – creating your first shape
        1. Step 1 – Creating a canvas to draw on
          1. Creating a canvas in the browser's viewport
          2. Creating an object in an element (recommended)
        2. Step 2 – Drawing the circle
          1. The attr() method
      4. Top features you need to know about
        1. Creating a Raphael element
          1. Basic shape
            1. Rectangle
            2. Rounded rectangle
            3. Ellipse
          2. Complex shapes
        2. Extracting and using paths from an editor
          1. Vector graphics editors
            1. Step 1 – Creating the shape in the vector editor
            2. Step 2 – Saving the shape as SVG
            3. Step 3 – Copying the SVG path string
            4. Step 4 – Using the copied path as a Raphael path string
          2. Creating text
        3. Manipulating the style of the element
        4. Transforming an element
          1. Manipulating a shape
        5. Animating a shape
        6. Animating transformations
        7. Adding events to Raphael elements
          1. Click event
          2. Mouseover event
        8. Methods you'll want to know and use
          1. Element methods
            1. animate()
            2. attr()
            3. click()
            4. dblclick()
            5. mousedown()
            6. mouseup()
            7. mousemove()
            8. mouseover()
            9. mouseout()
            10. clone()
            11. data()
            12. removedata()
            13. getBBox()
            14. getPointAtLength()
            15. toFront()
            16. toBack()
            17. hide()
            18. show()
            19. transform()
            20. remove()
          2. Paper methods
            1. paper.circle()
            2. paper.ellipse()
            3. paper.rect()
            4. paper.clear()
            5. paper.image()
            6. paper.setSize()
            7. paper.set()
          3. Set methods
            1. set.clear()
            2. set.exclude()
            3. set.forEach()
            4. set.pop()
            5. set.splice()
      5. People and places you should get to know
        1. Official sites
        2. Articles and tutorials
        3. Community
        4. Blogs
        5. Twitter
      6. Summary