Давно уж хотел написать нечто подобное, потому как штатных средств для анимации и отлова событий у элемента HTML5 Canvas не предусмотрено.
Сразу предупреждаю - проект очень сырой, написан за два вечера на коленке.
Итак представляю вашему вниманию фреймворк (как звучит-то
) 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
Посмотреть исходник с простенькой демонстрашкой можно
тут. С красотами не заморачивался, нарисовал пару примитивов чтоб что-то мельтешило, фигурки можно таскать мышкой.
Программированием занимаюсь менее года, поэтому сильно не пинать. А вообще рад буду выслушать конструктивную критику и рекомендации.
