Bagaimana menggambar saat menggulir

Menggambar dengan menggulir

Menggunakan SVG dan JavaScript untuk menggambar segitiga saat menggulir - harap dicatat, itu harus <path> Elemen:}

Contoh

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Mengambil elemen <path> dengan ID "triangle"
var triangle = document.getElementById("triangle");
// Mengambil panjang elemen <path>
var length = triangle.getTotalLength();
// Tempat awal penggambar (atur mode garis pelengkap). Di sini diatur ke nilai yang sama seperti panjang jalur, yang sebenarnya adalah untuk melihat seluruh jalur sebagai "garis pelengkap besar".
triangle.style.strokeDasharray = length;
/* Atur offset garis pelengkap. Pada awalnya diatur ke panjang jalur, sehingga jalur seluruhnya dioffset keluar tampilan, sehingga segitiga disembunyikan.
Dengan menggulir, offset ini akan berkurang perlahan-lahan, sehingga segitiga akan muncul perlahan-lahan.
Menghapus baris kode ini dapat menampilkan segitiga sebelum menggambar.
triangle.style.strokeDashoffset = length;
// Menyiarkan peristiwa gulir jendela, dan memanggil fungsi myFunction saat menggulir.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Menghitung persentase gulir = (tinggi gulir saat ini) / (tinggi yang dapat digulir total)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Menghitung panjang yang seharusnya digambar = panjang total * persentase gulir
  var draw = length * scrollpercent;
  // Saat menggulir ke atas, hal ini sebenarnya adalah menggambar balik (dari lengkap ke kurang lengkap), jadi di sini digunakan panjang total dikurangi panjang yang seharusnya digambar.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Coba sendiri

Halaman yang berhubungan

Panduan:Panduan SVG