Raphael este o bibliotecă puternică care ar trebui să simplifice lucrul cu grafica vectorială pe Internet. Astăzi vă voi învăța cum să creați o hartă interactivă de la zero.
Mai întâi, vă rugăm să creați următoarea structură de fișiere și fișiere:
Raphael (raphael.js)
Acesta este dosarul în care vom stoca contururile și numele fiecărei țări.
index.html
Ca de obicei, primul pas este crearea de marcaj HTML.
De asemenea, inserăm stiluri (default.css) și înainte de a închide eticheta, activați biblioteca jQuery. biblioteca Raphaël. paths.js și init.js.
Crearea de contururi dintr-un fișier SVG
SVG (Scalable Vector Graphics) este o familie de specificații bazate pe format XML pentru descrierea graficelor vectoriale bidimensionale.
Deschideți paths.js și creați un obiect nou numit căi.
Apoi deschideți fișierul SVG cu harta și veți vedea o mulțime de cod XML. Din fericire, ai nevoie doar de o valoare d. Uită-te la imaginea de mai jos.
Să creăm primul circuit al țării. SVG-Fișierele utilizate în acest tutorial, primul merge Islanda, astfel încât copiați valoarea d și de a crea un nou parametru în căi obiect islanda.
Alte contururi sunt adăugate în același mod.
Crearea unei hărți (init.js)
În această parte a lecției voi scrie un script care va afișa harta pe ecran.
Mai întâi, creați un eveniment de hovering.
Apoi, adăugați un eveniment de clic.
Și mânerul pentru butonul de închidere.
În final, init.js arată astfel:
default.css
Ultimul pas este să adăugați un stil folosind CSS.
2. Pentru a introduce codul, folosiți etichetele speciale [code lang = "php"] codul [/ code]
Care este întrebarea dvs.? Harta este creată utilizând Adobe Illustrator. În practica sa, a creat suficiente hărți și hărți și hărți ale corpului uman pe baza acestei metode.
Sunt uimit de cât de mulți profesori razvelos pentru copierea aceeași lecție și se bucură de ele însele au vizitat apoi pentru a crea o hartă, și este peste tot aceeași frază, „am găsit pe Internet un fișier SVG gratuit cu harta Europei“, cel puțin unul dintre atașamentului sa oferit și tehnologie la crearea sa.
WordPress Digest
Digest de știri din lumea WordPress
Articole similare
-
Harta interactivă de Pattaya - locația de hoteluri în cazul în care atracțiile sunt situate
-
Sberbank, visa și mastercard - contactless - cu aplicația - trei
-
Cum să luați bani sau telefon pe credit pe un card bancar pe un card bancar
Trimiteți-le prietenilor: