Instant RaphaelJS Starter电子书

Instant RaphaelJS Starter

Instant RaphaelJS Starter

Credits

About the Author

About the Reviewer

www.packtpub.com

Support files, eBooks, discount offers and more

packtLib.packtpub.com

Why Subscribe?

Free Access for Packt account holders

1. Instant RaphaelJS Starter

So, what is RaphaelJS?

Two-headed and three-lettered

The marriage of two problems and the birth of RaphaelJS

JavaScript – the binder of oddities

Browser support

What is RaphaelJS and what is not RaphaelJS?

A little about vector and raster graphics

RaphaelJS as a vector

The x, y positioning that RaphaelJS uses

Installation

Step 1 – What do I need?

Step 2 – Downloading RaphaelJS

Step 3 – Adding it to the HTML

And that's it!

Quick start – creating your first shape

Step 1 – Creating a canvas to draw on

Creating a canvas in the browser's viewport

Creating an object in an element (recommended)

Step 2 – Drawing the circle

The attr() method

Top features you need to know about

Creating a Raphael element

Basic shape

Rectangle

Rounded rectangle

Ellipse

Complex shapes

Extracting and using paths from an editor

Vector graphics editors

Step 1 – Creating the shape in the vector editor

Step 2 – Saving the shape as SVG

Step 3 – Copying the SVG path string

Step 4 – Using the copied path as a Raphael path string

Creating text

Manipulating the style of the element

Transforming an element

Manipulating a shape

Animating a shape

Animating transformations

Adding events to Raphael elements

Click event

Mouseover event

Methods you'll want to know and use

Element methods

animate()

attr()

click()

dblclick()

mousedown()

mouseup()

mousemove()

mouseover()

mouseout()

clone()

data()

removedata()

getBBox()

getPointAtLength()

toFront()

toBack()

hide()

show()

transform()

remove()

Paper methods

paper.circle()

paper.ellipse()

paper.rect()

paper.clear()

paper.image()

paper.setSize()

paper.set()

Set methods

set.clear()

set.exclude()

set.forEach()

set.pop()

set.splice()

People and places you should get to know

Official sites

Articles and tutorials

Community

Blogs

Twitter

Summary