ExtCanvas - небольшой фреймворк
 

Давно уж хотел написать нечто подобное, потому как штатных средств для анимации и отлова событий у элемента HTML5 Canvas не предусмотрено.

Сразу предупреждаю - проект очень сырой, написан за два вечера на коленке.

Итак представляю вашему вниманию фреймворк (как звучит-то :D ) ExtCanvas, от словосочетания Extended Canvas.

Что он умеет:

• работать с фигурами как с объектами;
• анимировать любые числовые параметры фигур, такие как координаты, размеры и т. п. (анимация CSS-цветов в разработке);
• изменять параметры фигур без анимации;
• обрабатывать события мыши для каждой фигуры в отдельности.

Что он не умеет:

• обработчик событий не работает если фигура была нарисована не способом "beginPath - рисуем - closePath" (надеюсь в будущих выпусках спецификации это исправят).

Фреймворк работает полностью автономно, то есть не нужно никаких дополнительных библиотек, что в сумме с очень маленьким размером (14 кб в несжатом виде) делает его загрузку моментальной.

Инициализируется вот так:

var canvas = document.getElementById('canvasId');
var extcanvas = new ExtCanvas(canvas);

В качестве аргумента конструктору можно передавать элемент, контекст или просто ID элемента (хотя в идеале я хочу сделать выбор по CSS селектору как в jQuery), инициализация нативная.

Рисуются фигуры вот так:

var circle = extcanvas.addShape(function(x, y, radius) {

  // Эта функция выполняется в контексте CanvasRenderingContext2D, поэтому можно использовать this для рисования
  this.beginPath();
  this.arc(x, y, radius, 0, Math.PI * 2, false);
  this.closePath();

  this.fillStyle = '#F00';
  this.fill();

}, {

  // Эти параметры будут переданы как аргументы в предыдущую функцию
  // Если параметр не задекларирован здесь, то он не сможет принимать участие в анимации
  x: 100,
  y: 100,
  radius: 50

});

Для того чтобы изменить один или несколько параметров нужно написать:

circle.set({

  x: 150,
  y: 150

});

После этого окружность поменяет свои координаты. Те параметры, которые не были указаны, останутся без изменений.

Для того чтобы создать анимацию, например, плавного увеличения окружности в течение 500 мс, пишем вот так:

circle.animate({

  radius: 75

}, 500, function() {

  // Здесь можно написать функцию обратного вызова

});

Устанавливать обработчики событий можно двумя способами - аля jQuery и в стиле стандартного addEventListener:

circle.hover(function() {

  alert('Навели мышку.');

}, function() {

  alert('Отвели мышку.');

});

circle.addEventListener('mouseclick', function(event) {

  // Переменная event содержит в себе текущие координаты курсора, на каком объекте он расположен и т. п.
  alert('Клацнули мышкой');

});

Обработчики суммируются, то есть будут выполняться в порядке их установления (нужно будет, кстати, сделать возможность удаления обработчиков).

Сейчас фреймворк обрабатывает такие события:

• mousemove
• mouseover
• mouseout
• mousedown
• mouseup
• mouseclick

Посмотреть исходник с простенькой демонстрашкой можно тут. С красотами не заморачивался, нарисовал пару примитивов чтоб что-то мельтешило, фигурки можно таскать мышкой.

Программированием занимаюсь менее года, поэтому сильно не пинать. А вообще рад буду выслушать конструктивную критику и рекомендации.

И тишина... :(

книга по канве . издательство орели-600 страниц. комментарии излишни. сделай с учётом всего-тогда обсудим. а сейчас нет смысла...

А как она точно называется?

Автор: Steve Fulton, Jeff Fulton
Название: HTML5 Canvas
Издательство: O'Reilly
Год: 2011

http://mirknig.com/knigi/web/1181403...l5-canvas.html

А почему решили писать свой фрэймворк, ведь есть jCanvaScript и libCanvas, например?

jCanvaScript не понравился, к сожалению уже не помню почему, а LibCanvas не ловит события мыши для отдельных фигурок.

Что? О чём вы?

Хм... значит то я так читал. А Вы тот самый Shock? Оо

Код, кстати, на удивление хорош. Конечно, есть некоторые ошибки, кое-где видны не очень хорошие знания JavaScript, но в общем - код на редкость качественный

Например:

this.setListener = function(type, listener) {

	switch (type) {
		case 'mouseover':
			this.mouseover.set(listener);
			break;

		case 'mouseout':
			this.mouseout.set(listener);
			break;

		case 'mousemove':
			this.mousemove.set(listener);
			break;

		case 'mousedown':
			this.mousedown.set(listener);
			break;

		case 'mouseup':
			this.mouseup.set(listener);
			break;

		case 'mouseclick':
			this.mouseclick.set(listener);
			break;
	}
}

Вполне можно заменить на:

this.setListener = function(type, listener) {

	if ( ['mouseover', 'mouseout', 'mousemove', 'mousedown', 'mouseup', 'mouseclick'].indexOf(type) === -1 ) return;

	this[type].set(listener);
}