🧘🏻 👩🏾‍🤝‍👨🏿 ⚾️ पांच जीयूआई - कैनवस के लिए सुंदर बटन 💝 👩🏾‍🤝‍👨🏽 💈

सभी को नमस्कार। मैं इसे बर्दाश्त नहीं कर सका और हर किसी के साथ साझा करने का फैसला किया जो मैं कमोबेश सक्रिय रूप से कर रहा हूं।

लगभग एक महीने पहले, मैंने कैनवस के साथ प्रयोग करना जारी रखा, और किसी कारण से मुझे एक बटन की आवश्यकता थी। हां, सबसे साधारण बटन जो नियमित टैग के साथ पृष्ठ पर धकेल दिया जा सकता है, लेकिन यह एक सच्चे समुराई का तरीका नहीं है। नतीजतन, सभी github'a और gitorious'a के डिब्बे को चारों ओर रगड़ दिया गया, Google को छेद में घिस दिया गया, लेकिन कोई उपयुक्त उपकरण नहीं मिला। जब तक libCanvas ने समान उदाहरणों का घमंड नहीं किया ... लेकिन मैंने उन्हें काम की शुरुआत के बाद पाया, इसलिए मैंने उन्हें फेंकने का फैसला नहीं किया।

सामान्य तौर पर, फाइव जीयूआई ग्राफ़िकल इंटरफ़ेस के लिए विगेट्स का एक सेट है जो आपको कैनवास पर सुंदर बटन, स्लाइडर्स, टेक्स्ट के टुकड़े और नियमित इंटरफेस के अन्य बन्स को खींचने की अनुमति देता है, जो हमारे कैनवास पर पहले से ही खींचा जा रहा है के तर्क को पूरी तरह से तोड़ने के बिना। आरंभ करने के लिए आपको पृष्ठ पर एक GUI ऑब्जेक्ट बनाना होगा, इसे मौजूदा कैनवास पर कील करना होगा, इसमें तत्वों को जोड़ना होगा और आहरण () विधि को कॉल करना होगा। कुछ इस तरह:

<html> <body> <canvas id="canvas" width="600" height="400"></canvas> </body> <script> G = new FiveGUI.GUI({ canvas: "canvas", fontColor: "#fff" }); Region = new FiveGUI.GUIRegion({ x: 50, y: 50, width: 400, height: 325, }); Button = new FiveGUI.GUIButton({ x: 10, y: 30, width: 108, height: 22, caption: "GUIButton", value: null, borderWidth: 2, borderColor: "#aaa", hoverBorderColor: "#ccc", clickBorderColor: "#eee" }); Region.addElement(Button); G.addElement(Region); G.drawGUI(); </script> </html>

नतीजतन, हमें एक बटन के साथ एक ब्लॉक मिलता है। पुस्तकालय के पृष्ठ पर बटन का कुछ उपयोगी कार्य करने के तरीके का एक उदाहरण भी है।

मैं समझदार प्रलेखन और समझदार हाउटो की कमी के लिए माफी माँगता हूँ। बहुत निकट भविष्य में मैं यह सब खत्म करने की कोशिश करूंगा, लेकिन स्रोत अब केवल एक नम स्थिति में है (मैं ओपेरा के साथ काम करने के लिए नहीं मिल सकता है, आईई ने भी नहीं देखा, क्योंकि वहाँ कुछ भी नहीं है) - मैं जितनी जल्दी हो सके यह सब करने की उम्मीद कर रहा हूं। बाकी सब चीजों पर रोक लगाने के लिए।

फिलहाल बटन, चेकबॉक्स और रेडियो बॉक्स के काफी पूर्ण कार्यान्वयन हैं, पाठ में प्रवेश करने के लिए एकल-रेखा और बहु-पंक्ति फ़ील्ड हैं, सूची हैं, दोनों ड्रॉप-डाउन और फ्लैट हैं। एक प्रगति संकेतक और एक स्लाइडर भी है।

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

सामान्य तौर पर, यदि यह कैनवास के साथ प्रयोगों के दौरान आपके लिए एक उपयोगी और सुखद जोड़ बन जाता है, तो मुझे बहुत खुशी होगी।

काम के उदाहरण यहां देखे जा सकते हैं:

http://fivegui.elhsmart.net.ru

GitHub:

https://github.com/elhsmart/FiveGUI

PS जैसा कि मैंने ऊपर उल्लेख किया है - यह एफएफ और क्रोम के नवीनतम संस्करणों में महत्वपूर्ण रूप से काम करता है। मेरे पास IE9 नहीं है (यदि कोई भी इसे देख सकता है, तो कृपया मुझे बताएं कि वहां क्या चल रहा है), लेकिन ऑपरेशन अभी तक नहीं किया है।

PSS उदाहरण के सभी ग्राफिक्स वेसनॉथ गेम के लिए लड़ाई से लिए गए हैं। मुझे उम्मीद है कि लोग मुझसे बहुत नाराज नहीं होंगे, क्योंकि इंटरफ़ेस डिजाइनर मुझसे कुछ भी नहीं है और एक सुंदर बटन खींचने का प्रयास लंबा, दर्दनाक और दर्दनाक होगा।

पांच जीयूआई - कैनवस के लिए सुंदर बटन

More articles: