کیسے رولنگ میں تراشیا

رولنگ میں تراشیا

استعمال SVG اور جاوا اسکریپت کے ذریعے رولنگ میں تراشیا ڈرین - لطفاً، یہ ضروری ہوگا <path> عناصر:}}

مثال

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// "triangle" کے آئی ڈی والا <path> عنصر کو حاصل کرنا
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 درس