Ma vászon JavaScriptet fogunk használni, hogy rajzoljunk egy kört, amely követi az egérkurzort.
Alapvető megközelítés
Mielőtt belevágnánk a kódba, beszéljünk arról, hogyan hozzunk létre egy kört az egérkurzort követve. De először meg kell rajzolnunk ezt a kört:
Felirat a képen: A kör nem méretarányosan van megrajzolva.
A kör helyzete attól függően változik, hogy pontosan hol van az egérkurzor. Ez azt jelenti, hogy minden alkalommal, amikor az egér pozíciója megváltozik, újra kell rajzolnunk a kört:
Ezt a példát nem túl nehéz megérteni. De ez nem azt jelenti, hogy a "kulisszák mögött" nincs semmi érdekes. A JavaScriptről szóló későbbi tárgyalásunk során érinteni fogunk a fenti kód néhány fontos aspektusát, amelyeket esetleg nem értettél meg.
Hogy kezdjed?
Az első dolog, amire szükségünk van, egy vászonképes JavaScript-oldal. Ha még nem rendelkezik vele, akkor helyezze be a következő kódot egy üres HTML-oldalba:
Rajzolj egy kört
Az első dolog, amit meg fogunk tenni, egy kört rajzolni. A címke belsejében
A forgatókönyv működését nem írom le, csak néhány pontra figyelek. Az első az első két sor. A bal és jobb oldali akna azonosítóját jelzik. ha átnevezi őket stílusokban és HTML-ben, akkor ezt magában a szkriptben kell megtennie.
A második a kurzorkövetési terület. Ebben a szkriptben a 7. sor tartalmazza - html. Ez lényegében az egész oldal. Néha használt test. De ha nincs tele az oldal, és a lábléc nincs az oldal aljára nyomva, akkor előfordul, hogy a törzs csak az oldal fele és azon túllépve a szkript leáll, így jobb - html. Beállíthat egy adott blokkot is, amelyen belül a kurzort követi, míg az oldal többi részén ez nem történik meg. Ilyen esetekben a html helyett blokkazonosítót kell megadni, például #blokk_neve. Helyezze be a cikkből származó HTML-kódot a #blokk_neve azonosítójú blokkba, és kész.
Ez minden, amire szüksége van a szkript telepítéséhez a webhelyére. Ahogy az elején írtam, ennek a szkriptnek nincs sok haszna, és csak azért létezik, hogy szokatlan megjelenést adjon a webhelyének.
Ennyi, köszönöm a figyelmet. 🙂
Ez a cikk bemutatja a legjobb webes felhasználói felület (UI) elemeit és animációit, amelyek a CodePen webhelyen szerepeltek. Minden terv CSS-sel és JavaScripttel készült.
A Julian Garnier által tervezett animált modell a Nap körül keringő nyolc bolygót ábrázolja 3D-ben (Boffins nemrég úgy döntött, hogy hivatalosan a Plútó már nem bolygó). Ezt a demót Alex Giron és Nicolas Gallager projektjei ihlették.
Bálna
Úgy néz ki, mint bármely más menü, amíg végig nem görgeted és meg nem látod, hogy zseléből készült! A menüpontok mozgásuk során meghajlanak, és elhúzódó hanggal térnek vissza a helyükre álló állapotban.
húzható túlcsordulás
A húzható túlcsordulás lehetővé teszi weboldala stílusos kialakítását anélkül, hogy kompromisszumot kellene kötnie a tartalom terén. A szöveg eltűnik, ha a sávokon kívül esik, és húzással görgethető.
Folyékony rács szövegigazítással: sorkizárás
Nyomós gombok
Ez a hihetetlen projekt pszeudo-tapintási hatást hoz létre, még akkor is, ha a gombokat az egérrel működtetik.
Tiszta CSS peeling ragacsos
Ez a CSS tépőzár kellemes pszeudo-tapintható tapintású, és könnyen eltávolítható címke formájában jelenik meg, hogy felfedje, mi rejtőzik alatta.
színes füst
Az egérkurzort követő színes részecskék animációja.
Ezek a golyók félnek az egérmutatótól. Ha a kurzort agresszíven mozgatja, pánikba esnek és szétterülnek, de ha lassan közeledik, ugyanolyan sebességgel sodródnak el, mindig egy bizonyos távolságot betartva. Ha elköltözöl, akkor összegyűlnek, és érdeklődéssel és észrevehetetlenül indulnak feléd.
Szakadhatóvászon
- Fordítás
A cikk szerzője, amelynek fordítását közzétesszük, azt javasolja, hogy a számítógépes látás területéről szóló problémák megoldásáról beszéljünk kizárólag webböngésző segítségével. Egy ilyen probléma megoldása nem olyan nehéz a TensorFlow JavaScript könyvtárnak köszönhetően. Ahelyett, hogy saját modellünket betanítanánk, és a késztermék részeként kínálnánk fel a felhasználóknak, lehetőséget adunk számukra, hogy önállóan gyűjtsenek adatokat és betanítsák a modellt közvetlenül a böngészőben, saját számítógépükön. Ezzel a megközelítéssel a szerver adatfeldolgozása teljesen felesleges.
Megtapasztalhatja, hogy ez az anyag minek a létrehozására szolgál. Ehhez szüksége lesz egy modern böngészőre, egy webkamerára és egy egérre. Itt található a projekt forráskódja. Nem mobileszközökön való működésre tervezték, az anyag szerzője szerint nem volt ideje megfelelő fejlesztésekre. Emellett megjegyzi, hogy az itt tárgyalt feladat bonyolultabb lesz, ha mozgó kamerából kell feldolgozni egy videofolyamot.
Ötlet
Használjunk gépi tanulási technológiákat, hogy megtudjuk, pontosan hol keres a felhasználó, amikor egy weboldalt néz. Tegyük ezt úgy, hogy webkamerával figyeljük a szemét.Nagyon könnyű elérni a webkamerát a böngészőben. Ha feltételezzük, hogy a kamera teljes képét a neurális hálózat bemeneteként használjuk fel, akkor azt mondhatjuk, hogy túl nagy erre a célra. A rendszernek sokat kell dolgoznia, hogy meghatározza a képen azt a helyet, ahol a szemek vannak. Ez a megközelítés jól működhet, ha egy olyan modellről beszélünk, amelyet a fejlesztő saját maga képez ki és telepít a szerverre, de ha betanításról és a modell böngészőben való használatáról beszélünk, akkor ez már túl sok.
A hálózat dolgának megkönnyítése érdekében csak a kép egy részletét tudjuk biztosítani számára - azt, amelyik tartalmazza a felhasználó szemeit és a körülöttük lévő kis területet. Ez a terület, amely a szemet körülvevő téglalap, egy harmadik féltől származó könyvtár segítségével észlelhető. Ezért munkánk első része így néz ki:
Webkamera bemenet, arcfelismerés, szemfelismerés, kivágott kép
Az arc észleléséhez a képen a clmtrackr nevű könyvtárat használtam. Nem tökéletes, de kicsi, jól teljesít, és általában jól végzi a munkáját.
Ha egy kicsi, de jól megválasztott képet használunk bemenetként egy egyszerű konvolúciós neurális hálózathoz, a hálózat túl sok gond nélkül képes lesz tanulni. Így néz ki a folyamat:
Bemeneti kép, modell - konvolúciós neurális hálózat, koordináták, a hálózat által megjósolt hely azon az oldalon, ahol a felhasználó keres.
Az ebben a részben tárgyalt ötlet egy teljesen működőképes minimális megvalósítását ismertetjük itt. A projekt, amelynek kódja ebben a tárolóban található, számos további funkcióval rendelkezik.
Kiképzés
Először is töltsük le a clmtrackr.js fájlt a megfelelő tárolóból. Kezdjük egy üres HTML-fájllal, amely importálja a jQuery-t, a TensorFlow.js-t, a clmtrackr.js-t és a main.js fájlt a kódunkkal, amelyen kicsit később dolgozunk:
Videofolyam lekérése webkameráról
A webkamera aktiválásához és a videófolyam megjelenítéséhez az oldalon a felhasználó engedélyét kell kérnünk. Itt nem adok olyan kódot, amely megoldja a projekt kompatibilitási problémáit különböző böngészőkkel. Feltételezzük, hogy felhasználóink a Google Chrome legújabb verziójával böngésznek az interneten.Adjuk hozzá a következő kódot a HTML-fájlhoz. A címkén belül kell lennie
de a címkék felett
