Библиотека рисования Javascript?
Есть какие-нибудь предложения для библиотеки интерактивного рисования JavaScript? Просто нужно рисовать линии, многоугольники, тексты разного цвета. Совместимость с IE / Firefox / Opera / Safari. Взаимодействие с другими людьми
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 10
Вы можете использовать объект холста непосредственно для рисования в 2D. IE требует библиотеки excanvas.
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
похоже, что Рафаэль может делать больше, чем простые прямоугольники и линии .. raphaeljs.com
Processing.js Джона Ресига - хороший фреймворк для этого.
как processing.js сравнивается с raphael для статической графики?
К сожалению, обработка не поддерживает IE. Немного жаль, хотя выглядит отлично.
Похоже, теперь поддерживается IE (IE9)
В зависимости от того, насколько кроссбраузерным вам нужно быть, и от вашей цели вывода, вы можете изучить элемент Canvas и связанный с ним javascript.
Попробуйте http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. Это лучшее, что я нашел (не прибегая к SVG), и работает в большинстве браузеров без надстроек.
Этот материал (рисование путем упорядочивания HTML-элементов) не особенно хорошо масштабируется, но, безусловно, работает :)
Верно ... вы, конечно, не станете строить CAD-систему таким образом, но она может создавать довольно сложные чертежи, если вы придерживаетесь ортогональных структур и изображений (линии, прямоугольники и т. д.) И немного приукрашиваете их изображениями. Другие объекты чертежа построены с использованием нескольких элементов DIV каждый.
walterzorn.com, похоже, больше не существует. :(
новый URL: c-point.com/javascript_vector_draw.htm
Рафаэль очень хорош для этого и работает во всех браузерах, поскольку использует VML (для MSIE) и SVG (для всего остального).
Блин, ты меня опередил;)
СПАСИБО, это выглядит супер круто. будет использовать Рафаэля.
Рисование текста с помощью тега canvas - большая проблема. У вас есть варианты: использовать обычные div, абсолютно расположенные в нужных местах, или найти / написать механизм компоновки шрифтов (пример), или дождаться внедрения нового стандарта, который позволяет рисовать текст. SVG справляется с этим намного лучше.
В IE у вас есть ExplorerCanvas для имитации API холста с собственной разметкой VML IE. Тем не менее, собственный VML может создавать текст по пути и такие вещи, как SVG. Я думаю, что теоретически, если вам нужна сложная обработка текста, вам понадобятся SVG и VML, такие как библиотека Рафаэля, о которой упоминал Дэн.
Вы также можете на мгновение подумать о Flash перед тем, как начать.
Фактически, VML изначально поддерживает рисование текста, а в последних версиях ExplorerCanvas есть методы рисования текста, рекомендованные WHATWG;) explorercanvas.blogspot.com
Просто как обновление. Текст теперь гораздо менее проблематичен (2011 г.), в прошлом году он был довольно хорош. iOS4.1 + наконец-то правильно поддерживает текст на холстах, и я знаю, что Android 2.1+ тоже. Firefox / Safari / Chrome всегда имели хорошую поддержку текста холста, и IE9 + также правильно обрабатывает текст в холсте.
Проверьте Плагин jQuery Drawing, и вы также можете посмотреть ссылку Mozilla Холст и руководство.
Также mxGraph. Это не использует excanvas для IE. Excanvas работает намного медленнее, чем использование VML, в частности, повторное использование тех же узлов VML, а не удаление, добавление узлов DOM для перерисовки. Это часто упускается из виду, но пренебрежение производительностью IE просто ужасно.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Взгляните и на этот обсуждение.
Canvas - это способ сделать что-то большее, чем несколько тривиальных блоков или линий. И excanvas работает на удивление хорошо, по крайней мере, в IE 7.