Рисования в JavaScript при  помощи RaphaelНа днях довелось мне делать один весьма интересный проект. Нужно было сделать онлайн графический редактор. Он должен был уметь рисовать графические примитивы: круги, прямоугольники, линии между ними и полигоны. Кроме того содержимое должно было легко экспортироваться в 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']);

Как видите все довольно просто.

Пусть это был короткий пост, но информация из него была добыта из разных источников и будет полезна для начального ознакомления. Желаю вам и вашим проектам успехов. До новых встреч.  

Оставлять комментарии могут только зарегистрированные пользователи