#javascript #css #svg
#javascript #css #svg
Вопрос:
Каковы основные различия между raphael.js и paper.js ?
Есть ли какие-либо другие библиотеки, на которые я должен обратить внимание? Есть ли подобные, которые больше ориентированы на CSS3, чем на SVG?
Спасибо!
Ответ №1:
Рафаэль использует SVG. Бумага использует холст.
Это основное различие.
С точки зрения того, что вы можете с ними делать, Canvas и SVG имеют свое собственное место и хороши для разных вещей (хотя они оба способны делать вещи друг друга, если вы их попросите). С чисто функциональной точки зрения вам нужно подумать, что вы хотите сделать с библиотекой, прежде чем решать, с какой из них вы идете.
Совместимость с браузером будет большой проблемой, какой бы вы ни использовали. На самом деле это, возможно, будет более серьезной проблемой, чем функциональность.
У Raphael есть преимущество на рабочем столе, потому что он обнаруживает более старые версии IE (начиная с IE6) и возвращается к использованию VML вместо SVG. Это означает, что он имеет отличную совместимость практически со всеми настольными браузерами. Холст просто не поддерживается на более старых ИЕ, и Paper.js люди, похоже, на самом деле не слишком беспокоятся по этому поводу.
Но на мобильных телефонах, Paper.js может быть, так будет лучше, потому что Canvas имеет гораздо лучшую поддержку на мобильных телефонах, чем SVG. SVG вообще не поддерживается на большинстве устройств Android. Ситуация меняется: в Android 3.0 появилась поддержка SVG, но большинство устройств Android, которые продаются даже сейчас, поставляются с версией v2.x, поэтому пройдет некоторое время, прежде чем вы сможете полагаться на SVG, работающий на мобильном устройстве.
Дополнительные сведения о поддержке браузеров см. на сайте CanIUse:
Надеюсь, это поможет.
Комментарии:
1. Спасибо, да, это очень полезно. Я, вероятно, буду использовать выбор paper.js
Ответ №2:
Наиболее очевидное различие заключается в том, что Raphael нацелен на SVG, а Paper — на элемент Canvas. Также кажется, что Paper обладает гораздо более расширенными возможностями, тогда как Raphael — это просто основные элементы SVG, которые затем можно расширить с помощью плагинов. Возможно, это больше зависит от ваших потребностей и от того, на какие среды вы хотите ориентироваться. Canvas хорошо работает в некоторых мобильных браузерах, SVG почти не работает в мобильных средах вообще.
В качестве еще одного примечания: SVG, насколько мне известно, не поддерживается аппаратным ускорением в IE (9) или Firefox, и, опять же, если меня не подводит память, Canvas, по крайней мере, в IE (9). Что касается IE 8 и ниже, вам нужен плагин для браузера, который есть у большинства, но это зависимость, которую следует ожидать.
Комментарии:
1. для IE8 и более ранних версий выигрывает Raphael — он совместим еще с IE6, потому что он возвращается к использованию VML вместо SVG в более старых версиях.
2. Если canvas имеет аппаратное ускорение, то svg обычно тоже, поскольку они работают в одной и той же базовой графической библиотеке.
3. Я не испытываю симпатии к IE8 или более ранней версии, поэтому я использую paper. Лучше, если вам не нужно поддерживать эти браузеры.
Ответ №3:
Есть ли какие-либо другие библиотеки, на которые я должен обратить внимание?
Да, вы должны взглянуть на processing.js !
И, кстати, вот отличное сравнение между raphael.js , paper.js и processing.js : http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael /
И даже сравнение кода с тем же эффектом: http://zgrossbart.github.com/3gears /
Комментарии:
1. Было здорово увидеть статью the code comparison smashing magazine — спасибо, что поделились.
Ответ №4:
Есть ли какие-либо другие библиотеки, на которые я должен обратить внимание?
Если у вас есть опыт разработки на Flash, вы можете рассмотреть easel.js который предоставляет вам некоторые механизмы отображения flash. Для меня Easel выглядит действительно хорошей библиотекой.
Еще одна интересная библиотека — processingjs, в отличие от других библиотек, processingjs также выполняет 3D-функции. (Он также хорош в 2d.) В отличие от paper, обработка raphael и easel не обрабатывает взаимодействие с пользователем «из коробки».
Обе библиотеки используют canvas.
Комментарии:
1. 1: я не видел easel.js раньше, но это звучит очень мило. Я добавил URL-адрес к вашему ответу, чтобы помочь другим найти его.
2. KineticJS — это улучшающая библиотека, ориентированная на производительность, с архитектурой в стиле вложенности узлов. Если вам нужен API, похожий на Flash, я бы предложил использовать easel . Если вам нужен API, похожий на jQuery или YUI, попробуйте KineticJS.