Я працюю над інтерактивним інтерфейсом, використовуючи SVG та JavaScript / jQuery, і я намагаюся вирішити між Raphael та jQuery SVG . Я хотів би знати
Мені не потрібна підтримка VML / IE в Рафаелі, ані можливості побудови графіку jQuery SVG. Мене насамперед цікавить найелегантніший спосіб створення, анімації та маніпулювання окремими предметами на полотні SVG.
Відповіді:
Нещодавно я використовував і Raphael, і jQuery SVG - і ось мої думки:
Плюси: хороша бібліотека для початківців, швидко робити багато речей з SVG. Добре написана та задокументована. Багато прикладів та демонстрацій. Дуже розширювана архітектура. Чудово з анімацією.
Мінуси: це шар над фактичною розміткою SVG, ускладнює виконання більш складних речей з SVG - таких як групування (він підтримує набори, але не групи). Не робить великого w / редагування вже існуючих елементів.
Плюси: плагін jquery, якщо ви вже використовуєте jQuery. Добре написана та задокументована. Багато прикладів та демонстрацій. Підтримує більшість елементів SVG, забезпечує легкий доступ до елементів легко
Мінуси: архітектура не така розширювана, як Рафаель. Деякі речі можуть бути краще задокументовані (наприклад, налаштування SVG-елемента). Не робить великого w / редагування вже існуючих елементів. Для анімації покладається на SVG-семантику - що не так вже й чудово.
SnapSVG - наступник Рафаеля. Він підтримується лише у веб-переглядачах, що підтримуються SVG, та підтримує майже всі функції SVG.
Якщо ви робите щось швидко і легко, Рафаель - це простий вибір. Якщо ви збираєтеся робити щось складніше, я вирішив використовувати jQuery SVG, оскільки я можу маніпулювати фактичною розміткою значно простіше, ніж із Рафаелем. І якщо ви хочете вирішити не jQuery, то SnapSVG - хороший варіант.
Щодо нащадків, я хотів би зазначити, що я вибрав Рафаеля, завдяки чистому API та "безкоштовній" підтримці IE, а також тому, що активна розробка виглядає багатообіцяючою (наприклад, підтримка подій була додана лише в 0,7). Однак я залишлю це питання без відповіді, і мені все ж цікаво почути інформацію про досвід інших людей, використовуючи бібліотеки Javascript + SVG.
Я величезний фанат Рафаеля, і імпульс розвитку, здається, продовжує розвиватися (версія 0.85 була випущена наприкінці минулого тижня). Ще одним великим плюсом є те, що його розробник Дмитро Барановський зараз працює над графічним плагіном Raphael, g.raphael , який виглядає як його дуже чіткий (є кілька зразків виходу з ранніх версій на Flickr ) .
Однак, щоб передати іншого можливого суперника у поєднання бібліотеки SVG, веб- сторінка Google SVG виглядає дуже багатообіцяючою (хоча я не є великим шанувальником Flash, який він використовує для візуалізації у браузерах, що не підтримують SVG). Напевно, на них варто дивитися, особливо з майбутньою конференцією SVG Open .
Рафаель, безумовно, простіше налаштувати і продовжувати роботу, але зауважте, що існують способи вираження речей у SVG, які неможливі в Рафаелі. Як зазначалося вище, немає "груп". Це означає, що ви не можете реалізувати шари передачі координат. Натомість доступно лише одне перетворення координат.
Якщо ваш дизайн залежить від вкладених перетворень координат, Рафаель не для вас.
О Рафаель значно змінився з червня. Існує нова бібліотека графіків, яка може працювати з нею, і це дуже приваблює око. Рафаель також підтримує повний синтаксис шляху SVG і використовує дійсно прогресивні методи шляху. Заходьте на мій сайт 1.2.8+ (безсоромний штекер), а потім переходьте на сайт Дмитра звідти. http://www.irunmywebsite.com/raphael/raphaelsource.html
Я думаю, що це не зовсім пов'язано, але ви вважали полотно? щось на зразок Process JS може зробити це простіше.
Слід також поглянути на svgweb. Він використовує flash для візуалізації svg в IE, а необов'язково в інших браузерах (у випадках, коли він підтримує більше, ніж сам браузер).
Я кину свій голос за Рафаеля - підтримка крос-браузера, чистий API та постійні оновлення (поки що) роблять це радістю користуватися. Це дуже добре грає і з jQuery. Обробка класна, але корисніша як демонстрація для кровоточивих речей на даний момент.
Як початківець Javascript, я знайшов зразки Rapahel не так просто, рекомендую http://cancerbero.mbarreneche.com/raphaeltut , який є справжнім покроковим посібником.
Для тих, кому не байдуже IE6 / IE7, той самий хлопець, який написав Рафаеля, створив двигун svg спеціально для сучасних браузерів: Snap.svg .. у них є дійсно приємний сайт з хорошими документами: http://snapsvg.io
snap.svg не може бути простішим використання прямо з коробки, і може маніпулювати / оновлювати наявні SVG або генерувати нові. Ви можете прочитати цей матеріал на сторінці snap.io про сторінку, але ось короткий пробіг:
Мінуси
Плюси
Реалізує всі функції SVG, такі як маскування, відсікання, візерунки, повні градієнти, групи тощо.
Можливість роботи з існуючими SVG: вміст не потрібно генерувати за допомогою Snap, щоб він працював із Snap, що дозволяє створювати вміст за допомогою будь-яких поширених інструментів дизайну.
Повна підтримка анімації за допомогою простого та простого втілення JavaScript API
Працює з рядками SVG (наприклад, файли SVG, завантажені через Ajax), не потребуючи їх фактичного виведення спочатку, подібно до контейнера ресурсів або списку спрайтів.
перевірте це, якщо вас цікавить: http://snapsvg.io
Оскільки це ще не згадується: Ви також повинні ознайомитись з Dojox.drawing , який також забезпечує хороші можливості малювання SVG. Він має досить вражаючий набір функцій. Я тільки починаю проект з цього, але мені здається, що він набагато перевершує (принаймні, з точки зору функцій) Рафаеля та JQuerySVG.
Ця презентація переконала мене використовувати її замість Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Довідка: http://dojotoolkit.org/reference-guide/dojox/index.html
Довідка про Dojocampus: http://docs.dojocampus.org/dojox/drawing
Завантажте Dojo (включаючи Dojox): http://dojotoolkit.org/download/
Ще одна бібліотека JavaScript JavaScript, яку ви хочете подивитися, - це d3.js. http://d3js.org/
Я вважаю за краще використовувати RaphaelJS, тому що він має чудові можливості перехресного браузера. Однак деяких SVG та VML-ефектів неможливо досягти за допомогою RaphaelJS (складні градієнти ...).
Google також розробив власну бібліотеку, щоб увімкнути підтримку SVG в IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
Якщо вам не потрібна підтримка VML та IE8, тоді використовуйте Canvas (наприклад, PaperJS). Подивіться останні демонстрації IE10 для Windows 7. Вони мають дивовижну анімацію на Canvas. SVG не здатний робити щось близько до них. В цілому Canvas доступний у всіх мобільних браузерах. SVG не працює на ранніх версіях Android 2.0- 2.3 (як я знаю)
Так, Canvas не є масштабованим, але він настільки швидкий, що ви можете перемальовувати все полотно швидше, ніж браузер, здатний прокручувати порт перегляду.
З моєї точки зору, оптимізація Microsoft надає засоби використовувати Canvas як звичайний двигун GDI та реалізовувати графічні програми, як ми це робимо для Windows зараз.