Cum sa faci un vitezometru animat SVG

A ecartament este un instrument care indică vizual o valoare într-un anumit interval. În computere, a “spațiu pe disc indicator” utilizează un contor pentru a arăta cât spațiu de pe disc este utilizat din totalul disponibil. Măsurătorile au zone sau regiuni din gama lor, fiecare diferențiat prin culoarea proprie. În dezvoltarea front-end, putem folosi Eticheta HTML5 pentru afișarea datelor într-un anumit interval.

În acest post, o vom face Dispozitiv de măsurare SVG de formă semicirculară, și animați-o. Uitați-vă la acest GIF previzualizat care arată cum va funcționa versiunea finală în Firefox:

Contorul lui intervalul este 0-100, și se afișează trei zone egale în galben, albastru și roșu. Puteți modifica intervalul și numărul de zone în funcție de nevoile dvs..

În scopuri explicative, voi efectua calcule manuale și voi utiliza atributele / proprietățile SVG inline în pașii următori.

Demo-ul meu final, cu toate acestea, utilizează CSS și JavaScript pentru calcularea și inserarea proprietăților SVG, pentru ao face mai flexibilă.

1. Desenați un cerc

Să facem un cerc simplu în SVG. HTML5 este nou tag-ul ne permite să adăugăm SVG chiar în codul HTML. În interiorul etichetă, adăugăm Forma SVG ca aceasta:

În CSS, să adăugăm lăţime și înălţime proprietăți la înveliș, ambele mai mari sau egale cu diametrul cercului (300 pixeli în exemplul nostru). De asemenea, trebuie să setăm lățimea și înălțimea #metru element la 100%.

 #wrapper width: 400px; înălțime: 400px;  #meter lățime: 100%; înălțime: 100%;

2. Adăugați contur cercului și eliminați umplerea

Cu ajutorul accident vascular cerebral și accident vascular cerebral lățime Proprietățile SVG adaugă o schemă cercului și folosind umple = "none" de proprietate vom elimina umple cercul, de asemenea.

3. acoperă doar jumătate din cerc

accident vascular cerebral-dasharray Proprietatea SVG creează o schemă întreruptă și ia două valori, bordură lungime și lungimea spațiului.

Pentru conturul semicercului, bordură lungime valoarea trebuie să fie egală cu semi-circumferința cercului, astfel încât linia de acoperire să acopere jumătate din circumferința cercului și lungimea spațiului valoarea trebuie să fie egală sau mai mare decât circumferința rămasă.

Când este mai mult, va fi convertită la circumferința rămasă de browser, deci vom folosi valoarea circumferinței totale pentru lungimea spațiului. În acest fel putem evita calcularea circumferinței rămase.

Să vedem calculele:

$circumferinţă = 2 Ã ?? Â ?? Ã¢Â ?? Â ?? π \times r$

Unde r este raza. Pentru o rază de 150, circumferința este:

$\begin{matrix} circumferinţă = 2 Ã ?? Â ?? Ã¢Â ?? Â ?? π \times 150 \\ circumferinţă = 942.48 \end{matrix}$

Dacă îl împărțim cu 2, obținem 471,24 pentru semi-circumferință, deci valoarea lui accident vascular cerebral-dasharray proprietatea pentru un contur semicircular într-un cerc de rază 150 este 471, 943. Acest semicerc va fi folosit pentru a desemna Zona de Zona Mica a contorului.

După cum vedeți, este cu capul în jos, deci hai să transformăm SVG în sus adăugând transforma Proprietatea CSS cu valoarea rotateX (180deg) la Elementul HTML.

 #meter transform: rotateX (180deg);

4. Adăugați celelalte zone

zona de mijloc (albastru) trebuie să acopere partea ⅔ a semi-cercului, iar ⅔ lui 471 este 314. Deci, să adăugăm un alt cerc SVG-ului nostru utilizând accident vascular cerebral-dasharray proprietate din nou, dar acum cu valoarea de 314, 943.

  < /circle>

zona finală (roșu) trebuie să acopere ultima parte a semi-cercului și ⅓ de 471 este 157, deci vom adăuga această valoare la accident vascular cerebral-dasharray proprietatea celui de-al treilea cerc.

5. Adăugați conturul contorului

Să adăugăm un contur gri la contor pentru a face să arate mai bine. bordură lungime din cercul contur trebuie să fie egal cu semi-circumferința. Am plasat-o înaintea tuturor celorlalte cercuri din cod, așa că va fi redate mai întâi de către browser, și de aceea va fi afișate sub cercurile din regiune pe ecran.

accident vascular cerebral lățime proprietatea trebuie să fie puțin mai mare decât cea a celorlalte cercuri, pentru a da aspectul unei contururi reale.

     < /circle>

Schița se termină

Deoarece conturul nu acoperă capetele semi-cercului, adăugăm de asemenea 2 linii de aproximativ 2px la capete prin adăugarea unui alt cerc cu un bordură lungime de 2px și a lungimea spațiului din semi-circumferință minus 2px. Prin urmare, valoarea accident vascular cerebral-dasharray proprietatea acestui cerc este 2, 469.

Masca

Acum, să adăugăm un alt cerc după zonele joase, medii și înalte. Cercul nou va funcționa ca o mască pentru ascunderea regiunilor zonei inutile când va fi operat ecartamentul.

Proprietățile sale vor fi aceleași cu cele ale cercului conturului, iar culoarea sa accidentală va fi de asemenea gri. Masca va fi redimensionată mai târziu cu Javascript pentru a dezvălui zonele de sub ea ca răspuns la un cursor de intrare.

Codul combinat până în prezent este prezentat mai jos.

Dacă vrem să dezvăluim o regiune sub mască, trebuie să reducem dimensiunea măștii bordură lungime. De exemplu, atunci când valoarea lui accident vascular cerebral-dasharray proprietatea cercului de mască este 157, 943, arcele vor sta în următoarea stare:

Deci, tot ce trebuie să facem acum este să ajustăm accident vascular cerebral-dasharray a mascului folosind JavaScript pentru animație. Dar înainte de a face acest lucru, așa cum am menționat anterior, pentru demo-ul meu final am folosit CSS și JavaScript pentru a calcula și a adăuga majoritatea proprietăților SVG.

Mai jos puteți găsi codul HTML, CSS și JavaScript care conduce la același rezultat ca mai sus.

HTML

Am adaugat o imagine a acului (ecartament-needle.svg), un cursor de distanță (intrare # cursor) la intrarea utilizatorului și o etichetă (etichetă # LBL) pentru a afișa valoarea cursorului în intervalul 0-100.

CSS

Codul CSS de mai jos adaugă regulile de stil către SVG, deoarece formele SVG pot fi elevate în același mod ca și elementele HTML. Dacă doriți să citiți mai multe despre cum să modelați SVG cu CSS, aruncați o privire la acest post. Pentru stilul cursorului, verificați acest post.

 #wrapper position: relative; marja: auto;  #meter lățime: 100%; înălțime: 100%; transform: rotateX (180deg);  .circle fill: none;  .outline, #mask cursă: # F1F1F1; lungimea cursei: 65; . lățimea cursei: 60;  #slider, #lbl poziție: absolută;  #slider cursor: pointer; stânga: 0; marja: auto; dreapta: 0; top: 58%; lățime: 94%;  #lbl culoare-fundal: # 4B4C51; raza de graniță: 2 pixeli; culoare albă; font-family: 'curier nou'; font-size: 15pt; font-weight: bold; umplutură: 4px 4px 2px 4px; drept: -48px; top: 57%;  #meter_needle height: 40%; stânga: 0; marja: auto; poziția: absolută; dreapta: 0; top 10%; transformare-origine: centrul inferior; / * fixare orientare * / transformare: rotire (270deg);

JavaScript

În JavaScript, mai întâi se calculează și se stabilesc dimensiunile ambalajului și ale tuturor arcilor, apoi adăugăm potrivirea accident vascular cerebral-dasharray valori pentru cercuri. După aceea, vom obliga un eveniment personalizat la glisorul pentru a efectua animația.

 / * Setați raza pentru toate cercurile * / var r = 250; var cercuri = document.querySelectorAll ("cerc"); var total_circles = circles.length; pentru (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);

The Custom `range_change_event ()` Funcţie

Comportamentul contorului este efectuat de către range_change_event () funcție personalizată care este responsabilă pentru ajustarea dimensiunii măștii și a animației acului.

Este nevoie de valoarea cursorului (intrarea utilizatorului), care este între 0-100, convertește-o la echivalentul semiperimetric (meter_value) a unei valori între 471-0 (471 este semi-circumferința pentru raza 150), și stabilește acest lucru meter_value dupa cum bordură lungime a mascilor accident vascular cerebral-dasharray proprietate.

range_change_event () funcția personalizată rotește de asemenea acul după ce a convertit intrarea utilizatorului (ajungând în intervalul 0-100) la echivalentul lui de 0-180.

Se adaugă 270 ° în rotația acului în codul de mai sus, deoarece imaginea pe care am folosit-o este un ac în poziție verticală și am trebuit să îl rotesc inițial la 270 ° pentru al face să stea plat în stânga.

În cele din urmă, am obligat range_change_event () funcția la glisorul de distanță, astfel încât contorul de gabarit să poată fi utilizat cu acesta.

Check out Demo sau să aruncați o privire la codul sursă la adresa noastră Depozit Github.