SVG/VML Графика и JavaScript
| Документация DHTML | Документация Smarty | SVG/VML Графика и JavaScript
| Документация bash |
Называется она Raphaël
Примеры работы:
Что такое Raphael?
Raphael – Это маленькая JavaScript библиотека, которая упрощает работу с графикой в вэбе, при помощи JavaScript. Допустим вы хотите создать свою специфическую диаграмму, или небольшой виджет, позволяющий обрезать или вращать картинку – вы все это можете с легкостью сделать при помощи этой библиотеки.Raphaël использует SVG и VML как основу для создания графики. Так как каждый созданный объект является объектом DOM, вы можете модифицировать элементы при помощи JavaScript, и использовать обработчики событий JavaScript для каждого элемента. Цель библиотеки Raphaël – позволять легко и кросс-браузерно создавать графику.
В настоящий момент библиотека поддерживает браузеры Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.
Как использовать Raphael?
Просто скачайте и подгрузите на страницу скрипт raphael.js, далее просто используйте ее:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");
Описание методов
Каждый метод возвращает объект-обертку для SVG/VML элемента - массив Element, для последующего доступа к этому элементу посредством JavaScript.Raphael
Метод создает холст для будущего рисования на немПараметры
1. Контейнер HTMLElement или строка
2. width number
3. height number
ИЛИ
1. x number
2. y number
3. width number
4. height number
Использование
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var paper = Raphael(document.getElementById("notepad"), 320, 200);
var paper = Raphael("notepad", 320, 200);
Element[0]
Является ссылкой для DOM объект, что дает возможность определять для него обработчики событий и получать/изменять свойства объектаИспользование
var c = paper.circle(10, 10, 10);
c[0].onclick = function () { c.attr("fill", "red"); };
Element.rotate
Поворачивает объект на заданный угол относительно центраПараметры
degree number
Использование
var c = paper.circle(10, 10, 10); c.rotate(45);
Element.translate
Перемещает объект по холстуПараметры
dx number
dy number
Использование
var c = paper.circle(10, 10, 10); c.translate(10, 10);
Element.matrix
Позволяет трансформировать объект путем наложение матрицы на свойства объекта (матричное преобразование)Параметры
xx number
xy number
yx number
yy number
dx number
dy number
Использование
var c = paper.circle(10, 10, 10); // reflects circle down c.matrix(1, 0, 0, -1, 0, 0);
Element.scale
Увеличивает объект в заданное количество раз (по ширине и высоте отдельно). Если коэффициенты увеличения меньше 1, то происходит уменьшение объектаПараметры
Xtimes number
Ytimes number
Использование
var c = paper.circle(10, 10, 10); c.scale(1.5, 1.5);
Element.attr
Устанавливает атрибуты элементаПараметры
params object
ИЛИ
attribute string
value string
Возможные Параметры
cx
cy
dasharray
fill-opacity
fill
font-family
font-size
font-weight
font
gradient
height
joinstyle
opacity
r
rx
ry
stroke-opacity
stroke-width
stroke
width
x
y
Использование
var c = paper.circle(10, 10, 10);
c.attr("fill", "black");
c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});
Element.getBBox
Возвращает размеры элементаПараметры
n/a
Использование
var c = paper.circle(10, 10, 10); var width = c.getBBox().width;
Element.toFront
Передвигает слой, в котором находится элемент, на первую позицию (используется для исключения перекрытия объекта другим объектом)Параметры
n/a
Использование
var c = paper.circle(10, 10, 10); c.toFront();
circle
Создает объект круг (рисует круг)Параметры
x number
y number
r number
Использование
var c = paper.circle(10, 10, 10);
rect
Создает прямоугольникПараметры
x number
y number
width number
height number
r number [optional]
Использование
// regular rectangle var c = paper.rect(10, 10, 10, 10); // rounded rectangle var c = paper.rect(10, 10, 100, 50, 10);
ellipse
Создает эллипс.Параметры
x number
y number
rx number
ry number
Использование
var c = paper.ellipse(100, 100, 30, 40);
path
Инициализирует рисование ломаной линии (пути, или мультилинии). По умолчанию возвращает пустой объект ломаной линии. Для рисования ломаной используйте встроенные методы объекта, такие как lineTo и curveTo.Параметры
params object Похож на объект для метода attr
pathString string [optional] – Путь в формате SVG. Воспользуйтесь документацией SVG.
Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
absolutely
Устанавливает флаг позиционирования всех следующих объектов абсолютно, т.е. каждый в отдельном слое, пока не будет сказано обратное – при помощи relatively. (Sets trigger to count all following units as absolute ones, unless said otherwise)[По умолчанию установлен]
Использование
var c = paper.path({stroke: "#036"}).absolutely()
.moveTo(10, 10).lineTo(50, 50);
relatively
Устанавливает флаг позиционирования всех следующих объектов относительно, т.е. каждый следующий объект в том же слое, пока не будет сказано обратное – при помощи absolutely. (Sets trigger to count all following units as relative ones, unless said otherwise)Использование
var c = paper.path({stroke: "#036"}).relatively()
.moveTo(10, 10).lineTo(50, 50);
redraw
Перерисовывает мультилинию. Следует использовать когда точки(вершины) были изменены. Это возможно потеем доступа к свойствам объекта path (мультилинии)Использование
c.path[3].arg[2] = 20; c.redraw();
moveTo
Переносит перо в указанные координатыПараметры
x number
y number
Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
lineTo
Рисует линию с точки нахождения пера в указанные координатыПараметры
x number
y number
Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
cplineTo
Рисует линию с точки нахождения пера до указанных координат. Линия будет иметь горизонтальные привязки на старте и окончании.Параметры
x number
y number
width number
Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);
curveTo
Рисует кривую от точки нахождения пера до указанных координат.Параметры
x1 number
y1 number
x2 number
y2 number
x3 number
y3 number
Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10)
.curveTo(10, 15, 45, 45, 50, 50);
addRoundedCorner
Рисует четверть круга с текущей точки нахождения пера. Используется для рисования закругленных краевПараметры
r number
dir string – Направление (2 буквы)
Возможные значения для dir:
lu - left up
ld - left down
ru - right up
rd - right down
ur - up right
ul - up left
dr - down right
dl - down left
Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10)
.addRoundedCorner(10, "rd");
andClose
Закрывает мультилинию.Использование
var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();
image
Вставляет картинку в SVG/VML областьПараметры
src string
x number
y number
width number
height number
Использование
var c = paper.image("apple.png", 10, 10, 100, 100);
group
Создает группу. Может быть полезным, если вы хотите сгруппировать объекты в слоях, итд.Использование
var c = paper.group();