HTML5: Рисовалка на JavaScript Canvas. Пузырьки

circlepencil

Не так давно в посте «HTML5: Рисовалка на JavaScript Canvas. Основы.» я показал, как сделать простенькую рисовалку на JavaScript Canvas. Эта рисовалка легко расширяется, я уже написал несколько инструментов для нее. Сегодня хочу поведать про один из таких инструментов — кисть, которую я назвал пузырчатой. Вот здесь ее можно посмотреть в действии.

Принцип
Если рисунок обычной кисти (см. предыдущий пост) — последовательность линий между срабатываниями события onmousemove, то «пузырчатая кисть» — это аналогичная последовательность кругов. Вся соль заключается в том, что курсором мыши мы проводим диагональ такого круга, а чтобы нарисовать круг такого диаметра, необходимо знать координаты его центра (ну и длину радиуса, разумеется). Так что вся задача сводится к вычислению координат центра (да, и длины радиуса).

Кстати, на картинке вы можете видеть лишь окружности, а я тут говорю о кругах. Я не ошибаюсь. Просто для того, чтобы контуры не накладывались друг на друга, стоит сделать предварительную заливку белым в границах окружности, а лишь затем рисовать контуры.

Код
За «оболочку» рисовалки возьмем объект Canva (см. код и описание здесь). В свойстве tool нужно будет указать инструмент CirclePencil. А вот реализация этого инструмента:

var CirclePencil = {};

// нажимается кнопка мыши, начинается рисование
CirclePencil.start = function(evnt)
{
Canva.ctx.strokeStyle = Canva.selectedColor;
Canva.ctx.fillStyle = Canva.selectedFillColor;
Canva.ctx.lineWidth = 1;

// начальные координаты
CirclePencil.startX = evnt.clientX;
CirclePencil.startY = evnt.clientY;

// конечные координаты
CirclePencil.finishX = evnt.clientX;
CirclePencil.finishY = evnt.clientY;

Canva.drawing = true;
};

// кнопка мыши отпущена, заканчиваем рисование
CirclePencil.finish = function(evnt)
{
Canva.drawing = false;
};

// движение мыши с зажатой кнопкой
CirclePencil.move = function(evnt)
{
// получаем конечные координаты диаметра
CirclePencil.finishX = evnt.clientX;
CirclePencil.finishY = evnt.clientY;

// вычисляем координаты центра
var centerX = CirclePencil.startX + parseInt((CirclePencil.finishX — CirclePencil.startX) / 2);
var centerY = CirclePencil.startY + parseInt((CirclePencil.finishY — CirclePencil.startY) / 2);

// вычисляем радиус: R^2 = (x — a)^2 + (y — b)^2, где (a, b) — центр
var radius = parseInt(Math.sqrt((CirclePencil.startX — centerX) * (CirclePencil.startX — centerX) + (CirclePencil.startY — centerY) * (CirclePencil.startY — centerY)));

Canva.ctx.beginPath();
Canva.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
Canva.ctx.fill(); // заливаем круг белым
Canva.ctx.stroke(); // прорисовываем контуры черным

// новый пузырь начнется точке, где закончился старый
CirclePencil.startX = evnt.clientX;
CirclePencil.startY = evnt.clientY;
};

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

Читайте так же:
Оставить комментарий

Последние публикации