Рисование в javascript с помощью div

В своем стремлении изучить javascript (который, похоже, является моим последним источником вопросов для SO в наши дни) я нашел этот API для рисования http://www.c-point.com/javascript_vector_draw.htm

Тем временем я проводил некоторые эксперименты с графикой, которая, как правило, требует большого количества рисования. Этот парень рисует с помощью div, каждая квадратная часть изображения - это div. В этом легко убедиться, просмотрев его пример на странице.

Он делает divs 1px / 1px для рисования пикселя.

Теперь я должен спросить следующее:

Это лучший метод? Когда рисунок более сложный, он кажется довольно тяжелым. Какие еще методы вы бы посоветовали?

В этой библиотеке рисования Javascript? уже есть пара ссылок на библиотеки, поэтому не нужно их здесь размещать.

Я видел здесь в SO другие вопросы, касающиеся рисования. Мне просто интересно, в какой момент рисование с помощью div не ужасно!


javascript html drawing
person fmsf    schedule 09.12.2008    source источник
comment
Обновление, похоже, что эта библиотека могла разбить мой firefox, когда я пытался выбрать строку в чертеже: p, поэтому я думаю, что он сам отвечает на вопрос, но любой, кто хочет что-то сказать о предмете, приветствуется. Специально о методах рисования   -  person fmsf    schedule 09.12.2008

Ответы (3)


arrow_upward
2
arrow_downward

для векторной графики такие библиотеки, как Raphael, предоставляют согласованный API для SVG и VML.

для растрового рисования вы можете использовать ‹canvas› для браузеров, поддерживающих холст.

для IE вы должны по умолчанию использовать DIVS или использовать в своем API рисования silverlight, если он доступен. Обратите внимание, что для повышения эффективности размер div не должен быть 1 пиксель на 1 пиксель, а должен быть настолько длинным, насколько это необходимо для фигуры, которую вы рисуете. 20 делений по 1 пикселю одного цвета должны составлять 1 деление шириной 20 пикселей. Как правило, вы не получите очень интерактивного подхода с подходом div, потому что браузер, на который вы нацеливаетесь (IE), имеет медленный доступ к DOM.

РЕДАКТИРОВАТЬ: связанная библиотека выполняет оптимизацию div.

для решений только для HTML (без SVG / VML / холста) вы используете CSS и настраиваемую ширину границ:

person Jimmy    schedule 09.12.2008

arrow_upward
0
arrow_downward

Нет, это худший метод, разработанный до того, как появились элементы SVG или холста ... Он был бы очень тяжелым для памяти и очень медленным. Забавный, интересный хакер, но не очень пригодный для использования в реальном мире.

Помимо упомянутых в другом потоке библиотек, основанных на Canvas / SVG / VML, я видел игры, созданные со спрайтами, т.е. некоторые изображения позиционируются абсолютно. Также был замечательный хакерский код для 3D-стрелялка от первого лица на 5k JavaScript с использованием генерации изображений XBM на лету. Но поддержка этого формата изображения была удалена из последних версий Windows ... :-(

Если подумать, вы также можете создавать изображения, используя протокол «data: image / png; base64», но кодирование будет довольно медленным, и браузеры IE не будут работать.

person PhiLho    schedule 09.12.2008
comment
Браузеры IE будут отключены FWIW IE8 поддерживает data: // URI, по крайней мере, для изображений. code.msdn.microsoft.com/Release/ - person mahemoff; 10.12.2008
comment
Спасибо за информацию, но в настоящее время IE8 все еще находится в стадии бета-тестирования и широко не используется. Я имел в виду текущие версии IE (6, 7). Я бы написал аналогичные вещи для некоторых трюков с CSS, надеясь, что когда-нибудь информация станет устаревшей. :-) - person PhiLho; 12.12.2008

arrow_upward
0
arrow_downward

Прежде чем начинать путаться с div 1px, ознакомьтесь с dojox.gfx: docs, тесты, demos (последние две ссылки на ночной снимок на тестовом сервере, оптимизированном для отладки, а не для производства).

Он использует встроенную графику: SVG, VML, Silverlight или Canvas - все, что доступно на клиенте, охватывающее все основные браузеры (IE, Firefox, Safari / Webkit, Opera).

person Eugene Lazutkin    schedule 10.12.2008