На днях довелось мне делать один весьма интересный проект. Нужно было сделать онлайн графический редактор. Он должен был уметь рисовать графические примитивы: круги, прямоугольники, линии между ними и полигоны. Кроме того содержимое должно было легко экспортироваться в png. Долго тему рисования изучать не стал. Инструментов в сети предостаточно. Давно слышал про такую библиотеку как Raphaël, и все не было повода познакомится с ней поближе. Повод появился и я приступил. Далее приведу лишь несколько примеров и принцип работы.
Качаем последнюю версию библиотеки с официального сайта. Там же, доступна вся необходимая документация. Для работы нужен всего один файл. Подключим его к странице
< 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' ]); |
Как видите все довольно просто.
Пусть это был короткий пост, но информация из него была добыта из разных источников и будет полезна для начального ознакомления. Желаю вам и вашим проектам успехов. До новых встреч.