RaphaelA framework to create SVG graphics

Learning & Developmenthttp://academy.telerik.com

Telerik Software Academy

Table of Contents Raphael

Overview and setup

Raphael features Creating shapes

Setting attributes

Animations

RaphaelOverview and setup

Raphael Raphael is a JavaScript framework for working with SVG shapes Dynamically, with JavaScript

Setting up Raphael:

1. Download the script from the site

2. Include the script into the HTML page:

3. Instantiate Raphael object:

4. Ready to go

<script src='scripts/raphael-min.js'></script>

var paper = Raphael(10, 10, 500, 500);

Raphael SetupLive Demo

Raphael Shapes

Raphael Shapes

Raphael has all the basic shapes: Rect:var rect = paper.rect(x, y, width, height);

Circle:var circle = paper.circle(cx, cy, radius);

Path:var path = paper.path(points);

Raphael ShapesLive Demo

Shape Properties

Shape Properties

Shapes created with Raphael have settable properties To change fill color, stroke, etc…

var rect = paper.rect(50, 90, 180, 80);rect.attr({ fill: 'purple', stroke: 'blue', 'stroke-width': 10}).rotate(25, 170, 140);

Shape Properties

Shapes created with Raphael have settable properties To change fill color, stroke, etc…

var rect = paper.rect(50, 90, 180, 80);rect.attr({ fill: 'purple', stroke: 'blue', 'stroke-width': 10}).rotate(25, 170, 140);

The attr()

methods

gets an object

Shape Properties

Shapes created with Raphael have settable properties To change fill color, stroke, etc…

var rect = paper.rect(50, 90, 180, 80);rect.attr({ fill: 'purple', stroke: 'blue', 'stroke-width': 10}).rotate(25, 170, 140);

The attr()

methods

gets an objectMethod calls

can be

chained

Shape PropertiesLive Demo

Raphael SetsGrouping elements together

Raphael Sets Sets in Raphael allow to change the attributes of a group of elements at once The shapes can be of any type:

Rects

Circles

Text

Images

Raphael Sets: Example Change the attr of a group of

elements at once1. Start a set with setStart()paper.setStart();

Raphael Sets: Example Change the attr of a group of

elements at once1. Start a set with setStart()

paper.setStart();paper.circle(75, 85, 75);paper.rect(160, 85, 75, 45);paper.text(10, 200, 'This is the text');

paper.setStart();

2. Add the shapes

Raphael Sets: Example Change the attr of a group of

elements at once1. Start a set with setStart()

paper.setStart();paper.circle(75, 85, 75);paper.rect(160, 85, 75, 45);paper.text(10, 200, 'This is the text');

paper.setStart();

2. Add the shapes

var set = setFinish();

3. Finish the set and save it in variable

Raphael Sets: Example Change the attr of a group of

elements at once1. Start a set with setStart()

paper.setStart();paper.circle(75, 85, 75);paper.rect(160, 85, 75, 45);paper.text(10, 200, 'This is the text');

paper.setStart();

2. Add the shapes

var set = setFinish();

3. Finish the set and save it in variable

set.attr({ … });

4. Set properties

Raphael SetsLive Demo

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезания

ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGap

free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?

Raphael for SVG

http://academy.telerik.com

Homework1. Create the following images using

Raphael:

2. Create a spiral with Raphael

*Hint: use many circles with radius 1px