Épület egy interaktív térkép Raphaël
Raphaël - egy erőteljes könyvtár, amely egyszerűsíti a munkát vektorgrafikus az interneten. Ma fogok tanítani, hogyan kell létrehozni egy interaktív térképet a semmiből.
A kezdéshez, kérjük hozza létre a következő mappastruktúrát kép:
Raphael (Raphael.js)
Ez az a fájl, ahol majd tárolni a kontúrok és nevét minden országban.
index.html
Szokás szerint az első lépés, hogy hozzon létre egy jelölő HTML.
Azt is helyezze stílusok (default.css) és a záró címke tartalmazza a jQuery könyvtár. Raphaël könyvtárban. paths.js és init.js.
Létrehozása kontúrjait SVG fájl
SVG (Scalable Vector Graphics, Scalable Vector Graphics) egy -specifikációcsaládnak egy XML alapú formátum leírására kétdimenziós vektoros grafika.
Paths.js nyitott, és hozzon létre egy új objektumot nevezzük utak.
Majd nyissa meg az SVG-fájl a térképen, és látni fogja a sok XML kódot. Szerencsére, csak akkor kell egy értéket d. Nézd meg az alábbi képet.
Hozzunk létre az első körben az országban. Az SVG-fájlok használják a bemutató, az első megy Izland, így másolni a d értékét, és hozzon létre egy új paramétert Izlandon tárgy utak.
Ugyanígy, majd hozzáadjuk a többi áramkör.
Készített térképet (init.js)
Ebben a leckében fogok írni egy forgatókönyvet, amely megjelenik a térkép a képernyőn.
Először hozzon létre egy hover esemény.
Ezután adjon hozzá egy kattintással eseményt.
És a felvezető a gombot „zárni”.
Végül init.js így néz ki:
default.css
Az utolsó lépés az, hogy adjunk néhány stílus CSS.
2. beszúrásához kódot, a különleges címkét [code lang = "php"] a kódot [/ code]
Mi a kérdés? Térkép segítségével létrehozott Adobe Illustrator. A praxisomban nasozdavali elég térképek és földrajzi térképek az emberi test és az alapján ezt a módszert.
Vagyok nyűgözve, hogy milyen sok tanár razvelos másolásához ugyanazt a leckét, és jól érzik magukat, majd felkeresett, hogy hozzon létre egy térképet, és ez mindenütt ugyanazt a mondatot: „Én találtam az interneten egy ingyenes SVG fájl Európa térképét” legalább az egyik hevederes felajánlott és technológia annak létrehozását.
WordPress Digest
News Digest a WordPress világ