कैनवस संकेतक - AjaxLoad.gif के लिए एक विकल्प

कई शायद प्रक्रिया संकेतक का उपयोग करते हैं , उदाहरण के लिए, जब AJAX के माध्यम से किसी भी डेटा को संचारित / प्राप्त करना।

एक बार जब मुझे आश्चर्य हुआ कि जब मैं सर्वर पर प्रपत्र डेटा भेजने वाले बटन पर क्लिक करता हूं, तो यह वही संकेतक इसके अंदर दिखाई देता है। प्रारंभ में, पृष्ठभूमि ठोस थी, लेकिन किसी भी समय, डिजाइनर इसे दूसरे के साथ बदल सकते थे, या एक ढाल भी बना सकते थे।

प्रत्येक स्थिति के लिए एक विशेष GIF बनाना बहुत ही मूर्खतापूर्ण है। इसलिए, कैनवस का उपयोग करने के लिए सही समाधान है।



पहले मिनटों में, मैं इस जावास्क्रिप्ट मॉड्यूल पर आया, जिसके साथ आप कम से कम ऐसे संकेतक उत्पन्न कर सकते हैं:


लेकिन यह समस्या हल नहीं हुई, तकनीकी पक्ष से नहीं, निश्चित रूप से, लेकिन डिजाइन की ओर से। इन मुद्दों से निपटने वाले व्यक्ति ने जोर देकर कहा कि लाठी को हलकों में नहीं चलना चाहिए, लेकिन यहां की तरह:


प्रारंभ में, मैं इस पुस्तकालय में आया था, लेकिन यह कई कार्यों को लागू करता है जिन्हें मैंने उपयोग करने की योजना भी नहीं बनाई थी। खोज जारी रखनी थी।

अंत में, मैं एक प्रविष्टि में आया जिसने मेरी समस्या को लगभग हल कर दिया।

अतिशयोक्ति को हटाकर, आवश्यक जोड़ते हुए, मैं ख़ुशी से आपके साथ समाधान साझा करूँगा।

उदाहरण का उपयोग करें। सही जगह पर, कैनवास टैग लगाएं:

<canvas id="loader"></canvas> 

और CanvasIndicator वर्ग का एक उदाहरण बनाएँ:

 new CanvasIndicator(document.getElementById("loader"),{ bars:11, innerRadius:4, size:[2,5], rgb:[255,255,255], fps:10 }); 

जैसा कि आप देख सकते हैं, कैनवसइंडाइटर कंस्ट्रक्टर दो मापदंडों को लेता है: पहला एक आवश्यक रूप से कैनवास है, जहां कार्रवाई वास्तव में होगी। दूसरा पैरामीटर वैकल्पिक है - यह एक ऑब्जेक्ट है जिसके गुण संकेतक कॉन्फ़िगरेशन हैं।

संपत्ति का विवरण:

बार - ब्लॉक की संख्या
इनररेडियस - आंतरिक त्रिज्या
आकार - एक सरणी जहां पहला तत्व ब्लॉक की चौड़ाई है और दूसरा इसकी ऊंचाई है
आरजीबी - संकेतक रंग, तीन तत्वों की एक सरणी द्वारा निर्धारित, जहां क्रमशः लाल, हरा, नीला -
एफपीएस - प्रति सेकंड फ्रेम की संख्या, बड़ा मूल्य, जितना तेज़ी से संकेतक बदल जाता है

खैर, सीधे CanvasIndicator.js लाइब्रेरी का कोड

 function CanvasIndicator(el, opt) { this.ctx = el.getContext("2d"); this.currentOffset = 0; var defaults = { bars: 11, innerRadius: 4, size: [2, 5], rgb: [255, 255, 255], fps: 10 } if (typeof(opt) == 'object') { defaults.bars = opt.bars ? opt.bars : defaults.bars; defaults.innerRadius = opt.innerRadius ? opt.innerRadius : defaults.innerRadius; defaults.size = opt.size ? opt.size : defaults.size; defaults.rgb = opt.rgb ? opt.rgb : defaults.rgb; defaults.fps = opt.fps ? opt.fps : defaults.fps; } this.opt = defaults; this.w = this.opt.size[1] + this.opt.innerRadius; el.setAttribute("width", this.w * 2); el.setAttribute("height", this.w * 2); (function nextAnimation(obj) { obj.currentOffset = (obj.currentOffset + 1) % obj.opt.bars; obj.draw(obj.currentOffset); setTimeout(function () { nextAnimation(obj); }, 1000 / obj.opt.fps); })(this); } CanvasIndicator.prototype.makeRGBA = function () { return "rgba(" + [].slice.call(arguments, 0).join(",") + ")"; } CanvasIndicator.prototype.drawBlock = function (barNo) { this.ctx.fillStyle = this.makeRGBA(this.opt.rgb[0], this.opt.rgb[1], this.opt.rgb[2], (this.opt.bars + 1 - barNo) / (this.opt.bars + 1)); this.ctx.fillRect(-this.opt.size[0] / 2, 0, this.opt.size[0], this.opt.size[1]); } CanvasIndicator.prototype.calculatePosition = function (barNo) { angle = 2 * barNo * Math.PI / this.opt.bars; return { y: (this.opt.innerRadius * Math.cos(-angle)), x: (this.opt.innerRadius * Math.sin(-angle)), angle: angle }; } CanvasIndicator.prototype.draw = function (offset) { this.clearFrame(); this.ctx.save(); this.ctx.translate(this.w, this.w); for (var i = 0; i < this.opt.bars; i++) { var curbar = (offset + i) % this.opt.bars, pos = this.calculatePosition(curbar); this.ctx.save(); this.ctx.translate(pos.x, pos.y); this.ctx.rotate(pos.angle); this.drawBlock(i); this.ctx.restore(); } this.ctx.restore(); } CanvasIndicator.prototype.clearFrame = function () { this.ctx.clearRect(0, 0, this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight); } 

एक उदाहरण यहाँ देखें।
आप यहां पुस्तकालय डाउनलोड कर सकते हैं।