Качаем последнюю версию библиотеки с официального сайта. Там же, доступна вся необходимая документация. Для работы нужен всего один файл. Подключим его к странице
<script type="text/javascript" src="/scripts/raphael-min.js"></script>
После чего доступен объект Raphael. С помощью него создается холст, на котором и будем рисовать. Еще нам понадобится блок, из которого и будем делать холст.
<div id="drawer" style="width:auto; height:500px;"></div>
И JavaScript, который сделает из этого блока Canvas холст
var paper = Raphael(document.getElementById('drawer'), document.getElementById('drawer').offsetWidth, document.getElementById('drawer').offsetHeight);
Далее, все манипуляции производятся с использованием переменной paper. Нарисуем круг на холсте
paper.circle(100,200,50);
Где 100 и 200 это относительные пиксельные координаты внутри холста, а 50 это радиус круга. Тоже в пикселах.
В библиотеке уже есть ряд примитивов: circle, rect, text, ellipse.
Задача была создать редактор, поэтому круг должен создаваться там, где пользователь ткнул мышкой. Сделать это очень просто. Я использую jQuery (куда у без нее), но можно обойтись и самим Raphaël.
$('#drawer').click(function( event ){
paper.rect(event.offsetX, event.offsetY, 50, 25);
});
при клике на холсте, будет создан прямоугольник с шириной 50 и высотой 5 пиксел.
Удалять элемент с пано нужно при помощи метода remove
var object = paper.text(event.offsetX, event.offsetY, 'Text');
object.attr('font-size',60);
object.attr('text','hello world');
//...
object.remove(); // удаляем когда элемент больше не нужен
Так как редактор у нас продвинутый, то все элементы можно перетаскивать при помощи мыши. Это реализуется при помощи метода drag
var r = paper.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}),
g = paper.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5});
var start = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.animate({r: 70, opacity: .25}, 500, ">");
},
move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
this.animate({r: 50, opacity: .5}, 500, ">");
};
paper.set(r, g).drag(move, start, up);
после такого примера в эту библиотеку влюбляешься окончательно и бесповоротно. Теперь рисовать прямо в браузере это очень просто, подключил библиотеку и готово.
И на закуску, сделаем то, чего нет в стандартных примерах из документации - обычный треугольник.
var path = paper.path(),
pathParts = pth.attr('path');
pathParts.push(['M',event.offsetX,event.offsetY-25]);
pathParts.push(['L',event.offsetX+25,event.offsetY+25]);
pathParts.push(['L',event.offsetX-25,event.offsetY+25]);
pathParts.push(['z']);
pth.attr('path', pathParts);
буквы на M,L и z не случайны. M - moveto, L- lineto, z - closepath. Т.е. программирование сродни программе Черепашка, ставим перо в некое положение при помощи параметра M, затем рисуем линию L, и замыкаем фигуру через z. Если не сделать последнюю операцию, не замкнуть фигуру, то получится линия.
Возможности объектов Raphael легко расширяются, с помощью системы похожей на jQuery, только гораздо проще.
Raphael.el.addPart = function (point) {
var pathParts = this.attr('path');
pathParts.push(point);
this.attr('path', pathParts);
return this;
};
Тогда пример выше, можно будет написать чуть проще
var pth = paper.path() .addPart(['M',event.offsetX,event.offsetY-25]); .addPart(['L',event.offsetX+25,event.offsetY+25]); .addPart(['L',event.offsetX-25,event.offsetY+25]); .addPart(['z']);
Как видите все довольно просто.
Пусть это был короткий пост, но информация из него была добыта из разных источников и будет полезна для начального ознакомления. Желаю вам и вашим проектам успехов. До новых встреч.
