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
![Rajz javascript keresztül (via) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-9a5929de.png)
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.
![Rajz JavaScript segítségével (Raphael js) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-618100b3.png)
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.
![Rajz javascript használatával (rajz) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-cc6e8332.png)
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
![Rajz javascript használatával (rajz a js) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-4fe33290.png)
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.
![Rajz JavaScript segítségével (feldolgozás js) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-c47cc543.png)
Amikor az összes formák azonos színű, úgy néznek ki, mint egy fogaskerék.
![Rajz JavaScript segítségével (feldolgozás js) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-a5ca0906.png)
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
![Rajz javascript használatával kidolgozása (javascript) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-364bf9c1.png)
Szinkron Processing.js:
![Rajz javascript használatával (rajz a js) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-85c89a96.png)
Szinkron Raphaël:
![Rajz JavaScript segítségével (Raphael js) Rajz JavaScript segítségével](https://images-on-off.com/images/135/risovanienajavascriptspomoshyu-5cc73350.png)
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.