Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.03.2013, 20:45
Интересующийся
Отправить личное сообщение для prizrak39 Посмотреть профиль Найти все сообщения от prizrak39
 
Регистрация: 19.11.2012
Сообщений: 12

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

Также если возможно хотелось бы узнать как более правильно организовать такой редактор и какие ошибки есть в приведенном коде.
Ответить с цитированием
  #2 (permalink)  
Старый 12.03.2013, 21:26
Интересующийся
Отправить личное сообщение для prizrak39 Посмотреть профиль Найти все сообщения от prizrak39
 
Регистрация: 19.11.2012
Сообщений: 12

А можно небольшой пример или ссылку на пример. Не совсем понимаю как расположить 2 canvas один над другим и как определять на каком рисуешь?
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2013, 08:22
Интересующийся
Отправить личное сообщение для prizrak39 Посмотреть профиль Найти все сообщения от prizrak39
 
Регистрация: 19.11.2012
Сообщений: 12

Я решил попробовать и расположил 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 не вставляется.
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2013, 08:25
Интересующийся
Отправить личное сообщение для prizrak39 Посмотреть профиль Найти все сообщения от prizrak39
 
Регистрация: 19.11.2012
Сообщений: 12

Просмотрел данную ошибку спасибо.
Но если я использую такой вариант, по изображение на 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);
        }
    };
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2013, 15:36
Интересующийся
Отправить личное сообщение для prizrak39 Посмотреть профиль Найти все сообщения от prizrak39
 
Регистрация: 19.11.2012
Сообщений: 12

С прорисовкой прямоугольников я разобрался. А вот с линиями не совсем понимаю.
Наверное надо рисовать линию на основной 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);               
        }
    };
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Немного Юмора - Гуртовщики Мыши antonM Оффтопик 12 23.03.2012 20:04
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07
мыши, кнопки, event.button и other browsers, but not in IE idudiq Events/DOM/Window 1 03.10.2009 11:09
Имитация нажатия кнопки мыши Mantell Общие вопросы Javascript 3 19.02.2009 17:03
Как имитировать событие мыши Andrey_V Общие вопросы Javascript 4 10.11.2008 16:39