Sådan laver du et animeret SVG-hastighedsmåler

EN målemåler er et værktøj, der visuelt angiver en værdi inden for et givet interval. I computere a “diskpladsindikator” bruger en måler til at vise, hvor meget diskplads der anvendes fra den samlede tilgængelige. Målere har zoner eller regioner på tværs af dens rækkevidde, hver differentieret af sin egen farve. I front-end udvikling kan vi bruge HTML5-tag til at vise data inden for et bestemt område.

I dette indlæg laver vi en SVG gauge meter med halvcirkelform, og animere det. Se et kig på dette eksempel GIF, der viser hvordan den endelige version vil fungere i Firefox:

Måleren er rækkevidde er 0-100, og det viser tre lige zoner i gul, blå og rød. Du kan ændre rækkevidde og nummer på zonerne efter dine behov.

Til forklaring vil jeg udføre manuelle beregninger og bruge inline SVG attributter / egenskaber i de følgende trin.

Min endelige demo bruger dog CSS og JavaScript til beregning og indsættelse af SVG-egenskaber for at gøre det mere fleksibelt.

1. Tegn en cirkel

Lad os tegne en simpel cirkel i SVG. HTML5 er nyt tag giver os mulighed for at tilføje SVG lige ind i HTML-koden. Inde i tag, tilføjer vi SVG form sådan:

I CSS, lad os tilføje bredde og højde Egenskaber til omslaget, begge større end eller lig med cirklens diameter (det er 300 px i vores eksempel). Vi skal også indstille bredden og højden af #måler element til 100%.

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

2. Tilføj omrids til cirklen og fjern fill

Med hjælp fra slag og slagtilfælde bredde SVG egenskaber vi tilføjer en omrids til cirklen, og ved at bruge fylde = "none" ejendom vi fjerner også cirkelens udfyldning.

3. dækker kun halvdelen af cirklen

Det slagtilfælde-dasharray SVG-egenskaben skaber en stiplede kontur og tager to værdier, bindestreg længde og afstandslængde.

For halvcirkelplanen, den bindestreg længde værdien skal være lig med cirkelens halvomkreds, således at bindestreg dækker halvdelen af cirkelens omkreds og den afstandslængde værdibehov skal være lig med eller mere end den resterende omkreds.

Når det er mere, vil det blive konverteret til den resterende omkreds af browseren, derfor bruger vi den fulde omkredsværdi for afstandslængde. På den måde kan vi undgå at beregne den resterende omkreds.

Lad os se beregningerne:

$omkreds = 2 Â ?? â ?? Ã¢Â ?? â ?? π \times r$

hvor r er radius. For en radius på 150 er omkredsen:

$\begin{matrix} omkreds = 2 Â ?? â ?? Ã¢Â ?? â ?? π \times 150 \\ omkreds = 942,48 \end{matrix}$

Hvis vi deler det med 2, får vi 471.24 for halvomkreds, så værdien af slagtilfælde-dasharray Egenskaben for en halvcirkelplan i en radius cirkel på 150 cirkler er 471, 943. Denne halvcirkel vil blive brugt til at betegne måleområdet med lav rækkevidde.

Som du kan se, er det på hovedet, så lad os slå SVG op ved at tilføje omdanne CSS ejendom med værdien af rotateX (180deg) til HTML-element.

 #meter transform: rotateX (180deg);

4. Tilføj de andre zoner

Det midterste zone (blå) skal dække halvdelen af halvcirklen, og ⅔ af 471 er 314. Så lad os tilføje en anden cirkel til vores SVG ved hjælp af slagtilfælde-dasharray ejendom igen, men nu med værdien af 314, 943.

  < /circle>

Det sidste zone (rød) skal dække den sidste ⅓ del af halvcirklen, og ⅓ af 471 er 157, så vi vil tilføje denne værdi til slagtilfælde-dasharray ejendom i den tredje cirkel.

5. Tilføj Meter Outline

Lad os tilføje en grå omrids til måleren for at få det til at se bedre ud. Det bindestreg længde af omrids cirklen skal være lig med halvomkredsen. Vi placerer det før alle de andre kredse i koden, så det bliver gjort først af browseren, og derfor vil det være vises under regionens cirkler på skærmen.

Det slagtilfælde bredde Ejendommen skal være lidt større end for de andre kredse, for at give udseendet af en reel skitse.

     < /circle>

Outline Ends

Da oversigten ikke dækker halvcirkelens ender, tilføjer vi også 2 linjer på ca. 2px til enderne ved at tilføje en anden cirkel med en bindestreg længde af 2px og a afstandslængde af halvomkredsen minus 2px. Derfor er værdien af slagtilfælde-dasharray egenskaben af denne cirkel er 2, 469.

Maske

Lad os nu tilføje en anden cirkel efter de lave, gennemsnitlige og højkvalitetszoner. Den nye cirkel fungerer som en maske for at skjule de unødvendige zoneområder, når målemåleren skal betjenes.

Dens egenskaber vil være de samme som i cirkelrunden, og dens slagfarve vil også være grå. Masken vil senere blive ændret med Javascript for at afsløre zoner under den som svar på en indgangsskyder.

Den kombinerede kode hidtil er som nedenfor.

Hvis vi vil afsløre en region under masken, skal vi reducere størrelsen på masken bindestreg længde. For eksempel, når værdien af slagtilfælde-dasharray Maskens cirkel er egenskaben 157, 943, buerne vil stå i følgende tilstand:

Så alt hvad vi skal gøre nu er at justere slagtilfælde-dasharray af masken ved hjælp af JavaScript til animation. Men før vi gør det, som jeg tidligere har nævnt, brugte jeg CSS og JavaScript til at beregne og tilføje de fleste SVG-egenskaber til min endelige demo.

Nedenfor finder du HTML, CSS og JavaScript-koden, der fører til det samme resultat som ovenfor.

HTML

Jeg tilføjede et nålbillede (gauge-needle.svg), en række skyder (skyderen # input) til brugerens input og en etiket (etiket # LBL) for at vise skyderenværdien i området 0-100.

CSS

CSS-koden nedenfor tilføjer stilregler til SVG, da SVG-former kan styles på samme måde som HTML-elementer. Hvis du vil læse mere om, hvordan du stiler SVG med CSS, skal du kigge på dette indlæg. Til styling skyderen, tjek dette indlæg.

 #wrapper position: relative; margen: auto;  # meter bredde: 100%; højde: 100%; transformere: rotateX (180deg);  .circle fill: none;  .outline, #mask slag: # F1F1F1; slagbredde: 65;  .range slagbredde: 60;  #slider, #lbl position: absolute;  #slider cursor: pointer; venstre: 0; margen: auto; højre: 0; top: 58%; bredde: 94%;  #lbl baggrundsfarve: # 4B4C51; grænse-radius: 2px; farve: hvid; font-family: 'courier new'; skrifttypestørrelse: 15pt; font-weight: bold; polstring: 4px 4px 2px 4px; højre: -48px; top: 57%;  #meter_needle højde: 40%; venstre: 0; margen: auto; position: absolut; højre: 0; Top 10%; transformation-oprindelse: bottom center; / * orienteringsfix * / transform: roter (270deg);

JavaScript

I JavaScript beregner og beregner vi først indpakningens dimensioner og alle buer, så tilføjer vi det rigtige slagtilfælde-dasharray værdier til cirklerne. Derefter vil vi binde en brugerdefineret begivenhed til glidebryderen for at udføre animationen.

 / * Indstil radius for alle cirkler * / var r = 250; varcirkler = document.querySelectorAll ('cirkel'); var total_circles = cirkler.længde; 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);

Den tilpassede `range_change_event ()` Fungere

Meterens adfærd udføres af range_change_event () brugerdefineret funktion, der er ansvarlig for justeringen af maskestørrelsen og nålens animation.

Det tager gliderenværdien (brugerindgang), som er mellem 0-100, konverterer den til den halve omkredsækvivalent (meter_value) af en værdi mellem 471-0 (471 er halvomkredsen for radius 150), og angiver det meter_value som bindestreg længde af maskens slagtilfælde-dasharray ejendom.

Det range_change_event () brugerdefinerede funktion roterer også nålen efter konvertering af brugerindgangen (kommer i 0-100 rækkevidden) til sin grad svarende til 0-180.

270 ° tilføjes til nålens rotation i ovennævnte kode, fordi det billede, jeg brugte, er af en stående nål, og jeg var nødt til at rotere den 270 ° for første gang for at få den til at ligge fladt til venstre.

Endelig bundet jeg range_change_event () funktionen til glidebryderen, så målemåleren kan betjenes med den.

Tjek den demo eller kig på kildekoden på vores Github depot.