Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2016, 00:26
Новичок на форуме
Отправить личное сообщение для vaddd Посмотреть профиль Найти все сообщения от vaddd
 
Регистрация: 25.02.2016
Сообщений: 3

Удаление линии с Canvas
Есть <canvas> элемент и задание сделать рисовалку к нему.

Нужны следущие функции:

- Рисование линий, юзер кликает левой кнопокой мышки по координате на канвасе, программа запоминает ее, юзер передвигает мышку и отпускает левую кнопку, программа рисует линию точка А -> точка Б. (это я разобрался)
- Во время рисования, программа должна отображать временную линию, которая бегает за курсором, типа как в пэинте, как только юзер отпускает кнопку, линия становится постоянной.

Я сделал следущее:

3 ивентлистенера к канвасу (mousedown/mousemove/mouseup)

mousedovn listener
делает следущее:
Код:
1) вычисляет координаты начала линии (работает успешно)
2) сохраняет их в глобальную переменную
3) дает значение переменной а true, переменная нужна обработчику события mousemove
mouseup listener
делает следущее:
Код:
1) вычисляет координаты точки где юзер отпустил кнопку мышки
2) рисует линию
3) значение переменной a ставит обратно false
mousemove listener
содержит большое условие (если а = true) то выполняется весь код, если a = false (ранее не было инициированно рисование линии) то не делает ничего
ну и соответственно тоже рисует линию до текущей позиции указателя от начала

Все работает, но линии вспомогательные конечно же не исчезают
если перед отрисовкой в mousemove добавить context.canvas.width = context.canvas.width, то, разумеется, программа работает как и должно в задании, но дает нарисовать только одну линию

Хотелось бы получить совет как исправить ситуацию, не готовый код, а просто совет в каком направлении думать
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2016, 00:43
Новичок на форуме
Отправить личное сообщение для vaddd Посмотреть профиль Найти все сообщения от vaddd
 
Регистрация: 25.02.2016
Сообщений: 3

Перерисовка, получается, тоже отпадает, т.к объектов слишком много для запоминания. И по нагрузке на CPU соответствено перебор.
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2016, 03:11
Новичок на форуме
Отправить личное сообщение для vaddd Посмотреть профиль Найти все сообщения от vaddd
 
Регистрация: 25.02.2016
Сообщений: 3

проблема решилась созданием двух канвасов, наложенных друг на друга - один для интерфейса (вспомогательная линия), второй - для рисунка
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Рисование линии на CANVAS essere Элементы интерфейса 16 31.07.2013 18:17
canvas - нарисовать линии Valentinka_1 Общие вопросы Javascript 1 09.05.2013 21:51
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16