Библиотека рисования Javascript?

Есть ли предложения для библиотеки интерактивного рисования JavaScript? Просто нужно рисовать линии, многоугольники, тексты разного цвета. Совместимость с IE / Firefox / Opera / Safari.


javascript graphics
person st.    schedule 18.09.2008    source источник

Ответы (10)


arrow_upward
47
arrow_downward

Raphael отлично подходит для этого и работает во всех браузерах, поскольку использует VML (для MSIE) и SVG. (для всего остального).

person Dan    schedule 18.09.2008
comment
Блин, ты меня до пунша опередил;) - person Aeon; 19.09.2008
comment
СПАСИБО, это выглядит супер круто. будет использовать Рафаэля. - person John Ballinger; 14.10.2010

arrow_upward
15
arrow_downward

Processing.js Джона Ресига для этого отлично подходит.

person Zach    schedule 18.09.2008
comment
как processing.js сравнивается с raphael для статической графики? - person ina; 04.08.2010
comment
К сожалению, Processing не поддерживает IE. Немного жаль, хотя выглядит отлично. - person John Ballinger; 14.10.2010
comment
Похоже, теперь поддерживается IE (IE9) - person yorjo; 27.07.2011

arrow_upward
7
arrow_downward

Вы можете использовать объект холста непосредственно для рисования в 2D. IE требует библиотеки excanvas.

http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

person Craig B.    schedule 18.09.2008
comment
Canvas - это способ сделать что-то большее, чем несколько тривиальных прямоугольников или линий. И excanvas работает на удивление хорошо, по крайней мере, в IE 7. - person dgvid; 19.09.2008
comment
похоже, что Рафаэль может делать больше, чем простые прямоугольники и линии .. raphaeljs.com - person ina; 04.08.2010

arrow_upward
3
arrow_downward

Попробуйте http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. Это лучшее, что я нашел (не прибегая к SVG), и работает в большинстве браузеров без надстроек.

person Steve Moyer    schedule 18.09.2008
comment
Этот материал (рисование путем упорядочивания HTML-элементов) не особенно хорошо масштабируется, но, безусловно, работает :) - person Dan; 19.09.2008
comment
Верно ... вы, конечно, не станете строить CAD-систему таким образом, но она может делать довольно сложные чертежи, если вы придерживаетесь ортогональных структур и изображений (линии, прямоугольники и т. Д.) И немного приправляете их изображениями. Другие объекты чертежа построены с использованием нескольких элементов DIV каждый. - person Steve Moyer; 19.09.2008
comment
walterzorn.com, похоже, больше не существует. :( - person Alex Black; 24.11.2010
comment
новый URL: c-point.com/javascript_vector_draw.htm - person quantumpotato; 26.04.2014

arrow_upward
2
arrow_downward

Рисование текста с помощью тега canvas - большая проблема. Вы можете использовать обычные div, абсолютно расположенные в нужных местах, или найти / написать механизм компоновки шрифтов (пример) или дождитесь внедрения нового стандарта, позволяющего рисовать текст. SVG справляется с этим намного лучше.

В IE у вас есть ExplorerCanvas для имитации API холста с собственной разметкой VML IE. Тем не менее, собственный VML может обрабатывать текст по пути и такие вещи, как SVG. Я думаю, что теоретически, если вам нужна сложная обработка текста, вам понадобятся SVG и VML, такие как библиотека Рафаэля, о которой упоминал Дэн.

Вы также можете ненадолго подумать о Flash перед тем, как начать.

person jjrv    schedule 18.09.2008
comment
Фактически, VML изначально поддерживает рисование текста, а в последних версиях ExplorerCanvas есть методы рисования текста, рекомендованные WHATWG;) explorercanvas .blogspot.com - person Fabien Ménager; 31.05.2009
comment
Просто как обновление. Текст теперь гораздо менее проблематичен (2011 г.), в прошлом году он был неплохим. iOS4.1 + наконец-то правильно поддерживает текст на холстах, и я знаю, что Android 2.1+ тоже. Firefox / Safari / Chrome всегда имели хорошую поддержку текста на холсте, а IE9 + также правильно обрабатывает текст на холсте. - person Gabe; 03.09.2011

arrow_upward
2
arrow_downward

Как упоминалось выше, вам следует идти по холсту. IE не поддерживает его изначально, поэтому вам необходимо загрузить ExCanvas, чтобы обеспечить кроссбраузерность. Я бы порекомендовал посмотреть на Ajaxian для некоторых проектов, в которых используется тег холста.

person VirtuosiMedia    schedule 18.09.2008

arrow_upward
2
arrow_downward

Ознакомьтесь с подключаемым модулем jQuery Drawing, а также посетите Mozilla ссылка на Canvas и руководство.

person Christian C. Salvadó    schedule 18.09.2008

arrow_upward
2
arrow_downward

Также mxGraph. Это не использует excanvas для IE. Excanvas работает намного медленнее, чем использование VML, в частности, повторное использование тех же узлов VML, а не удаление, добавление узлов DOM для перерисовки. Это часто упускается из виду, но пренебрежение производительностью IE просто ужасно.

person Thomas the Tank Engine    schedule 18.02.2011

arrow_upward
1
arrow_downward

В зависимости от того, насколько кроссбраузерным вам нужно быть и от вашей цели, вы можете изучить элемент Canvas и связанный с ним javascript.

Canvas

person Steve g    schedule 18.09.2008

arrow_upward
0
arrow_downward

D3.js

D3.js - это библиотека JavaScript для управления документами на основе данных. D3 помогает оживить данные с помощью HTML, SVG и CSS. Акцент D3 на веб-стандартах дает вам все возможности современных браузеров, не привязывая себя к проприетарной платформе, сочетая мощные компоненты визуализации и управляемый данными подход к манипуляциям с DOM.

Взгляните на это обсуждение слишком.

person microMolvi    schedule 27.05.2015