VPF::отрисовка прямоугольника - Форум программистов

VanHelsing

Дата 12.3.2013, 13:03 (ссылка)

(нет голосов)

Загрузка ...

ХОЧУ ВСЕ ЗНАТЬ!!!

Награды: 1

Профиль
Группа: Участник
Сообщений: 288
Регистрация: 3.1.2008
Где: Екатеринбург

Репутация: нет
Всего: 6

Здравствуйте. Есть необходимость создать небольшой графический редактор на 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)
{   
    Rectangle.x1 = evnt.clientX;
    Rectangle.y1 = evnt.clientY;
    
    Canva.ctx.strokeRect(Rectangle.x, Rectangle.y,Rectangle.x1 - Rectangle.x, Rectangle.y1 - Rectangle.y);
};

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

--------------------

Мой блог.
Specialist

Aliance

Дата 12.3.2013, 13:18 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Гугл говорит, что это тебе поможет:

Код


ctx.clearRect(0, 0, canvas.width, canvas.height);

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

VanHelsing

Дата 12.3.2013, 14:01 (ссылка)

(нет голосов)

Загрузка ...

ХОЧУ ВСЕ ЗНАТЬ!!!

Награды: 1

Профиль
Группа: Участник
Сообщений: 288
Регистрация: 3.1.2008
Где: Екатеринбург

Репутация: нет
Всего: 6

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

Код


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;    
};

--------------------

Мой блог.
Specialist

Aliance

Дата 12.3.2013, 14:57 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Что-то мне подсказывает, что первые два параметра должны всегда быть нулями, а 3 и 4 должны равняться ширине и высоте всего канваса.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

VanHelsing

Дата 12.3.2013, 19:39 (ссылка)

(нет голосов)

Загрузка ...

ХОЧУ ВСЕ ЗНАТЬ!!!

Награды: 1

Профиль
Группа: Участник
Сообщений: 288
Регистрация: 3.1.2008
Где: Екатеринбург

Репутация: нет
Всего: 6

Этот метод будет работать если мы будем рисовать только один прямоугольник, но в этот момент на canvas могут быть нарисованы другие фигуры. При таком подходе будет все очищаться.

--------------------

Мой блог.
Specialist

skyboy

Дата 13.3.2013, 02:15 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 3
Всего: 260

ну, дык, алгоритмическое решение должно быть, а не магическая функция "сделать как надо".
вариант 1: два канваса. верхний, который и перехватывает движение мыши — чисто для отрисовки прямоугольника в процессе создания. очищать можно весь канвас целиком. после отпускания кнопки прямоугольник рисуется "навечно" на нижнем канвасе.
вариант 2: каждая фигура — отдельный объект. после очистки канваса на любой чих, пробегаешься по списку всех таких объектов и отрисовываешь их.
вариант 2 медленнее, но проще реализовать выбор существующей фигуры и измение её.
вариант 1 быстрый, но не универсальный.

VanHelsing

Дата 13.3.2013, 12:55 (ссылка)

(нет голосов)

Загрузка ...

ХОЧУ ВСЕ ЗНАТЬ!!!

Награды: 1

Профиль
Группа: Участник
Сообщений: 288
Регистрация: 3.1.2008
Где: Екатеринбург

Репутация: нет
Всего: 6

Я решил попробовать и расположил 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 не вставляется.

--------------------

Мой блог.
Specialist

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »