Jak rysować podczas przewijania

Rysowanie podczas przewijania

Rysowanie trójkąta za pomocą SVG i JavaScript podczas przewijania - uwaga, musi to być <path> Element:}}

Przykład

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Uzyskaj element <path> o ID "triangle"
var triangle = document.getElementById("triangle");
// Uzyskaj długość elementu <path>
var length = triangle.getTotalLength();
// Początek rysowania (ustaw tryb ciągłego cięcia). Tutaj ustawiono wartość równą długości ścieżki, co w rzeczywistości oznacza, że cała ścieżka jest traktowana jako "duży ciągły cięcie".
triangle.style.strokeDasharray = length;
/* Ustaw offsetka ciągłego cięcia. Na początku ustawiono wartość równą długości ścieżki, aby cała ścieżka była przesunięta poza widok, co ukrywa trójkąt.
Z przewijaniem, ta offsetka będzie stopniowo maleć, co pozwoli stopniowo wyświetlić trójkąt.
Usunięcie tego wiersza kodu może wyświetlić trójkąt przed rysowaniem.
triangle.style.strokeDashoffset = length;
// Słuchaj zdarzenia przewijania okna i wywołaj funkcję myFunction przy przewijaniu.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Oblicz procent przewijania = (wysokość przewijania) / (całkowita wysokość przewijania)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Oblicz długość do narysowania = całkowita długość * procent przewijania
  var draw = length * scrollpercent;
  // Kiedy przewijamy w górę, jest to rysowanie w przeciwnym kierunku (od pełnego do niekompletnego), więc tutaj używamy całkowitej długości minus długość do narysowania.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Spróbuj sam

Strony związane

Tutorial:Tutorial SVG