Graphics

Lonce Wyse

Communication & New Media

lonce.wyse@cnm.nus.sg

Two types of graphics

Raster
- Image stores as array of pixels

Scalable Vector Graphics (SVG)
- image stored as objects
- Instructions for drawing (eg Path)

<path d = "M 0 0  L 100 200" />

SVG scales better

SVG Document Object Model

Objects can be styled, moved, grouped, animated

Objects can be event generators
- listen for "clicks" etc.

Raphael.js

Load it in the html head:

Use it in Javascript:

First create the "paper":

Library:

<script type="text/javascript" src="jslibs/raphael.js"></script>

var paper = new Raphael (...);

Use the paper to create objects (rectangles, circles, paths, text...):

                   // (x,  y,  width, height)
var rect1 = paper.rect(100, 100, 100, 100);
rect1.attr({ fill: '#0F6' });

Attribute object very similar to CSS:

Frequently-used attributes:

Attribute setting:

                   // (x,  y,  width, height)
var rect1 = paper.rect(100, 100, 100, 100);
rect1.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});

cx             number      the x-axis coordinate of the center of the circle, or ellipse
cy             number      the  y-axis coordinate of the center of the circle, or ellipse
fill           string      colour, gradient or image
height         number 
opacity        number 
path           string       SVG path string format
r              number       radius of the circle, ellipse or rounded corner on the rect
stroke         string       stroke colour
width          number 
x              number 
y              number
//--------------------------------------//
fill-opacity   number 
font           string 
font-family    string 
font-size      number       font size in pixels
font-weight    string

Path

Load it in the html head:

Paths are commands and coordinates

SVG:

var path1 = paper.path("m 200,200 l 280,200 l 290,290 z")

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Load images

and more ....

Animate any object attributes
- location, rotation, scale, path, 'easing'

Write text on paths

Create 'sets' for grouping elements together

Determine the "z-index" (whats on top of what when objects overlap)