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