Се натъкнах на една статия със сравнение на трите JS библиотеки за съставяне на WEB Paper.js, Processing.js и Raphael.js. Мисля, че това ще бъде интересно не само за мен.
Преди да започнете да се направи нещо в браузъра, задайте си следните три неща:
- Вие се нуждаете от поддръжка за по-стари браузъри?
Ако отговорът е да. тогава единственият избор е Рафаел. Той поддържа браузъри, докато IE 7 и Firefox 3. В Рафаел има дори ограничена подкрепа за IE 6, независимо от факта, че някои от базата не може да се реализира в този браузър технология за библиотеки. - Трябва подкрепа Android?
Android не поддържа SVG, така че трябва да използвате Paper.js или Processing.js. Има слухове, че Android 4 ще подкрепят SVG, но повечето от устройствата с Android днес вече няма да го подкрепят. - Вашият чертеж интерактивен?
Рафаел Paper.js и фокусирани върху взаимодействието с елементите се изготвя с кликване на мишката и плъзнете на пипане. Processing.js не поддържа никакъв обект събития, за да се справят с трафика на потребителите, тъй като има доста трудно. Processing.js могат да изготвят хладно анимация на началната си страница, а Рафаел и Paper.js по-подходящ за интерактивни приложения.
Paper.js, Processing.js и Рафаел момента са водещите библиотеки да привличат в мрежата. Налице е също така един чифт новодошлите, чиято популярност нараства, и разбира се, винаги можете да използвате Flash, но това трио работи добре с HTML5 и има широка подкрепа сред продавачите на браузъра.
Целият код е даден в статията е с отворен код и е достъпен на страницата на демо създаден специално за подкрепа на тази статия.
Обща характеристика
За да започнете да импортирате всяка библиотека. Във всеки случай, този процес е малко по-различен
Свързване Paper.js
Paper.js определя типа на скрипт като текст / paperscript ID платно и елемента цел, на която ще се направи.
Свързване Processing.js
Свързване Рафаел
Вече сме готови да рисува
ОО рисунка
И двете Paper.js Рафаел и използване обектно-ориентиран подход към процеса на рисуването: начертайте кръг и да получите кръг обект. Processing.js просто прави кръг и се връща нищо. Следният код показва как това се случва. Нека започнем с кръга измерване 100 от 100 в центъра на екрана.
Processing.js:
Всяка част от код привлича един и същи кръг. Разликата е, че след това можете да правите с него.
Paper.js създава кръг като обект път. Ние можем да го пазят и да се промени в бъдеще. В Paper.js, circle.fillColor = "червен"; Тя се основава червен кръг и circle.scale (2) го прави два пъти повече.
Рафаел като Paper.js "изпълнява обектно-ориентиран модел. В Рафаел, ние може да промени цвета на нашия кръг, използвайки circle.attr ( "запълни", "червен"); и промени своите размери писане circle.scale (2, 2). Основната идея е, че кръгът е обекта, към който свойства можем да имаме достъп по-късно.
Processing.js не използват обекти; елипса () връща никаква стойност. След като привлече кръг използване Processing.js, тя става част от изградения образ като при изготвянето на мастило върху хартия; това не е някаква отделна единица, която свойства могат да бъдат променяни. За да промените цвета, ние трябва да се направи един кръг, но с различен цвят на върха на първата.
Когато се обадите на запълване () функция. Тя променя цвета показва за всички примитиви нататък. След като нарече превежда () и попълнете (). Всички цифри са боядисани в зелено.
Тъй като функциите променят всичко наведнъж, ние можем лесно да получите доста неочаквани ефекти. Наречен безвреден функция и изведнъж всичко се превръща зелено! Processing.js осигурява pushMatrix () и popMatrix (), за да се изолират промени, но те все още трябва да се помни, за да донесе.
Липса на съоръжения в Processing.js означава, че сложните модели се обработват много по-бързо. Paper.js Рафаел и съхранява връзки до всички обектите от чертежа, която увеличава kolichestvotrebuemoy памет и значително забавят прилагането на сложни графики. Processing.js не съдържа препратки към обекти, създадени в крайната част на всяка снимка заема много малко памет. Подходът на обект е оправдано, ако искате да получите достъп до обекта по-късно, в противен случай то е загуба на ресурси. Paper.js дава възможност да се избегне ненужното потребление на паметта, когато не е необходимо, за да направите това, използвайте Символ които растеризира обекта, но разбира се, че трябва да се планира всичко предварително приложението да работи достатъчно бързо.
Различни подходи определят целия стил на работа с библиотеки. Разбира се, това се отразява на начина, по който се работи с анимация.
Накарайте ги да се движат
Въртенето на колелата не е много ефектен, така че нека нека кръга се върти около площада.
Анимация Processing.js
Processing.js позволява анимация за настройка () и начертайте () функция, като този:
Функция за настройка се нарича в началото на приложението. Ние казваме Processing.js при 30 кадъра в секунда, в резултат на нашата функция реми () ще се нарича 30 пъти в секунда. Този брой може да изглежда висока, но това е добре, ако искаме гладка анимация.
изготвя () функция първо изпълва цялата платното в един цвят; Това ще рисува всичко, което е останало от предишния кадър. Това е основната характеристика на Processing.js: ние не манипулират обекти, така че ние трябва да се почисти всичко, което е останало от предишния кадър.
Освен това, ние преведете точка до 100,100. Това позиционира чертежа в ляво и 100 на 100 пиксела платно отгоре за всички рисуване операции, докато ние не се променят координатите. След това се промени предишната стойност на ъгъла на наклон. Тази стойност се увеличава с всеки кадър на вземане на площада, за да завъртите. И последната стъпка е картографиране на площада с помощта на функции и запълване на правоъгълник.
Обикновено се върти функция () Processing.js работи радиани вместо градуса. Ето защо, всеки път, когато се увеличи стойността на ъгъла, под 0.2, не по-голямо значение, например 3. Това е един от многото случаи, при изготвянето на програмата, когато имаме нужда от тригонометрията.
анимационни Paper.js
В Paper.js проста анимация да се реализират по-лесно от Processing.js, с помощта на неподвижен обект правоъгълник:
Ние използваме нашето състояние на площада като обект и управлява Paper.js изготвянето на екрана. С всеки изстрел го върти бавно. Paper.js управлява всички трансформации, така че ние не трябва да се преначертае всичко в ръка в началото на всеки кадър, или за наблюдение на текущата стойност на ъгъла на завъртане, или се притеснявате за това, как да не се докосват други обекти.
анимация Рафаел
Рафаел подобен на Paper.js в обектно-ориентиран подход. Ние имаме квадрат, и ние наричаме това го завъртете () метод. Така че ние може да се върти на площада с помощта само на няколко реда код.
взаимодействие
Взаимодействие на Рафаел
Взаимодействие в Paper.js
Paper.js отива в другата посока за проблеми служба за взаимодействие, но това е съвсем проста:
Взаимодействие в Processing.js
В Processing.js откриване кликване на мишката е сравнително объркващо. стил на обекта не се поддържа, така че ние трябва да разчитат основно на собствените си сили.
След Processing.js обръща на площада, той забравя за това. Ние ги искаме, когато кликнат на площада да го променя цвета си, но скрипта не знае, така че ние трябва да направим себе си всички изчисления. изготвят () функция, определя позицията на курсора, и изчислява лъжите, независимо дали е в рамките на нашия квадрат.
За един квадратен кодът не е толкова ужасно, но например за кръга ще трябва да се счита всеки път, когато NR 2. по-сложни форми, като овали, криви и сложни форми изискват повече математика.
Не ясен победител
Всяка рамка има своите предимства. Всяка библиотека предлага възможност за създаване на хладно демонстрации и още по-готини приложения.
Ползи Paper.js
Paper.js чудесно за манипулиране сложни форми. Тя може да се върти, обрат и да трансформира всеки обект сто различни методи. Това дава възможност за промяна на обектите, използващи жестове на мишката (жестове). Нов Google Music Tour. Това прави цветни линии се движат с музиката, която показва как библиотеката, за да се справят със сложни промени в прости форми.
Друг уау фактор в тази Paper.js подкрепа растерна графика. Paper.js може да промени изцяло начина, по който се показват изображения - например превръщането им в спирални или куб платна (Q * BERT плочи).
Ползи Processing.js
Основното предимство на Processing.js 'е скоростта си, което ви позволява да създавате сложни анимации дори за най-ниския клас машини. Има много примери, също така е чудесен пример за гладки анимация Processing.js използвани за Рикардо Санчес сайт.
Разрязване на водата плаващи рибни опашки и органите изглежда много естествено. Processing.js могат да постигнат това просто с помощта на криви и персонализирани анимации.
Processing.js също поддържа сложни ефекти върху елементите, като например оцветяване, светлина и 3-D трансформации. Ако искате да създадете бързо сложни анимации върху платното, след което Processing.js е най-добрият избор.
Предимства Рафаел
Един от най-добрите черти Рафаел е в подкрепа на Internet Explorer 7 и 8. Ако вашата кандидатура трябва да поддържа стари браузъри, а след това Рафаел е единственият избор.
Друго важно предимство е неговата Рафаел общество. Рафаел по-стар от Paper.js Processing.js и така той трябваше повече време, за да се създаде галерия от примери, урок, както и описание на често срещани проблеми и техните решения. Тя е вградена поддръжка облекчаване. анимационни трансформации, както и със събития, които сме виждали в интерактивен пример; тъй като тя разполага със собствена библиотека за създаване на графики.
Също Рафаел отличен набор от различни инструменти.
инструменти
Нека да създадем нещо по-сложно
Така че, ние погледна някои прости примери, се срещнаха на предимствата и недостатъците на всяка платформа и осъзнах, във всеки случай, кой е по-добре. Всяка библиотека има своите плюсове и минуси, но все пак се основава само на примитивните примери за тях са доста трудно да се прецени.
За сравнение, всяка библиотека са изрисувани няколко предавки. Всеки от тях се състои от два етапа, с набор от зъби около външния кръг.
Когато всички повърхности са пълни с един и същи цвят, цифра, подобно на предавка.
Gears ще бъде леко завъртени на всеки кадър на анимацията. Основната зъб ще определи скоростта, както и всички останали ще се въртят независимо от него. Зъбните колела са разположени, да се включат и завъртане един спрямо друг, въз основа на количество от луд тригонометрия. Подредете ги по картина и имате сложна система от зъбни колела.
Бъдещето на уеб рисунка
Играхме с всяко ново развитие на технологиите: ние се надяваме, че това ще реши много от проблемите ни, и тя ще плати за инвестицията в своя кабинет. Технологиите се печелят и губят популярност, но това включва много фактори, като например за подпомагане на производителите или бизнес изисквания. Бъдещето на нашата индустрия често е да гадаете.
Днес, Flash не изглежда най-добрата технология за проучването. Имаме страхотен Flash инструменти за проектиране, години натрупан опит в разработването и висшето общество, но дори и Adobe далеч от него.
С SVG подобна ситуация. Браузъри го подкрепят, но не плащат прекалено много внимание.
Всеки производител браузъри са постоянно работят, за да увеличите скоростта на увеличен изглед. за да може да се използва хардуерно ускорение и по-добра поддръжка на библиотеките като Paper.js и Processing.js. Всички мобилни браузъри A-клас платно подкрепа. и разработчиците са постоянно работят, за да се подобри качеството на тази подкрепа.
Свързани статии