रोलिंग विज़न में कैसे ड्राइंग करें

रोलिंग ड्राइंग

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>
// "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 ट्यूटोरियल