Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   рисование прямоугольника по движению мыши (https://javascript.ru/forum/events/36345-risovanie-pryamougolnika-po-dvizheniyu-myshi.html)

prizrak39 12.03.2013 20:45

рисование прямоугольника по движению мыши
 
Здравствуйте. Есть необходимость создать небольшой графический редактор на 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;    
};

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

prizrak39 12.03.2013 21:26

А можно небольшой пример или ссылку на пример. Не совсем понимаю как расположить 2 canvas один над другим и как определять на каком рисуешь?

prizrak39 13.03.2013 08:22

Я решил попробовать и расположил 2 canvas в разных местах, для того чтобы просто скопировать изображение с одного на другой.
canv.onmouseup = function(e)
    {
        if (Canva.drawing)
        {
            var evnt = ie_event(e);
            Canva.tool.finish(evnt);
            var img = Canva.ctx.getImageData(0, 0, width, height);
            
            var canv2 = document.getElementById('my_canvas2');
            var ctx2 = canv.getContext("2d");
            ctx2.putImageData(img, 0, 0);
        }
    };

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

prizrak39 14.03.2013 08:25

Просмотрел данную ошибку спасибо.
Но если я использую такой вариант, по изображение на canvas в которую сохраняется изображение всегда стирается и рисуется только текущее изображение.
Можно ли сохранять изображение и только дорисовывать к нему новое?
canv.onmouseup = function(e)
    {
        if (Canva.drawing)
        {
            var evnt = ie_event(e);
            Canva.tool.finish(evnt);
            var img = Canva.ctx.getImageData(0, 0, width, height);
            
            var canv2 = document.getElementById('my_canvas2');
            var ctx2 = canv2.getContext("2d");
            ctx2.putImageData(img, 0, 0);            
            Canva.clear(800,500);
        }
    };

prizrak39 14.03.2013 15:36

С прорисовкой прямоугольников я разобрался. А вот с линиями не совсем понимаю.
Наверное надо рисовать линию на основной canvas после каждого движения мыши. Или я не прав.
canv.onmouseup = function(e)
    {
        if (Canva.drawing)
        {
            var evnt = ie_event(e);
            Canva.tool.finish(evnt);
            
            var img = Canva.ctx.getImageData(x, y, x1, y1);
            
            var canv2 = document.getElementById('my_canvas2');
            var ctx2 = canv2.getContext("2d");
            ctx2.putImageData(img, x, y);            
            Canva.clear(800,500);               
        }
    };


Часовой пояс GMT +3, время: 02:14.