Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2015, 15:17
Новичок на форуме
Отправить личное сообщение для boolCount Посмотреть профиль Найти все сообщения от boolCount
 
Регистрация: 04.02.2015
Сообщений: 6

Много canvas'ов
У меня задача, сделать что то типа очень большого графа. Состоящего из отдельных "графиков".

Представьте, что задача состоит в написании какой нибудь территориальной области. Где есть города, связанные друг с другом дорогами. А в каждом городе есть ещё сети связанных например магазинов. Связанных тоже по дорогам.

Есть дивы: "города". Очень много. Их располагает администратор. У этих дивов задний фон есть как полупрозрачная картинка. И в самом "городе"
есть ещё дивы "магазины". В общем всё легко и просто. Но мне нужно связать прямыми и кривыми линиями, города и магазины между собой.

Вот всё что у меня есть, только без красоты пока. И лини связей.


Раньше я думал делать один огромный канвас, который был бы размерами как весь мир. На котором нужно было бы только в первый раз отрисовать все линии, а остальное осталось бы за перемещением этого канваса. Но получилось что там около 20000х15000 пикселей, размер канваса. Это вообще убивало на повал всю ОС, не то что бы вкладку. Я сделал шириной и высотой как экранная область, и просто перерисовываю.

Получается следующий пирог: канвас(размерами с экранную область), див мира-> в нём много дивов городов -> в каждом городе свои магазины.

И проблема в том, что фон города будет на линиях канваса. Я как то это разу не подумал(каюсь). И получается фигня.

Я начал думать, что бы делать каждый канвас для города, который служил бы прослойкой между фоном, и магазинами. У меня вопрос. Какова будет производительность? Если будет около 300 канвасов.

Или может вы подскажете другой способ реализации?
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2015, 16:49
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от boolCount
В общем всё легко и просто
Вот именно.
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2015, 16:50
Интересующийся
Отправить личное сообщение для Murmurianez Посмотреть профиль Найти все сообщения от Murmurianez
 
Регистрация: 20.06.2011
Сообщений: 15

Самого интересует этот вопрос, но глубоко не погружался.

Могу пару направлений для размышлений предложить:
Во-первых смущает размер canvas. Как я понимаю, canvas должен быть того размера который ты реально видишь, а остальное скрываться не вёрсткой, а возможностями самого canvas.

Во-вторых, если элементов предполагается не много (<100 думаю. Поправьте если что), то лучше посмотреть в сторону SVG.
Принцип такой:
Canvas начинает тормозить при увеличении размера самого canvas и ему пофигу на количество элементов, а у SVG наоборот - пофигу на размер области отрисовки, но критично количество элементов.

Сам хочу покопать в сторону WebGL - надеюсь, что там такой проблемы вообще нет.
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2015, 16:55
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от Murmurianez
и ему пофигу на количество элементов
Не пофиг, если элементами называть слои, а не нечто понятное только человеку в составе пикселей.

А в свге картинки и вставляются и линкуются.
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2015, 16:56
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

В целом задача сводится к "суть такова, грабить корованы"
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2015, 17:12
Интересующийся
Отправить личное сообщение для Murmurianez Посмотреть профиль Найти все сообщения от Murmurianez
 
Регистрация: 20.06.2011
Сообщений: 15

Ну, если подняться выше то вполне себе актуальная проблема способа отрисовки большого количества элементов без потери производительности. И я тоже в какой-то момент ставил вопрос подобным образом - что лучше один большой canvas или много маленьких.
Ответить с цитированием
  #7 (permalink)  
Старый 19.05.2015, 17:15
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Ну если еще выше подняться, то можно посмотреть как гугля рендерит свои карты накладывая вектор поверх растра. Растр у них тыреный, но его можно и самому наделать или рендерить в контексте.

Тут просто вот в чем дело - автору надо к гамаписателям, а это уровень такой, который досюдова не снизойдет. Решения-то давным давно все известны. Он-лайн игр как гавна.

Например начать можно с поиска библиотек, что там рендерит канвас хорошо, что на свг заточено. Я как-то смотрел - тоже как гавна.
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2015, 15:25
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

С городом. Рисуем кружек. Прямо в пейнте. И устраиваем город по принципу Москвы. Круги связанные лучиками.
Круг у нас есть, кругов может быть бесчисленное множество.
Рисуем несколько лучиков.
Город построен, транспортная система развита. Единственный нюанс что у всех объектов в городе есть места которые они могут занимать. то есть вдоль кружочков или вдоль лучиков.

Если есть столица или центральный город то тоже самое что и с объектами в городах. Если нет, тогда устраиваем картинку чётным или нечётным образом(вспомнишь школьный курс?). и располагаем объекты соответственно позициям, и добавляем нужное количество картинок карты дорог.

Какой вопрос то? Задача соединить каждый объект с каждым. Или всё таки это визуализация на карте пути из пункта А в пункт Б?

То есть могу ли я пойти в город Д из города А через город В?
Ответить с цитированием
  #9 (permalink)  
Старый 21.05.2015, 12:42
Новичок на форуме
Отправить личное сообщение для boolCount Посмотреть профиль Найти все сообщения от boolCount
 
Регистрация: 04.02.2015
Сообщений: 6

Сообщение от Leon-on12
Или всё таки это визуализация на карте пути из пункта А в пункт Б?

То есть могу ли я пойти в город Д из города А через город В?
Да, здесь что то типа задачи коммивояжёра.
Ответить с цитированием
  #10 (permalink)  
Старый 21.05.2015, 21:16
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Скажите же что левая верхняя картинка хитро лыбится.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Много select-ов и много кнопок eFusion Элементы интерфейса 2 18.04.2014 23:35
Много js функций получается Evgeny_Dedov jQuery 4 15.07.2013 15:17
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Много поточный ajax, даже ie 9 дурак bidloCoder Internet Explorer 1 29.07.2011 20:53
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02