วิธีการสร้าง Speedometer SVG แบบเคลื่อนไหว

มาตรวัด เป็นเครื่องมือที่บ่งบอกถึงค่าภายในช่วงที่กำหนด ในคอมพิวเตอร์ “ไฟแสดงสถานะพื้นที่ดิสก์” ใช้เกจมาตรวัดเพื่อแสดงจำนวนเนื้อที่ดิสก์ที่ใช้จากผลรวมที่มี มาตรวัดมีเขตหรือภูมิภาคในช่วงของแต่ละช่วงแยกตามสีของมัน ในการพัฒนาส่วนหน้าเราสามารถใช้ แท็ก HTML5 เพื่อแสดงข้อมูลภายในช่วงที่ระบุ.

ในโพสต์นี้เราจะทำ SVG เกจวัดรูปร่างครึ่งวงกลม, และทำให้เคลื่อนไหว ดูตัวอย่าง GIF นี้ที่แสดง รุ่นสุดท้ายจะทำงานใน Firefox อย่างไร:

ค่ามิเตอร์ ช่วงคือ 0-100, และมันจะแสดง สามโซนเท่ากัน ในสีเหลืองสีน้ำเงินและสีแดง คุณสามารถเปลี่ยนช่วงและจำนวนของโซนตามความต้องการของคุณ.

เพื่อวัตถุประสงค์ในการอธิบายฉันจะทำการคำนวณด้วยตนเองและใช้คุณสมบัติ / คุณสมบัติ SVG แบบอินไลน์ในขั้นตอนต่อไปนี้.

อย่างไรก็ตามการสาธิตขั้นสุดท้ายของฉันใช้ CSS และ JavaScript สำหรับการคำนวณและการแทรกคุณสมบัติ SVG เพื่อให้มีความยืดหยุ่นมากขึ้น.

1. วาดวงกลม

ลองวาดวงกลมอย่างง่าย ๆ ใน SVG ใหม่ของ HTML5 แท็กช่วยให้เราสามารถเพิ่ม SVG ลงในรหัส HTML ได้ ข้างใน แท็กเราเพิ่ม รูปร่าง SVG เช่นนี้:

ใน CSS มาเพิ่มกัน ความกว้าง และ ความสูง คุณสมบัติของเสื้อคลุมทั้งสองมากกว่าหรือเท่ากับเส้นผ่าศูนย์กลางของวงกลม (เป็น 300px ในตัวอย่างของเรา) เรายังต้องตั้งค่าความกว้างและความสูงของ #เมตร องค์ประกอบถึง 100%.

 #wrapper width: 400px; ความสูง: 400px;  #meter width: 100%; ความสูง: 100%; 

2. เพิ่มเค้าร่างลงในวงกลมและลบการเติม

ด้วยความช่วยเหลือของ ลากเส้น และ โรคหลอดเลือดสมองที่มีความกว้าง คุณสมบัติ SVG เราเพิ่มเค้าร่างลงในวงกลมและโดยใช้ กรอก = "ไม่มี" เราลบการเติมของวงกลมออกเช่นกัน.

3. ครอบคลุมเพียงครึ่งหนึ่งของวงกลม

จังหวะ dasharray คุณสมบัติ SVG สร้างร่างที่มีเส้นประและรับสองค่า, ความยาวประ และ ความยาวของช่องว่าง.

สำหรับโครงร่างครึ่งวงกลม ความยาวประ ค่าต้องเท่ากับวงรอบครึ่งของวงกลมดังนั้นเส้นประจะครอบคลุมครึ่งหนึ่งของเส้นรอบวงของวงกลมและ ความยาวของช่องว่าง ค่าต้องเท่ากับหรือมากกว่ารอบที่เหลือ.

เมื่อมีมากกว่านั้นเบราว์เซอร์จะถูกแปลงเป็นเส้นรอบวงที่เหลือดังนั้นเราจะใช้ค่าเส้นรอบวงแบบเต็มสำหรับ ความยาวของช่องว่าง. วิธีนี้เราสามารถหลีกเลี่ยงการคำนวณเส้นรอบวงที่เหลือ.

ลองดูการคำนวณ:

$\mathrm{เส้นรอบวง}=2â\; ??\; ย\; ??\; âÂÂ\; ??\; ??\pi \times R$

ที่ไหน R คือรัศมี สำหรับรัศมี 150 เส้นรอบวงคือ:

$\begin{array}{}\mathrm{เส้นรอบวง}=2â\; ??\; ย\; ??\; âÂÂ\; ??\; ??\pi \times \mathrm{150}\\ \mathrm{เส้นรอบวง}=942.48\end{array}$

หากเราหารมันด้วย 2 เราจะได้ 471.24 สำหรับเส้นรอบวงดังนั้นค่าของ จังหวะ dasharray คุณสมบัติสำหรับเค้าร่างครึ่งวงกลมใน 150 รัศมีวงกลมคือ 471, 943. ครึ่งวงกลมนี้จะถูกใช้เพื่อแสดงถึง Low Range Zone ของเครื่องวัด.

อย่างที่คุณเห็นมันกลับหัวลงดังนั้นลองเปลี่ยน SVG ขึ้นมาด้วยการเพิ่ม แปลง คุณสมบัติ CSS พร้อมค่า rotateX (180deg) ไปที่ องค์ประกอบ HTML.

 #meter transform: rotateX (180deg); 

4. เพิ่มโซนอื่น ๆ

โซนกลาง (สีน้ำเงิน) ต้องครอบคลุมส่วน⅔ของครึ่งวงกลมและ⅔ของ 471 คือ 314 ดังนั้นเราจะเพิ่มอีกหนึ่งวงกลมลงใน SVG ของเราโดยใช้ จังหวะ dasharray อีกครั้ง แต่ตอนนี้มีค่า 314, 943.

  < /circle>  

โซนสุดท้าย (สีแดง) ต้องครอบคลุมส่วน last สุดท้ายของครึ่งวงกลมและ 47 ของ 471 คือ 157 ดังนั้นเราจะเพิ่มค่านี้ลงใน จังหวะ dasharray คุณสมบัติของวงกลมที่สาม.

5. เพิ่มโครงร่าง Meter

ลองเพิ่มโครงร่างสีเทาลงในมิเตอร์เพื่อให้ดูดีขึ้น ความยาวประ ของวงกลมเค้าร่างจะต้องเท่ากับครึ่งวงกลม เราวางมันก่อนวงกลมอื่น ๆ ทั้งหมดในรหัสเพื่อที่จะเป็น แสดงผลครั้งแรกโดยเบราว์เซอร์, และดังนั้นจะเป็น แสดงใต้วงกลมภูมิภาค บนหน้าจอ.

โรคหลอดเลือดสมองที่มีความกว้าง สถานที่ให้บริการจะต้องมีขนาดใหญ่กว่าของวงกลมอื่น ๆ เล็กน้อยเพื่อให้ลักษณะของร่างที่แท้จริง.

     < /circle>      

โครงร่างสิ้นสุด

เนื่องจากโครงร่างไม่ครอบคลุมถึงจุดสิ้นสุดของครึ่งวงกลมเราจึงเพิ่ม 2 บรรทัดประมาณ 2px ลงในส่วนท้ายด้วยการเพิ่มวงกลมอีกวงด้วย ความยาวประ จาก 2px และ a ความยาวของช่องว่าง ของเส้นรอบวงลบ 2px ดังนั้นคุณค่าของ จังหวะ dasharray คุณสมบัติของวงกลมนี้คือ 2, 469.

หน้ากาก

ทีนี้ลองเพิ่มอีกหนึ่งวงกลมหลังจากโซนต่ำ, ค่าเฉลี่ยและช่วงสูง วงกลมใหม่จะทำหน้าที่เป็นหน้ากากเพื่อซ่อนบริเวณโซนที่ไม่จำเป็นเมื่อมีการใช้มาตรวัดเกจ.

คุณสมบัติของมันจะเหมือนกับวงกลมของโครงร่างและสีของมันก็จะเป็นสีเทา รูปแบบจะถูกปรับขนาดในภายหลังด้วย Javascript เพื่อเปิดเผยโซนด้านล่างเพื่อตอบสนองต่อแถบเลื่อนอินพุต.

รหัสที่รวมกันมีดังต่อไปนี้.

หากเราต้องการเปิดเผยพื้นที่ใต้หน้ากากเราจำเป็นต้องลดขนาดของหน้ากาก ความยาวประ. ตัวอย่างเช่นเมื่อค่าของ จังหวะ dasharray คุณสมบัติของรูปแบบวงกลมคือ 157, 943, ส่วนโค้งจะอยู่ในสถานะต่อไปนี้:

ดังนั้นสิ่งที่เราต้องทำตอนนี้คือการปรับ จังหวะ dasharray ของหน้ากากโดยใช้ JavaScript สำหรับภาพเคลื่อนไหว แต่ก่อนที่เราจะทำอย่างที่ฉันได้พูดไปก่อนหน้านี้สำหรับการสาธิตขั้นสุดท้ายของฉันฉันใช้ CSS และ JavaScript เพื่อคำนวณและเพิ่มคุณสมบัติ SVG ส่วนใหญ่.

ด้านล่างคุณจะพบรหัส HTML, CSS และ JavaScript ที่นำไปสู่ผลลัพธ์เดียวกันกับด้านบน.

HTML

ฉันเพิ่มภาพเข็ม (วัด-needle.svg) ตัวเลื่อนช่วง (การป้อนข้อมูล # เลื่อน) ไปยังการป้อนข้อมูลของผู้ใช้และป้ายกำกับ (ป้าย # LBL) เพื่อแสดงค่าตัวเลื่อนในช่วง 0-100.

    0 
 

CSS

โค้ด CSS ด้านล่างเพิ่มกฎสไตล์ให้กับ SVG เนื่องจากรูปร่าง SVG สามารถกำหนดสไตล์ได้เช่นเดียวกับองค์ประกอบ HTML หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับวิธีการจัดสไตล์ SVG ด้วย CSS ลองดูที่โพสต์นี้ สำหรับการออกแบบตัวเลื่อนให้ดูโพสต์นี้.

 #wrapper ตำแหน่ง: ญาติ; ขอบ: อัตโนมัติ;  #meter width: 100%; ความสูง: 100%; แปลง: rotateX (180deg);  .circle fill: none;  .outline, #mask stroke: # F1F1F1; ความกว้างจังหวะ: 65;  .range ความกว้างของจังหวะ: 60;  #slider, #lbl position: absolute;  #slider เคอร์เซอร์: ตัวชี้; ซ้าย: 0; ขอบ: อัตโนมัติ; ขวา: 0; ด้านบน: 58%; ความกว้าง: 94%;  #lbl background-color: # 4B4C51; รัศมี - ชายแดน: 2px; สี: ขาว ตระกูลฟอนต์: 'courier ใหม่'; ขนาดตัวอักษร: 15pt; น้ำหนักตัวอักษร: ตัวหนา; การขยาย: 4px 4px 2px 4px; ขวา: -48px; บน: 57%;  #meter_needle สูง: 40%; ซ้าย: 0; ขอบ: อัตโนมัติ; ตำแหน่ง: สัมบูรณ์; ขวา: 0; ด้านบน: 10%; แหล่งกำเนิดการเปลี่ยนแปลง: ศูนย์กลางด้านล่าง; / * การวางแนวการแก้ไข * / การแปลง: หมุน (270deg); 

JavaScript

ใน JavaScript อันดับแรกเราคำนวณและกำหนดขนาดของ wrapper และส่วนโค้งทั้งหมดจากนั้นเราจะเพิ่มขนาดที่เหมาะสม จังหวะ dasharray ค่าไปยังวงกลม หลังจากนั้นเราจะเชื่อมเหตุการณ์ที่กำหนดเองกับแถบเลื่อนช่วงเพื่อแสดงภาพเคลื่อนไหว.

 / * ตั้งค่ารัศมีสำหรับวงกลมทั้งหมด * / var r = 250; var Circles = document.querySelectorAll ('. circle'); 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 เช่นเดียวกับ ความยาวประ ของหน้ากาก จังหวะ dasharray คุณสมบัติ.

range_change_event () ฟังก์ชั่นที่กำหนดเองยังหมุนเข็มหลังจากแปลงอินพุตของผู้ใช้ (มาในช่วง 0-100) ถึงระดับเทียบเท่ากับ 0-180.

เพิ่ม 270 °ในการหมุนของเข็มในรหัสด้านบนเนื่องจากภาพที่ฉันใช้เป็นเข็มตรงและในขั้นแรกฉันต้องหมุนมัน 270 °เพื่อให้มันราบไปทางซ้าย.

ในที่สุดฉันก็ผูกพัน range_change_event () ฟังก์ชั่นไปยังตัวเลื่อนช่วงเพื่อให้มาตรวัดเกจวัดสามารถใช้งานได้.

ตรวจสอบ การสาธิต หรือดูซอร์สโค้ดของเรา ที่เก็บ Github.