Rajz JavaScript segítségével
Mielőtt elkezdi rajzolni valamit a böngésző, az tegye fel magának három kérdést:
- Van szüksége a támogatás régebbi böngészők? Ha a válasz igen, akkor a választás Raphael.js. Ezt támasztja alá a böngészők kezdve a 7. és 3. Néhány grafikai elemek még dolgozni 6. Bár a könyvtár nem támogatja technológiákat, amelyek a következő könyvtárak ...
- Van szüksége podderzhkaAndroid eszközöket? Android nem támogatja az SVG grafikák, így meg kell használni Paper.js vagy Processing.js. Úgy hírlik, hogy az Android 4 támogatást SVG feldolgozás, de a legtöbb futtató eszközök a régi változata Android.
- Van szüksége az interaktivitás? Raphael és Paper.js hajlamos az interaktivitás révén kattintás, drag and touch. Processing.js objektum nem támogatja a rendezvény, így a felhasználó intézkedéseket nehéz lesz nyomon követni. Processing.js levonhatjuk nagy animáció a honlapon, de az interaktív alkalmazások jobban használni más eszközökkel.
Választott a freymverka meg a sikerét a projekt. Ebben a cikkben, átnézzük az előnyeit és hátrányait az egyes könyvtárak, csak a hasznos információkat, amelyek a helyes választás.
A kód ezen cikk elérhető a demo oldalon.
Áttekintés freymverkov rajz
Ezek mindegyike támogatja Firefox, Opera, Chrome és Safari, de az Internet Explorer kivételével - Paper.js és Processing.js használatra vászon címke, amely támogatja a IE9 felett.
Kezdjük az import könyvtár. A beállítási eljárás mindegyik némileg eltérő.
Beállítás Paper.js
Paper.js igényel script type text / paperscript és ID vászon tag, hogy használni fog.
Beállítás Processing.js
Beállítás Raphael
Most indul festés.
Ahogy Paper.js és Raphael használt objektum-orientált rajz: akkor rajzoljon egy kört, és kap egy sor objektumot. Processing.js egy kört rajzol, és nem tér vissza semmit vissza. A következő példa mindent megmagyaráz. Kezdjük a kör közepén, a képernyő, 100, 100.
Raphaël:
Processing.js:
Minden kódrészletet felhívja ugyanazt a kört. A különbség az, hogy meg lehet csinálni vele.
Paper.js létrehoz egy kör egy utat objektumot. Tudjuk használni ezt az objektumot, és később módosíthatja. A Paper.js, circle.fillColor = 'vörös'; - ami a mi kör piros és circle.scale (2) - Növeli a tartományban két alkalommal.
Raphaël, mint egy objektum-orientált modell. Azt is megváltoztathatja a színét a köröket circle.attr (töltse ', „red”);. is növeli, hogy kétszer keresztül circle.scale (2, 2);. A lényeg az, hogy a kör a tárgy, amellyel tudunk dolgozni később.
Processing.js nem használhatja a létesítményeket. Ellipszis függvény nem ad vissza semmit. Ha volt, hogy rajzoljon egy kört a Processing.js, már része a kép, a festék a vásznon. Ez nem egy különálló egység, amely lehet változtatni attribútumokat. Változtatni a színét, mi lesz, hogy dolgozzon egy új körbe a tetején a korábbi.
Ha hívjuk a kitöltés. megváltoztatja a kitöltés színe minden objektum, amit támaszkodhatnak. Miután felhívta lefordítani, és töltse ki, minden egyes forma tele lesz zöld.
Mivel a funkciók mindent megváltoztat, akkor kap egy nem kívánt eredményt. A funkciót és minden zöld lesz! Erre a célra pushMatrix popMatrix és funkciók elkülönítésére a változásokat. Ne felejtsük el, hogy hívja őket.
Ha Processing.js nem objektum-orientált freymverk, ez nem jelenti azt, hogy rosszabb. Paper.js és Raphael tartalmaznak beállításokat minden, amit rajzol, ezért több memóriát használ bonyolultabb animációk lassítja az alkalmazás.
Processing.js tartalmazza a minimális beállításokat rajz formák, így a memória használatára legalább.
Forgó kör, nem látunk semmi érdekes, ezért létrehoz egy doboz körül.
animáció Processing.js
Processing.js támogatja az animációt előre meghatározott beállítások és megjelenítési funkciókat, mint például ebben a példában:
beállítás funkció az úgynevezett egyszer, amikor az alkalmazás elindul. Mi pont framerate (30). ez azt jelenti, hogy a funkció az úgynevezett 30-szor másodpercenként, hogy dolgozza át a képet. Az animáció létrehozása így.
felhívni funkció kezdődik kitöltésével a háttérben vásznon. Töltse ki az összes fehér, más szóval, törölje a vásznon. Ahogy emlékszem, itt nem lehet manipulálni tárgyakat.
Ezután állítsa be a koordináta-rendszer 100, 100 keresztül lefordítani. Ez azt jelenti, hogy minden négyzet 100 x 100 fehér lesz. Ezután fogunk forgatni egy bizonyos szögben, ami növeli az egyes rendering, hogy azt a benyomást kelti az animáció. Az utolsó lépés, felhívni a tér funkcióit, és töltse len.
A forgatás a Processing.js veszi radiánban helyett fok. Ezért növekszik a 0,2 minden rendering keretben.
animáció Paper.js
Paper.js teszi létrehozása egyszerű animációk sokkal kényelmesebb, mint az előző freymverk.
Mi határozza meg a tér, mint egy tárgy, és Paper.js levonja azt a képernyőn. Minden alkalommal, amikor a keret frissítésére, akkor kapcsolja egy kicsit. Nem kell, hogy dolgozza át minden alkalommal, és aggódik a biztonság egyéb tárgyakat.
animáció Raphael
Raphael hasonló Paper.js, ugyanazon objektum modell. Van egy tér, amit úgy hívunk forgatás funkció. Így tudjuk animálni a tér minimális kód költségeket.
Interaktív Raphael.js, Paper.js, Processing.js
Az interaktivitás segítségével Raphael
Kattintson funkció Raphael működik ugyanúgy, mint a jQuery. Akkor add meg mindenképpen. Amikor megkaptuk a click esemény, akkor egyszerűen változtatni a színét a térre. Raphael több funkcióval: drag and drop, útmutatást, és egyéb interaktív funkciók.
Az interaktivitás segítségével Paper.js
Paper.js felszabadítással interaktivitás különböző módon, de egyszerű és világos:
Paper.js kölcsönhatásba lép az egér segítségével «hit tesztelés» fogalma, amely az a pont, ahol az egér van telepítve, és meghatározza, hogy mely tárgyak alá a pont alá. Ezzel tudjuk „tisztázni”, hogy a kurzor legyen közel a tér, vagy mi fog történni, ahogy közeledünk a tér közepén.
Az interaktivitás segítségével Processing.js
Processing.js meghatároz egy egér segítségével néhány eszköz. Ez a könyvtár nem támogatja az objektum modellt, így meg kell alkalmazkodni.
Miután Processing.js négyzet rajzolásához, rögtön megfeledkezett róla. Ha meg akarjuk változtatni a színét a téren az egér le, akkor számolni kell magad. felhívni a funkció határozza meg a kurzor, ha ez a terület a tér, akkor dolgozza át egy újat.
Ez a kód nem olyan rossz a téren, de egy kört, és bonyolultabb formák elfogadhatatlan.
Nincs abszolút győztes
Freymverk mindegyiknek megvan a maga előnye. Természetesen nem tudjuk látni a körök és négyzetek egyszerű. Ez megköveteli komoly projekteket.
Sok példát grafikus megoldások megtalálható hivatalos honlapján:
Azt is meg kell vizsgálni annak lehetőségét, hogy csatlakozni speciális szerszámok speciális problémák megoldásához. Mint a rajz grafikonok, és egyéb speciális formái. További részletek a eszközök találhatók az oldalon freymverka.
Előtte játszottunk festés egyszerű elemekkel. Most fogjuk bővíteni a látókörét, hogy lássuk, könyvtár fog megnyilvánulni nehezebb feladat. Ugyanakkor, és megtanulják, hogyan kell kombinálni formában, és hozzon létre összetett animációk.
Fogunk létrehozni fogaskerekek, amely két kör, a fogak külső kerülete.
Amikor az összes formák azonos színű, úgy néznek ki, mint egy fogaskerék.
Minden egyes fogaskerék forog enyhén minden egyes keret frissítés. Az első fogaskerék készlet forgási sebességét, mindenki el lesz forgatva első, ill.
Szinkron Paper.js
Szinkron Processing.js:
Szinkron Raphaël:
Raphael a forgatás funkció működik másként, ellentétben Paper.js és Processing.js. Raphael nem támogatja forgatás tárgyak körül egy bizonyos pontig. Ehelyett a fogaskerék fogai húzott és átrajzolták a központ körül. Úgy repül, forgatás helyett. Az egyetlen módja annak, hogy a fogaskerék forog, a teremtés egyetlen tárgy, mint a görbe (path), de ez több időt vesz igénybe, hogy dolgozzon, mint az én utam.
Ha valaki azt akarja, hogy hogyan működik, kattintson a képekre, ez az egész nyílt forrás GitHubról.
Támaszkodó? - a jövőben az interneten rajz
Részletezném minden új technológia, reméljük, hogy nem lesz a haszon. Technológia növekvő és csökkenő, hogy hogyan használják fel őket.
Most, a Flash néz ki, mint egy rossz befektetés. Vaku valami tisztességes eszközöket használnak évek óta, de még az Adobe-re ezt a technológiát.
SVG ugyanabban a helyzetben. A böngészők támogatják őt, de ő nem kap elég figyelmet.
Minden böngésző gyártó dolgozik gyors feldolgozás vászon tag. Ezért véleményem szerint érdemesebb választani Paper.js vagy Processing.js. Minden mobil eszközök is támogatják a vásznon, és a fejlesztők mindent megtesznek, hogy javítsa meg.