Принцип

Вся соль заключается в том, что курсором мыши мы проводим диагональ такого круга, а чтобы нарисовать круг такого диаметра, необходимо знать координаты его центра (ну и длину радиуса, разумеется). Так что вся задача сводится к вычислению координат центра (да, и длины радиуса).

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

Код

За «оболочку» рисовалки возьмем объект 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;
};

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

Чем тормознутее браузер — тем больших размеров получаются пузыри.

Добавлено: 17 Августа 2013 02:47:46 Добавил: Андрей Ковальчук Нравится 0

Добавить