Πώς να κάνετε ένα κινούμενο ταχύμετρο SVG

ΕΝΑ μετρητή μετρητή είναι ένα εργαλείο που υποδηλώνει οπτικά μια τιμή εντός ενός δεδομένου εύρους. Στους υπολογιστές, α “δείκτη χώρου στο δίσκο” χρησιμοποιεί ένα μετρητή μετρητή για να δείξει πόσο χώρο στο δίσκο χρησιμοποιείται από το σύνολο διαθέσιμων. Οι μετρητές έχουν ζώνες ή περιοχές σε όλη την έκτασή της, η καθεμία διαφοροποιείται με το δικό της χρώμα. Στην ανάπτυξη του front-end, μπορούμε να χρησιμοποιήσουμε το Ετικέτα HTML5 για την εμφάνιση δεδομένων εντός συγκεκριμένου εύρους.

Σε αυτή τη θέση, θα κάνουμε ένα SVG μετρητή μέτρησης ημικυκλικού σχήματος, και να το ζωντανέψουν. Ρίξτε μια ματιά σε αυτό το προεπισκόπηση GIF που εμφανίζεται πώς θα λειτουργήσει η τελική έκδοση στον Firefox:

Το μετρητή εύρος τιμών είναι 0-100, και εμφανίζεται τρεις ίσες ζώνες σε κίτρινο, μπλε και κόκκινο. Μπορείτε να αλλάξετε την εμβέλεια και τον αριθμό των ζωνών σύμφωνα με τις ανάγκες σας.

Για λόγους επεξήγησης, θα εκτελέσω χειροκίνητους υπολογισμούς και θα χρησιμοποιήσω τα ενσωματωμένα χαρακτηριστικά / ιδιότητες SVG στα παρακάτω βήματα.

Το τελευταίο demo μου, ωστόσο, χρησιμοποιεί CSS και JavaScript για τον υπολογισμό και την εισαγωγή των ιδιοτήτων SVG προκειμένου να γίνει πιο ευέλικτο.

1. Σχεδιάστε έναν κύκλο

Ας σχεδιάσουμε έναν απλό κύκλο στο SVG. Το νέο HTML5 ετικέτα μας επιτρέπει να προσθέσουμε SVG δεξιά στον κώδικα HTML. μεσα στην ετικέτα, προσθέτουμε το Το σχήμα SVG είναι το εξής:

Στο CSS, ας προσθέσουμε πλάτος και ύψος ιδιότητες στο περιτύλιγμα, τόσο μεγαλύτερο όσο και ίσο με τη διάμετρο του κύκλου (είναι 300px στο παράδειγμά μας). Πρέπει επίσης να ρυθμίσουμε το πλάτος και το ύψος του #μετρητής στοιχείο στο 100%.

 #wrapper πλάτος: 400px; ύψος: 400px;  #meter πλάτος: 100%; ύψος: 100%. 

2. Προσθέστε περίγραμμα στον κύκλο και αφαιρέστε τη γέμιση

Με τη βοήθεια του κτύπημα και πλάτος διαδρομής Οι ιδιότητες SVG προσθέτουμε ένα περίγραμμα στον κύκλο και χρησιμοποιώντας το fill = "καμία" ιδιότητα που αφαιρούμε το γέμισμα του κύκλου επίσης.

3. καλύψτε μόνο το ήμισυ του κύκλου

ο εγκεφαλικό επεισόδιο Η ιδιότητα SVG δημιουργεί ένα διακεκομμένο περίγραμμα και παίρνει δύο τιμές, μήκος παύλας και διάκενο μήκους.

Για το περίγραμμα ημικυκλίου, το μήκος παύλας η τιμή πρέπει να είναι ίση με την ημι-περιφέρεια του κύκλου, έτσι ώστε η παύλα να καλύπτει το ήμισυ της περιφέρειας του κύκλου και η διάκενο μήκους η αξία πρέπει να είναι ίση ή μεγαλύτερη από την υπόλοιπη περίμετρο.

Όταν είναι περισσότερο, θα μετατραπεί στην υπόλοιπη περιφέρεια από το πρόγραμμα περιήγησης, επομένως θα χρησιμοποιήσουμε την τιμή της πλήρους περιφέρειας για το διάκενο μήκους. Με αυτόν τον τρόπο μπορούμε να αποφύγουμε τον υπολογισμό της υπόλοιπης περιφέρειας.

Ας δούμε τους υπολογισμούς:

$\mathrm{\pi \epsilon \rho \iota \phi έ\rho \epsilon \iota \alpha }=2Ã\; ??\; Â\; ??\; âÂ\; ??\; ??\pi \times r$

όπου r είναι η ακτίνα. Για ακτίνα 150, η περιφέρεια είναι:

$\begin{array}{}\mathrm{\pi \epsilon \rho \iota \phi έ\rho \epsilon \iota \alpha }=2Ã\; ??\; Â\; ??\; âÂ\; ??\; ??\pi \times \mathrm{150}\\ \mathrm{\pi \epsilon \rho \iota \phi έ\rho \epsilon \iota \alpha }=942.48\end{array}$

Αν το χωρίσουμε με 2, παίρνουμε 471,24 για ημι-περιφέρεια, έτσι η αξία του εγκεφαλικό επεισόδιο ιδιότητα για ένα ημικυκλικό περίγραμμα σε κύκλο ακτίνας 150 είναι 471, 943. Αυτός ο ημικύκλιος θα χρησιμοποιηθεί για να δηλώσει τη ζώνη χαμηλής εμβέλειας του μετρητή.

Όπως μπορείτε να δείτε, είναι ανάποδα, οπότε ας γυρίσουμε το SVG με την προσθήκη του μεταμορφώνω CSS ιδιότητα με την τιμή του rotateX (180deg) στο Στοιχείο HTML.

 #meter μετασχηματισμός: rotateX (180deg); 

4. Προσθέστε τις άλλες ζώνες

ο μεσαία ζώνη (μπλε) πρέπει να καλύπτει το τμήμα of του ημικυκλίου και το ⅔ του 471 είναι 314. Έτσι, ας προσθέσουμε έναν άλλο κύκλο στο SVG μας χρησιμοποιώντας το εγκεφαλικό επεισόδιο ιδιοκτησία πάλι, αλλά τώρα με την αξία του 314, 943.

  < /circle>  

ο τελική ζώνη (κόκκινο) πρέπει να καλύπτει το τελευταίο ⅓ μέρος του ημικυκλίου και ⅓ του 471 είναι 157, οπότε θα προσθέσουμε αυτήν την τιμή στο εγκεφαλικό επεισόδιο ιδιότητα του τρίτου κύκλου.

5. Προσθέστε το περίγραμμα του μετρητή

Ας προσθέσουμε ένα γκρι περίγραμμα στο μετρητή για να το φανεί καλύτερα. ο μήκος παύλας του κύκλου περιγράμματος πρέπει να είναι ίσο με την ημι-περιφέρεια. Το τοποθετούμε πριν από όλους τους άλλους κύκλους στον κώδικα, έτσι ώστε να είναι που έγιναν πρώτα από το πρόγραμμα περιήγησης, και ως εκ τούτου θα είναι εμφανίζονται κάτω από τους κύκλους της περιοχής στην οθόνη.

ο πλάτος διαδρομής η ιδιοκτησία πρέπει να είναι λίγο μεγαλύτερη από αυτή των άλλων κύκλων, για να δώσει την εμφάνιση ενός πραγματικού περιγράμματος.

     < /circle>      

Το περίγραμμα τελειώνει

Καθώς το περίγραμμα δεν καλύπτει τα άκρα του ημικυκλίου, προσθέτουμε επίσης 2 γραμμές περίπου 2px προς τα άκρα προσθέτοντας έναν άλλο κύκλο με ένα μήκος παύλας από 2px και a διάκενο μήκους της ημι-περιφέρειας μείον 2px. Συνεπώς, η αξία του εγκεφαλικό επεισόδιο ιδιότητα αυτού του κύκλου είναι 2, 469.

Μάσκα

Τώρα, προσθέστε έναν άλλο κύκλο μετά τις ζώνες χαμηλής, μέσης και υψηλής εμβέλειας. Ο νέος κύκλος θα λειτουργήσει ως μάσκα για την απόκρυψη των περιττών περιοχών ζώνης όταν θα λειτουργήσει ο μετρητής μετρητών.

Οι ιδιότητές του θα είναι οι ίδιες με εκείνες του κύκλου περιγράμματος και το χρώμα του εγκεφαλικού επεισοδίου θα είναι επίσης γκρίζο. Η μάσκα θα αλλάξει αργότερα με το Javascript για να αποκαλύψει τις ζώνες κάτω από αυτό σε απάντηση σε ένα ρυθμιστικό εισόδου.

Ο συνδυασμένος κώδικας μέχρι τώρα είναι όπως παρακάτω.

Αν θέλουμε να αποκαλύψουμε μια περιοχή κάτω από τη μάσκα, πρέπει να μειώσουμε το μέγεθος της μάσκας μήκος παύλας. Για παράδειγμα, όταν η τιμή του εγκεφαλικό επεισόδιο ιδιότητα του κύκλου μάσκας είναι 157, 943, τα τόξα θα σταθούν στην ακόλουθη κατάσταση:

Επομένως, το μόνο που πρέπει να κάνουμε τώρα είναι να προσαρμόσουμε το εγκεφαλικό επεισόδιο της μάσκας χρησιμοποιώντας JavaScript για κινούμενα σχέδια. Αλλά πριν το κάνουμε αυτό, όπως ανέφερα προηγουμένως, για την τελευταία μου επίδειξη χρησιμοποίησα το CSS και το JavaScript για να υπολογίσω και να προσθέσω τις περισσότερες από τις ιδιότητες του SVG.

Παρακάτω μπορείτε να βρείτε τους κώδικες HTML, CSS και JavaScript που οδηγούν στο ίδιο αποτέλεσμα όπως παραπάνω.

HTML

Προστέθηκα μια εικόνα βελόνας (gauge-needle.svg), ένα ρυθμιστικό εύρους (είσοδος # ρυθμιστικό) στην είσοδο χρήστη και μια ετικέτα (ετικέτα # lbl) για να εμφανιστεί η τιμή του ρυθμιστή στην περιοχή 0-100.

    0 
 

CSS

Ο παρακάτω κώδικας CSS προσθέτει κανόνες στυλ στο SVG, καθώς τα σχήματα SVG μπορούν να σχεδιαστούν με τον ίδιο τρόπο όπως τα στοιχεία HTML. Αν θέλετε να διαβάσετε περισσότερα σχετικά με τον τρόπο μορφοποίησης του SVG με CSS, ρίξτε μια ματιά σε αυτή τη θέση. Για το styling του ρυθμιστικού, δείτε αυτό το post.

 #wrapper position: relative; περιθώριο: αυτόματη;  #meter πλάτος: 100%; ύψος: 100%. μετασχηματισμός: rotateX (180deg);  .cyrcle fill: none;  .outline, #mask εγκεφαλικό: # F1F1F1; πλάτος διαδρομής: 65; . το stroke-width: 60;  #slider, #lbl θέση: απόλυτη;  #slider δρομέας: δείκτης; αριστερά: 0; περιθώριο: αυτόματη; δεξιά: 0; κορυφή: 58%. πλάτος: 94%.  #lbl χρώμα-φόντου: # 4B4C51; ακτίνα ακτίνων: 2px; άσπρο χρώμα; γραμματοσειρά-οικογένεια: 'courier new'; μέγεθος γραμματοσειράς: 15pt; γραμματοσειρά-βάρος: έντονα. padding: 4px 4px 2px 4px; δεξιά: -48px; κορυφή: 57%.  #meter_needle ύψος: 40%; αριστερά: 0; περιθώριο: αυτόματη; θέση: απόλυτη; δεξιά: 0; κορυφή: 10%; μετασχηματισμού-προέλευσης: κέντρο πυθμένα. / * καθορισμός προσανατολισμού * / μετασχηματισμός: περιστροφή (270deg); 

JavaScript

Στη JavaScript, πρώτα υπολογίζουμε και ορίζουμε τις διαστάσεις του περιτυλίγματος και όλων των τόξων, και στη συνέχεια προσθέτουμε τις κατάλληλες εγκεφαλικό επεισόδιο τιμές στους κύκλους. Μετά από αυτό, θα δεσμευτούμε ένα προσαρμοσμένο συμβάν στο ρυθμιστικό εύρους για να εκτελέσουμε την κινούμενη εικόνα.

 / * Ρυθμίστε την ακτίνα για όλους τους κύκλους * / var r = 250; var κύκλοι = document.querySelectorAll ('κύκλος'); var total_circles = circles.length; για (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); 

Το έθιμο range_change_event () Λειτουργία

Η συμπεριφορά του μετρητή πραγματοποιείται από το range_change_event () προσαρμοσμένη λειτουργία που είναι υπεύθυνη για την προσαρμογή του μεγέθους της μάσκας και της κίνησης της βελόνας.

Παίρνει την τιμή ολισθητήρα (είσοδος χρήστη) η οποία είναι μεταξύ 0-100, μετατρέπει την ισοδύναμη ημι-περιφέρειας (meter_value) μιας τιμής μεταξύ 471-0 (471 είναι η ημι-περιφέρεια για την ακτίνα 150) και θέτει αυτό meter_value ως μήκος παύλας της μάσκας εγκεφαλικό επεισόδιο ιδιοκτησία.

ο range_change_event () η προσαρμοσμένη λειτουργία περιστρέφει επίσης τη βελόνα μετά τη μετατροπή της εισόδου του χρήστη (που έρχεται στην περιοχή 0-100) στο βαθμό που αντιστοιχεί στο 0-180.

270 ° προστίθεται στην περιστροφή της βελόνας στον παραπάνω κώδικα επειδή η εικόνα που χρησιμοποίησα είναι μιας όρθιας βελόνας και έπρεπε να την περιστρέψω αρχικά 270 ° για να την κάνω να είναι επίπεδη στα αριστερά της.

Τέλος, δεσμεύτηκα range_change_event () λειτουργήστε με το ρυθμιστικό εύρους τιμών, έτσι ώστε ο μετρητής μέτρησης να μπορεί να λειτουργήσει μαζί του.

Ελέγξτε το διαδήλωση ή να ρίξετε μια ματιά στον πηγαίο κώδικα στο δικό μας Αποθήκη Github.