मैंने अपने ब्राउज़र-आधारित अंतरिक्ष उड़ान सिम्युलेटर के लिए पावर कंट्रोल विजेट कैसे बनाया

आज मैंने अपने लिए एक छोटा सा कोड स्निपेट बनाया और इसकी सामग्री और इसके निर्माण के इतिहास को समुदाय के साथ साझा करने का फैसला किया।



मैंने इंटरनेट को काफी समय तक खोजा, ताकि मुझे कम से कम कुछ ऐसा ही मिले, जिसकी मुझे जरूरत थी, लेकिन इंटरनेट ने अभी भी इस तरह की समस्या का सामना नहीं किया है या किसी ने भी इस तरह का विजेट बनाने का फैसला नहीं किया है। शायद किसी की जरूरत नहीं।



शुरू करने के लिए, मुझे कहना होगा कि मैं वास्तव में क्या चाहता था:

मुझे एक स्लाइडर की आवश्यकता है - वॉल्यूम कंट्रोल का एक एनालॉग, एक प्रगति बार के साथ संयुक्त। किसी वस्तु का एक प्रकार का शक्ति नियंत्रण घटक, इस शक्ति के एक साथ संकेत के साथ संयुक्त। कभी-कभी शक्ति 100% की निर्धारित सीमा से अधिक हो सकती है - आपको इस स्तर को प्रदर्शित करने और प्रतिशत की सही गणना करने की आवश्यकता है। कभी-कभी बिजली शून्य से नीचे जा सकती है (मुझे नहीं पता कि यह हो सकता है - लेकिन सिर्फ मामले में, मैंने ऐसा अवसर प्रदान किया है) और इस स्तर को भी प्रदर्शित करने की आवश्यकता है। इसके अलावा, जिस उपकरण को हम विनियमित करते हैं, वह निष्क्रिय नहीं हो सकता है और उस गति में तेजी ला सकता है जिसके साथ हम मूल्य निर्धारित करते हैं। यदि आपने हवाई जहाज पर afterburner बटन दबाया, तो इंजन थोड़ी देर बाद afterburner मोड में चला जाएगा। यही है, आपको अलग से प्रगति बार मान सेट करना होगा और स्लाइडर स्लाइडर के वर्तमान मूल्य को अलग से प्राप्त-सेट करना होगा।



शायद मैं अंजीर साधक हूं, लेकिन अंत में पागल हो गया - मैंने खुद को बनाने का फैसला किया:

यहां परिणाम का लिंक दिया गया है, और बिल्ली के नीचे प्रक्रिया का वर्णन है

शुरुआत हो रही है

सबसे पहले, विजेट फ्रेम बनाएं:

var PowerControlWidget = function(settings){ this.container = settings.container || undefined ; this.canvas = document.createElement('CANVAS'); this.canvas.height = this.height; this.canvas.width = this.width; this.container.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); // ---    this.set_value(0); this.redraw() }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मैं तुरंत आरक्षण कर दूंगा - मैं jquery.js और jqueryui.js से यथासंभव स्वतंत्र रहना चाहूँगा - इसलिए मैंने इस विजेट को jQuery प्लगइन के रूप में डिज़ाइन नहीं किया।

इवेंट हैंडलिंग

ड्रैग और ड्रॉप के लिए सब कुछ सामान्य है: मूसडाउन पर, स्टेट को सेव करें, माउसअप पर, रीसेट करें।

 var self = this; this.canvas.addEventListener("mousedown", function(event){ self.mouse_down = true; self.value = event.offsetX; if(event.offsetX < self.padding_left_right){ self.value = self.padding_left_right; } if(event.offsetX > self._line_width - self.padding_left_right){ self.value = self._line_width - self.padding_left_right; } self._percent_value = self._get_percent(self.value); self.redraw(); self.onchange(self._percent_value, self.progress_value); }) this.canvas.addEventListener("mouseup", function(event){ self.mouse_down = false; self._percent_value = self._get_percent(self.value); self.redraw(); self.onchange(self._percent_value, self.progress_value); }) this.canvas.addEventListener("mousemove", function(event){ if (self.mouse_down){ self.value = event.offsetX; if(event.offsetX < self.padding_left_right){ self.value = self.padding_left_right; } if(event.offsetX > self._line_width - self.padding_left_right){ self.value = self._line_width - self.padding_left_right; } self._percent_value = self._get_percent(self.value); self.redraw(); self.onslide(self._percent_value, self.progress_value); } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

काफी कुछ सहायक चर हैं जो केवल इस कैनवास के सही स्थान पर स्थिति निर्धारित करते हैं। विजेट में, इसके मुख्य भाग के अलावा, आपको सटीक जानकारी के आउटपुट को भी जोड़ना होगा - प्रगति बार और स्लाइडर का वर्तमान मूल्य। मैंने कैनवास के अंदर ऐसा करने का फैसला किया, हालांकि यहां हम पाठ की स्थिति के साथ काफी समझ में आ रहे हैं। पाठ आउटपुट - थोड़ी देर बाद।

ड्राइंग शुरू करें

स्लाइडर नियंत्रण के लिए, हम इस कैनवास से कुछ क्षेत्र का चयन करते हैं। हमारे पास यह सीमित होगा:

• this._line_width - स्लाइडर की चौड़ाई
• बायां-दायां इंडेंट
• ऊपर से नीचे तक इंडेंट

कुछ इस तरह:

 this._draw_border = function(){ var b = this.padding_top_bottom; //     . var a = this.padding_left_right; var w = this._line_width - ( 2 * a ); var h = this.height - (2*b); this.ctx.beginPath(); this.ctx.moveTo(a,b); this.ctx.bezierCurveTo(a+(w/2), b, w-(w/2)+a, b, a+w, b ); this.ctx.bezierCurveTo(a+w+a, b, a+a+w, b+h, a+w, b+h ); this.ctx.bezierCurveTo( w/2+a, b+h, w/2+a,b+h, a, b+h); this.ctx.bezierCurveTo( 0, b+h, 0,b, a,b); this.ctx.closePath(); this.ctx.strokeStyle = this.border_color; this.ctx.stroke(); //     };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आपको याद दिला दूं कि बेजियर वक्र में इनपुट मापदंडों में तीन बिंदु हैं। चौथा बिंदु वर्तमान एक है, हमें मूव का उपयोग करके इसे जाना चाहिए।

इस तरह के वक्र को खींचने का सामान्य अर्थ:







हमें गोल छोर के साथ एक सुंदर फ्रेम मिलता है।



अब जादू शुरू करें:

नकारात्मक ब्याज के एक क्षेत्र और afterburner के एक क्षेत्र को खींचने के लिए हम क्लिप का उपयोग करेंगे। एक क्लिप सरल है, पहले हम एक पथ बनाते हैं जिसके अंदर ड्राइंग होती है, और फिर हम केवल एक अंतर के साथ सीमा को दोहराते हैं - हम इस पथ को सर्कल नहीं करेंगे, लेकिन इसे अंदर से वांछित रंग से भर देंगे। यह कॉर्नरी और सरल लगता है, यह भी जटिल नहीं दिखता है।



पहले हम परिभाषित करते हैं, जहां इसे खींचना है, वह सब शून्य है - हम एक अलग रंग में आकर्षित करते हैं।

  var zero = this._get_x(0); //        
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ड्राइंग क्षेत्र बनाएं

  this.ctx.beginPath(); this.ctx.rect(0,0, zero, this.height); this.ctx.clip();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और वांछित रंग के साथ एक ही बेज़ियर भरें।

  this.ctx.beginPath(); this.ctx.bezierCurveTo(a+(w/2), b, w-(w/2)+a, b, a+w, b ); this.ctx.bezierCurveTo(a+w+a, b, a+a+w, b+h, a+w, b+h ); this.ctx.bezierCurveTo( w/2+a, b+h, w/2+a,b+h, a, b+h); this.ctx.bezierCurveTo( 0, b+h, 0,b, a,b); this.ctx.fillStyle = this.below_z_color; this.ctx.fill(); this.ctx.closePath(); this.ctx.restore();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सादृश्य से, हम 100% से ऊपर के क्षेत्र के साथ कार्य करते हैं।

कंप्यूटिंग के बारे में थोड़ा सा

हमें विजेट पर मान सेट करने और इसे लेने की आवश्यकता है, माउस कर्सर के निर्देशांक को प्रतिशत में परिवर्तित करना और इसके विपरीत।

मैंने इसके लिए दो बहुत सरल कार्य लिखे:

  this._get_percent = function(x){ var a = this.padding_left_right; //     var w = this._line_width - (2*a); //   return ((x - a) * this._range/ w)+this.starting_percent ; //      ,        ,        . }; this._get_x = function(p){ var a = this.padding_left_right; var w = this._line_width - (2*a); return a+ (p - this.starting_percent) * w / this._range; //  };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अच्छी तरह से, ड्राइंग पाठ के बारे में थोड़ा सा

दृश्य और सटीक दोनों बनाना चाहते हैं? कृपया, लेकिन फिर आप पाठ डेटा के बिना नहीं कर सकते।

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



शुरू करने के लिए, हम प्रतिशत प्रदर्शित करेंगे, न कि यह कैसे अंदर लागू किया जाता है - अर्थात, हम एक सौ से गुणा करते हैं।

  var val = this._percent_value * 100 var int = Math.floor(val); var frac = Math.floor((val - int)*100);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यही है, उन्होंने अलग-अलग पूरे, अलग-अलग आंशिक भागों को प्राप्त किया। हम उन्हें विभिन्न आकारों में आकर्षित करेंगे, लेकिन पहले हम आम तौर पर गणना करेंगे कि कौन सा फ़ॉन्ट हमारे लिए बेहतर है। मैंने एक साधारण निर्भरता बनाने का फैसला किया जो कुछ स्थितियों में बहुत अच्छी तरह से काम नहीं करती है:

  var base_font_size = this.height - (this.padding_top_bottom*2) ; //     var add_font_size = Math.floor(base_font_size / 2); //     var base_marg = base_font_size *2; //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अच्छी तरह से और अंत में - पाठ रेंडर करने के लिए एक कोड

  this.ctx.save() this.ctx.translate(this._line_width+ this.padding_top_bottom, this.height-this.padding_top_bottom); this.ctx.fillStyle = "#000"; this.ctx.font = base_font_size + "pt Arial"; this.ctx.textAlign = "end"; //     this.ctx.fillText("" + (int), base_marg, 0 ) this.ctx.textAlign = "center"; this.ctx.font = (base_font_size -2) + "pt Arial"; this.ctx.fillText(",", base_marg+1,0 ) this.ctx.font = add_font_size + "pt Arial"; this.ctx.textAlign = "start"; //     this.ctx.fillText("" + (frac), base_marg+3, 0 ) this.ctx.restore();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

निष्कर्ष

तैयार संकेतक का उपयोग किया जा सकता है। इसके लिए रंगीन सेटिंग्स को सीधे सेट किया जा सकता है। दुर्भाग्य से, कैनवास का उपयोग करने के निर्णय ने हमें सीएसएस के साथ इसे चित्रित करने के व्यापक अवसरों के साथ नहीं छोड़ा, लेकिन कैनवास के अन्य फायदे हैं - विशेष रूप से, इसका उपयोग इस सूचक को अतिरिक्त स्ट्रोक और शासकों को संलग्न करने के लिए किया जा सकता है। सौभाग्य से, कैनवास ज्यामितीय आकृतियों को बहुत सटीक रूप से आकर्षित कर सकता है।



जो लोग इसे खोदना चाहते हैं या इसका उपयोग करना चाहते हैं, उनके लिए मैं रिपॉजिटरी github.com/stavenko/power-control-widget का पता छोड़ देता हूं। आज इस विजेट ने केवल एक ब्राउज़र - Google Chrome के साथ काम किया है, और मुझे ईमानदारी से यकीन नहीं है कि अन्य ब्राउज़र में ईवेंट सही ढंग से काम करेंगे। विशेष रूप से, ईवेंट्स में ऑफ़सेटएक्स वेरिएबल्स में माउस निर्देशांक नहीं हो सकते हैं। और यह बहुत सुविधाजनक था - निर्देशांक की गणना करने की कोई आवश्यकता नहीं है - उन्हें तुरंत कंटेनर के शीर्ष-बाएं के सापेक्ष दिया जाता है।



आज के लिए बस इतना ही