Javascript.RU

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

Тормозит рисовалка на canvas
Прошу помощи! Ситуация следующая: есть довольно простенькая игрушка раскраска изображения, реализованная на canvas. Она работает, но с течением времени, тормоза становятся всё жёстче.

Дело в том, что пользователь красит не цветом, а текстурой, причём текстура размером в само изображение. Я понимаю, что данный подход видимо и создаёт сильную нагрузку на canvas, но для реализации это было необходимо.

Я не очень силён в работе с канвасом. Есть ли способ как-то снизить нагрузку на canvas? Может как-то можно скажем избавляться от нижних слоёв?

Я надеюсь, здесь можно выложить ссылку на пример. Показываю с бесплатного хостинга - access denied

Заранее, благодарю всех оказавших желание помочь.

Последний раз редактировалось fireballpro100, 04.01.2015 в 17:59.
Ответить с цитированием
  #2 (permalink)  
Старый 20.12.2014, 09:54
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

На странице слишком много обработчиков событий 50 000 это очень много и чем дольше работает скрипт тем больше обработчиков добовляется

скорее всего проблема тут в
canvas.addEventListener("click", function(event) .....

Срочно читать документацию по «.addEventListener»
Изображения:
Тип файла: jpg Безымянный.jpg (12.5 Кб, 18 просмотров)

Последний раз редактировалось MallSerg, 20.12.2014 в 10:08.
Ответить с цитированием
  #3 (permalink)  
Старый 22.12.2014, 13:06
Новичок на форуме
Отправить личное сообщение для fireballpro100 Посмотреть профиль Найти все сообщения от fireballpro100
 
Регистрация: 20.12.2014
Сообщений: 9

Спасибо большое, за помощь! Я заметил, что многие ненужные вещи у меня загноны в цикл отрисовки и отрабатывают лишнее разы. Таймер, установленный на сайте отрабатывал 10 раз в секунду, его я замедлил до секунды. Есть вещи которые работают на Jquery, а можно было их сделать на CSS - полагаю, что это тоже немного снизит нагрузку на события. Займусь этим в ближайшее время.

Но само собой, самое узкое место, это вызов функции отрисовки при перемещении мыши. Т.е. оно может вызываться вплодь до 2-3 тыс. раз в секунду и с этим уж, видимо, ничего не поделать, только изменить принцип отрисовки, избавившись от событий на перемещение мыши.
Ответить с цитированием
  #4 (permalink)  
Старый 22.12.2014, 13:22
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

Похоже ты не понял главного
canvas.addEventListener("click", function(event) ...
каждый раз когда вызывается функция addEventListener она добавляет еще один обработчики на это событие
старые уже добавленные обработчики так же остаются и выполняются
т.е. получается ситуация когда на одно движение мышки выполняются
50 000 обработчиков движения мышки вместо одного обработчика.
Ответить с цитированием
  #5 (permalink)  
Старый 22.12.2014, 14:52
Новичок на форуме
Отправить личное сообщение для fireballpro100 Посмотреть профиль Найти все сообщения от fireballpro100
 
Регистрация: 20.12.2014
Сообщений: 9

Т.е. нужно использовать removeEventListener после отработки события?

canvas.addEventListener('click', function(e){
...
canvas.removeEventListener('click', listener, false);
}, false);

Последний раз редактировалось fireballpro100, 22.12.2014 в 15:47.
Ответить с цитированием
  #6 (permalink)  
Старый 22.12.2014, 15:50
Новичок на форуме
Отправить личное сообщение для fireballpro100 Посмотреть профиль Найти все сообщения от fireballpro100
 
Регистрация: 20.12.2014
Сообщений: 9

Хотя, нет. Фаер баг пишет, мол нет такого события. Мда похоже не по тем урокам я учился.

Вообще, тормоза больше не ощущаются совсем. Я просто переделал еще функцию отрисовки. У кого то на этом форуме был хороший пример, я взял его за основу (там в событии только координаты мыши были и true/false для функции отрисовки). Так что, мне вообщем, не совсем понятно, проблема осталась или нет.

Последний раз редактировалось fireballpro100, 22.12.2014 в 16:11.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Рисовалка на Canvas - как добавить инструмент? piraids Общие вопросы Javascript 1 21.07.2014 10:24
Не работает рисовалка canvas IVAAAAN Общие вопросы Javascript 16 05.07.2013 11:53
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 19:24