Biblioteca din Raphaël a fost creată de Dmitri Baranovsky. Demonstrarea oportunităților se face pe site-ul bibliotecii. Mi-a plăcut foarte mult ceasul polar. În acest exemplu, puteți vedea modul în care este utilizată biblioteca.
Codul este suficient de complex pentru a fi analizat din raid, dar devine destul de ușor de înțeles dacă dezasamblați metodele de bază folosite în exemplul respectiv.
În interiorul elementului cu id = "suport", în documentul HTML este creat un container SVG cu o dimensiune de 600x600 pixeli
Metoda cerc () creează un cerc cu coordonatele centrului la punctul 300,300 și la raza de 100
Metoda attr () vă permite să specificați diferite atribute pentru elemente, de exemplu:
setați culoarea albă (#fff) pentru cursa de margine
Setați lățimea liniei de lățime a cursei la 30 de pixeli
Puteți crea chiar un atribut nou, care va fi o suprapunere a altor atribute, de exemplu, atributul tri. care formează figura unui triunghi drept izoscel în raport cu coordonatele x, y cu partea a
Acum, puteți crea o animație, un triunghi în mișcare și extindere.
Specificați valoarea finală a atributului (punctul 200,200, partea 50),
animație de timp - 2 secunde,
tip animație - elastic (seamănă cu un izvor ascuțit cu
Pentru a efectua o operație pe un grup de elemente, ele pot fi combinate în seturi, iar operația de pe set va duce automat la acțiuni corespunzătoare pentru toate elementele din set
Creați setul. adăugați un cerc și un pătrat, apoi setați toate elementele din set la o culoare de umplere roșie
Mai multe informații despre posibilitățile bibliotecii pot fi găsite în documentația foarte detaliată.
Desigur, posibilitățile bibliotecii sunt uimitoare, dar pentru mine, de exemplu, a existat o lipsă foarte mare a unui lucru de bază: un element
P.S. Dacă cineva a reușit să observe, mi-am dat seama pentru statisticile de ieșire pe blog despre vizite. unde a folosit biblioteca Raphaël pentru a afișa grafice. Întotdeauna mi-am dorit să reușesc să schimb literal o diagramă, astfel încât coordonatele punctelor să fie încărcate automat și programul a fost format direct pe zbor și a fost realizat. Animația nu este foarte netedă, dar dacă sacrifici transparența fundației, puteți face parte din grafic în afara zonei grafice și puteți ieși ușor după terminarea redării.
Bună ziua!
Am o sarcină, să fac o hartă interactivă. Am făcut-o folosind biblioteca descrisă mai sus. Spuneți-mi cum pot vopsi diferite elemente ale hărții în culori diferite? Și dacă este posibil modul de a face harta să determine regiunea vizitatorului site-ului și regiunea corespunzătoare este evidențiată?
Vă mulțumim anticipat pentru răspuns!
Bună ziua!
Am o hartă interactivă, dar nu este adaptivă, cum să o fac adaptabilă?
Articole similare
-
Crearea unui instalator pentru un addon folosind studioul vizual și wix, streamdivision
-
Crearea unui exterior și redare folosind pluginul vray - lecții 3ds max
Trimiteți-le prietenilor: