كيفية رسم الرسم أثناء التمرير

رسم الرسم أثناء التمرير

استخدام SVG و JavaScript في رسم مثلثات أثناء التمرير - يرجى ملاحظة، يجب أن يكون <path> العنصر:}}

مثال

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// الحصول على عنصر <path> بـ ID "triangle"
var triangle = document.getElementById("triangle");
// الحصول على طول عنصر <path>
var length = triangle.getTotalLength();
// موقع البداية للرسم (ضبط نمط الخطوط المدمجة). هنا يتم ضبطه إلى قيمة طول المسار، مما يعني أن المسار بأكمله يتم عرضه كـ "خط مدمج كبير".
triangle.style.strokeDasharray = length;
/* ضبط انحراف الخطوط المدمجة. عند بدء، يتم ضبطه إلى طول المسار، مما يؤدي إلى انحراف المسار بأكمله خارج النطاق المرئي، مما يخفي المثلث.
مع التمرير، سيقل هذا الانحراف تدريجياً، مما يؤدي إلى ظهور المثلث تدريجياً.
حذف هذا السطر يمكن أن يظهر المثلث قبل رسم التمرير.
triangle.style.strokeDashoffset = length;
// الاستماع إلى أحداث التمرير في النافذة، وتشغيل دالة myFunction عند التمرير.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // حساب نسبة التمرير = (ارتفاع التمرير الحالي) / (ارتفاع المسافة القابلة للتمرير)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // حساب الطول الذي يجب رسمه = الطول الإجمالي * نسبة التمرير
  var draw = length * scrollpercent;
  // عندما يتم التمرير لأعلى، فإنه يُرسم بالعكس (من الكامل إلى غير الكامل)، لذا يتم استخدام الطول الإجمالي المعدل من الطول الذي يجب رسمه.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

جرب بنفسك

الصفحات ذات الصلة

دليل:دليل SVG