Рисунок в JavaScript с дивой

голоса
2

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

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

Он идет, чтобы сделать дивы 1px / 1px рисовать пиксель

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

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

Этот рисунок библиотеки Javascript? уже пару ссылок не ЛИЭС поэтому нет необходимости ставить какой - либо здесь.

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

Задан 09/12/2008 в 20:57
источник пользователем
На других языках...                            


3 ответов

голоса
2

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

для растровой графики, вы можете использовать <Canvas> для браузеров, поддерживающих холст.

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

EDIT: Связанная библиотека делает делать Div-оптимизации.

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

Ответил 09/12/2008 в 21:09
источник пользователем

голоса
0

Перед тем как начать баловаться с 1px дивы, проверить dojox.gfx: Docs , тесты , демонстрационные (последние две ссылки на ночной снимок на тестовом сервере , оптимизированный для отладки, а не для производства).

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

Ответил 10/12/2008 в 02:12
источник пользователем

голоса
0

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

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

Давайте думать об этом, вы можете также сделать изображения с помощью «данные: изображений / PNG; base64» протокол, но кодирование будет довольно медленным, и IE браузеры будут отсутствовать.

Ответил 09/12/2008 в 23:04
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more