Hvordan lage et animert SVG-hastighetsmåler

EN måleinstrument er et verktøy som visuelt indikerer en verdi innenfor et gitt område. I datamaskiner, a “diskplassindikator” bruker en måler for å vise hvor mye diskplass som er brukt fra den totale tilgjengelige. Måler har soner eller regioner på tvers av sitt område, hver differensiert av sin egen farge. I front-end-utviklingen kan vi bruke HTML5-tag for å vise data innenfor et bestemt område.

I dette innlegget skal vi lage en SVG gauge meter med halvcirkulær form, og animere det. Ta en titt på denne forhåndsvisningen GIF som viser hvordan den endelige versjonen vil fungere i Firefox:

Måleren er rekkevidde er 0-100, og det vises tre like soner i gul, blå og rød. Du kan endre rekkevidde og antall soner etter dine behov.

Forklaringsformål, jeg utfører manuelle beregninger, og bruker inline SVG attributter / egenskaper i de følgende trinnene.

Min siste demo bruker imidlertid CSS og JavaScript for beregning og innføring av SVG egenskaper for å gjøre det mer fleksibelt.

1. Tegn en sirkel

La oss tegne en enkel sirkel i SVG. HTML5 er nytt tag lar oss legge til SVG rett inn i HTML-koden. Inne i tag, legger vi til SVG formen slik:

I CSS, la oss legge til bredde og høyde Egenskaper til omslaget, begge større enn eller lik diameteren til sirkelen (det er 300px i vårt eksempel). Vi må også sette bredden og høyden på #måler element til 100%.

 #wrapper width: 400px; høyde: 400px;  # meter bredde: 100%; høyde: 100%; 

2. Legg til oversikt over sirkelen og fjern fyll

Med hjelp av hjerneslag og slag-bredde SVG egenskaper vi legger til en oversikt over sirkelen, og ved å bruke fylle = "ingen" eiendom vi fjerner sirkelens fyll også.

3. Dekker bare halvparten av sirkelen

De slag-dasharray SVG-egenskapen oppretter en stiplede oversikt, og tar to verdier, dash lengde og gap lengde.

For halvcirkelplanen, den dash lengde verdien må være lik sirkelens halvomkrets, slik at dashet dekker halvparten av sirkelens omkrets, og gap lengde Verdien må være lik eller mer enn den gjenværende omkretsen.

Når det er mer, vil det bli konvertert til den gjenværende omkretsen av nettleseren, derfor vil vi bruke hele omkretsverdien for gap lengde. På denne måten kan vi unngå å beregne gjenværende omkrets.

La oss se beregningene:

$\mathrm{omkrets}=2Ã\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi xr$

hvor r er radiusen. For en radius på 150 er omkretsen:

$\begin{array}{}\mathrm{omkrets}=2Ã\; ??\; Â\; ??\; âÂ\; ??\; Â\; ??\pi x\mathrm{150}\\ \mathrm{omkrets}=\mathrm{942,48}\end{array}$

Hvis vi deler det med 2, får vi 471.24 for halvomkrets, så verdien av slag-dasharray Egenskapen for en halvcirkelplan i en radiuskrets på 150 radius er 471, 943. Denne halvsirkelen vil bli brukt til å betegne måleområdet med lav rekkevidde.

Som du kan se, er det opp ned, så la oss slå SVG opp ved å legge til forvandle CSS eiendom med verdien av rotateX (180 grader) til HTML-element.

 #meter transform: rotateX (180deg); 

4. Legg til de andre sonene

De midt sone (blå) må dekke halvdelen av halvcirkelen, og ⅔ av 471 er 314. Så la vi legge til en annen sirkel til SVG ved å bruke slag-dasharray eiendom igjen, men nå med verdien av 314, 943.

  < /circle>  

De siste sone (rød) må dekke den siste ⅓ delen av halvcirkelen, og ⅓ av 471 er 157, så vi vil legge til denne verdien til slag-dasharray eiendom i den tredje sirkelen.

5. Legg til målmåleren

La oss legge til en grå oversikt til måleren for å få det til å se bedre ut. De dash lengde av omriss sirkelen må være lik semi-omkretsen. Vi plasserer den før alle de andre kretsene i koden, slik at den blir gjengis først av nettleseren, og derfor vil det være vises under regionens kretser på skjermen.

De slag-bredde Eiendom må være litt større enn for de andre kretsene, for å gi utseendet til en ekte oversikt.

     < /circle>      

Outline Ends

Da omrisset ikke dekker endene på halvcirkelen, legger vi også til 2 linjer på ca. 2px til enden ved å legge til en annen sirkel med en dash lengde av 2px og a gap lengde av halvomkretsen minus 2px. Derfor verdien av slag-dasharray Egenskapen til denne kretsen er 2, 469.

Maske

La oss legge til en annen sirkel etter de lave, gjennomsnittlige og høye områdene. Den nye sirkelen vil fungere som en maske for å skjule de unødvendige sonegruppene når målemåleren skal betjenes.

Egenskapene sine vil være de samme som i oversiktskirken, og dens slagfarve vil også være grå. Masken vil senere bli endret med Javascript for å avdekke sonene under det som svar på en inngangsskyve.

Den kombinerte koden så langt er som nedenfor.

Hvis vi vil avsløre en region under masken, må vi redusere størrelsen på masken dash lengde. For eksempel når verdien av slag-dasharray egenskapen til maske sirkelen er 157, 943, buene vil stå i følgende tilstand:

Så, alt vi trenger å gjøre nå er å justere slag-dasharray av masken ved hjelp av JavaScript for animasjon. Men før vi gjør det, som jeg tidligere nevnte, brukte jeg CSS og JavaScript for å beregne og legge til de fleste av SVG-egenskapene.

Nedenfor finner du HTML, CSS og JavaScript-koden som fører til det samme resultatet som ovenfor.

HTML

Jeg la til et nålbilde (for måler needle.svg), en glidebryter (inngang # skyve) til brukerinngangen, og en etikett (etiketten # Lbl) for å vise skyveverdien i området 0-100.

    0 
 

CSS

CSS-koden nedenfor legger til stilregler til SVG, da SVG-former kan styles på samme måte som HTML-elementer. Hvis du vil lese mer om hvordan du stiler SVG med CSS, ta en titt på dette innlegget. For styling skyvekontrollen, sjekk ut dette innlegget.

 #wrapper posisjon: relative; margin: auto;  # meter bredde: 100%; høyde: 100%; transformere: rotateX (180deg);  .circle fill: none;  .outline, #mask slag: # F1F1F1; slagbredde: 65;  .range slagbredde: 60;  #slider, #lbl posisjon: absolutt;  #slider markør: pointer; venstre: 0; margin: auto; høyre: 0; topp: 58%; bredde: 94%;  #lbl bakgrunnsfarge: # 4B4C51; border-radius: 2px; farge: hvit; font-familie: 'budsjett ny'; skriftstørrelse: 15pt; font-weight: bold; polstring: 4px 4px 2px 4px; høyre: -48px; topp: 57%;  # meters_needle høyde: 40%; venstre: 0; margin: auto; posisjon: absolutt; høyre: 0; topp 10%; transformasjons-opprinnelse: bunnsenter; / * orienteringsrett * / transform: roter (270deg); 

Javascript

I JavaScript beregner vi først og sett dimensjonene til wrappen og alle buer, så legger vi til riktig slag-dasharray verdier til kretsene. Etter det vil vi være bindende en tilpasset begivenhet til glidebryteren for å utføre animasjonen.

 / * Angi radius for alle sirkler * / var r = 250; var sirkler = document.querySelectorAll ('sirkel'); var total_circles = sirkler.length; for (var i = 0; i < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event); 

Tollen range_change_event () Funksjon

Meterens oppførsel utføres av range_change_event () tilpasset funksjon som er ansvarlig for justering av maskestørrelsen og nålens animasjon.

Det tar glidebryteren (brukerinngang) som er mellom 0-100, konverterer den til halvomkretsen tilsvarende (meter_value) med en verdi mellom 471-0 (471 er semi-omkretsen for radius 150), og angir det meter_value som dash lengde av maskens slag-dasharray eiendom.

De range_change_event () Tilpasset funksjon roterer også nålen etter at konvertering av brukerinngangen (kommer i 0-100-serien) til sin grad tilsvarende 0-180.

270 ° legges til nålens rotasjon i koden ovenfor, fordi bildet jeg brukte, var av en opprettholdt nål, og jeg måtte først rotere den 270 ° for å la den ligge flatt til venstre.

Til slutt bundet jeg range_change_event () Fungerer til rekkeviddekontrollen, slik at målemåleren kan betjenes med den.

Sjekk ut demo eller ta en titt på kildekoden på vår Github depot.