Здравствуйте. Есть необходимость создать небольшой графический редактор на JavaScript. Нашел пример кода для рисования линии. Дописал рисование прямоугольника, но не знаю как сделать чтобы при движении мыши "старый" прямоугольник удалялся, а отрисовывался только текущий?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="draw.js"></script>
<script type="text/javascript">
onload = function() {
document.getElementById('line').onclick = function(event) {
//Линия
Canva.init('my_canvas', 800, 500, Pencil);
}
document.getElementById('rect').onclick = function(event) {
//Прямоугольник
Canva.init('my_canvas', 800, 500, Rectangle);
}
var clear = document.getElementById('clear');
clear.onclick = function(event) {
Canva.clear(800, 500);
}
};
</script>
</head>
<body>
<canvas id="my_canvas" width="800" height="500"></canvas>
<div id="panelDraw">
<input type="button" id="clear" value="Очистить">
<input type="button" id="line" value="Линия">
<input type="button" id="rect" value="Прямоугольник">
<input type="button" id="circle" value="Окружность">
</div>
</body>
</html>
/*
* Рисоание на "холсте"
*/
function ie_event(e)
{
if (e === undefined)
{ return window.event; };
return e;
}
//Объект - CANVAS
var Canva = {};
// Инициализация объекта
Canva.init = function(id, width, height, tools)
{
var canv = document.getElementById(id);
canv.width = width;
canv.height = height;
this.canvasId = id;
this.ctx = canv.getContext("2d");
// Свойства
this.selectedColor = '#000000';
this.selectedFillColor = '#FFFFFF';
this.selectedWidth = 1;
this.tool = tools; // Выбранный инструмент
this.drawing = false; // true - если зажата кнопка мыши
// Кнопка мыши зажата, рисуем
canv.onmousedown = function(e)
{
var evnt = ie_event(e);
Canva.tool.start(evnt);
};
// Кнопка мыши отпущена, рисование прекращаем
canv.onmouseup = function(e)
{
if (Canva.drawing)
{
var evnt = ie_event(e);
Canva.tool.finish(evnt);
}
};
// процесс рисования
canv.onmousemove = function(e)
{
if (Canva.drawing)
{
var evnt = ie_event(e);
Canva.tool.move(evnt);
}
};
};
Canva.setTool = function(t) // Задать инструмент
{
Canva.tool = t;
};
Canva.setWidth = function(width) // Задать толщину линий
{
Canvas.selectedWidth = width;
};
Canva.setColor = function(color) // Задать текущий цвет
{
Canva.selectedColor = color;
};
Canva.clear = function(width, height) // Очистить рисовалку
{
var canv = document.getElementById(Canva.canvasId);
Canva.ctx.clearRect(0, 0, width, height);
};
//------------------------------------------------------------------
var Pencil = {};
// Начинаем рисование
Pencil.start = function(evnt)
{
// Текущее положение мыши - начальные координаты
Pencil.x = evnt.clientX;
Pencil.y = evnt.clientY;
Canva.ctx.beginPath();
// Свойства рисования
Canva.ctx.strokeStyle = Canva.selectedColor;
Canva.ctx.lineWidth = Canva.selectedWidth;
Canva.ctx.moveTo(Pencil.x, Pencil.y); // Курсор на начальную позицию
Canva.drawing = true; // Начато рисование
};
// Рисование закончили
Pencil.finish = function(evnt)
{
Pencil.x = evnt.clientX;
Pencil.y = evnt.clientY;
Canva.ctx.lineTo(Pencil.x, Pencil.y); // Дорисовываем последнюю линию
Canva.drawing = false;
};
// Рисование в разгаре
Pencil.move = function(evnt)
{
Pencil.x = evnt.clientX;
Pencil.y = evnt.clientY;
Canva.ctx.lineTo(Pencil.x, Pencil.y); // Дорисовываем начатую линию
Canva.ctx.stroke();
// Начинаем рисованть новую линию из той же точки.
Canva.ctx.moveTo(Pencil.x, Pencil.y);
};
//-----------------------------------------------------------------
var Rectangle = {};
// Начинаем рисование
Rectangle.start = function(evnt)
{
// Текущее положение мыши - начальные координаты
Rectangle.x = evnt.clientX;
Rectangle.y = evnt.clientY;
//Canva.ctx.strokeRect(Rectangle.x, Rectangle.y,Rectangle.x, Rectangle.y);
Canva.drawing = true; // Начато рисование
};
// Рисование закончили
Rectangle.finish = function(evnt)
{
Rectangle.x1 = evnt.clientX;
Rectangle.y1 = evnt.clientY;
Canva.ctx.strokeRect(Rectangle.x, Rectangle.y,Rectangle.x1 - Rectangle.x, Rectangle.y1 - Rectangle.y);
Canva.drawing = false;
};
Rectangle.move = function(evnt)
{
Canva.ctx.clearRect(Rectangle.x, Rectangle.y,Rectangle.x2 - Rectangle.x, Rectangle.y2 - Rectangle.y);
Rectangle.x1 = evnt.clientX;
Rectangle.y1 = evnt.clientY;
Canva.ctx.strokeRect(Rectangle.x, Rectangle.y,Rectangle.x1 - Rectangle.x, Rectangle.y1 - Rectangle.y);
Rectangle.x2 = evnt.clientX;
Rectangle.y2 = evnt.clientY;
};
Также если возможно хотелось бы узнать как более правильно организовать такой редактор и какие ошибки есть в приведенном коде.
