Qt: वेक्टर ग्राफिक्स पर आधारित ड्राइंग

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

प्रस्तावना

यह सब इस तथ्य के साथ शुरू हुआ कि एक बार एक-बिट संकेतों का संकेत देने की आवश्यकता थी। कुछ एप्लिकेशन को कुछ पोर्ट पर कुछ डेटा प्राप्त होता है, पैकेज को स्क्रीन पर डिसबैलेंस और प्रदर्शित किया जाना चाहिए। यह उसी समय अच्छा होगा जब किसी परिचित डैशबोर्ड की नकल करें। डिजिटल डेटा प्रदर्शित करने के लिए, Qt "बॉक्स से बाहर" QLCDNumber वर्ग प्रदान करता है, जो परिचित सात-खंड संकेतकों के समान है, लेकिन एकल लैंप में कुछ दिखाई नहीं देता है।

इन उद्देश्यों के लिए झंडे (वे चेक बॉक्स हैं) और स्विच (वे रेडियो बटन हैं) का उपयोग करना बुरा है, और यहां कारणों की एक सूची है:

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

निष्कर्ष: आपको स्वयं एक प्रकाश बल्ब खींचने की आवश्यकता है।

पसंद का आटा

पहले मैंने तैयार समाधानों की तलाश की। उस समय में, जब मैंने डेल्फी का उपयोग किया था, तो आप गंभीर कंपनियों और शौकिया निर्माताओं दोनों से, बस एक विशाल मात्रा में घटक पा सकते थे। इससे Qt को बहुत परेशानी होती है। QWT में कुछ तत्व हैं, लेकिन ऐसा नहीं है। मैंने शौकिया तौर पर बिल्कुल नहीं देखा। शायद, अगर आप गितुब पर सही तरीके से खुदाई करते हैं, तो आप कुछ पा सकते हैं, लेकिन मैं शायद खुद को तेजी से करूंगा।

पहली चीज जो घर के अंदर से ही सुझाई गई थी, वह थी दो इमेज फाइल्स का इस्तेमाल लाइट की इमेजेज को ऑन और ऑफ करना। खराब:

• अच्छी तस्वीरें ढूंढना आवश्यक है (या आकर्षित करना, लेकिन मैं कलाकार नहीं हूं);
• सिद्धांत का सवाल है: बांधना अच्छा नहीं है, यहां तक ​​कि चित्र भी, अपने पैरों के नीचे झूठ बोलना;
• उन्हें कहीं संग्रहित किया जाना चाहिए। फाइलें बहुत खराब हैं: गलती से मिट गईं - और कोई बटन नहीं है। संसाधन बेहतर हैं, लेकिन मुझे यह भी महसूस नहीं होता है कि क्या मुझे मिल सकता है;
• कोई स्केलेबिलिटी नहीं;
• Customizability (रंग, उदाहरण के लिए) केवल फ़ाइलों को जोड़कर हासिल की है। यह संसाधन गहन और अनम्य है।

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

और दूसरे से तीसरा इस प्रकार है: आप स्व-आरेखण छवियों के लिए वेक्टर ग्राफिक्स के सिद्धांतों का उपयोग कर सकते हैं! पाठ रूप में एक वेक्टर छवि फ़ाइल इंगित करती है कि क्या और कैसे आकर्षित किया जाए। मैं वेक्टर ट्यूटोरियल का उपयोग करके समान कोड निर्दिष्ट कर सकता हूं। सौभाग्य से, QPainter ऑब्जेक्ट में आवश्यक उपकरण हैं: एक कलम, एक ब्रश, एक ढाल और ड्राइंग आदिम, यहां तक ​​कि एक बनावट भी। हां, उपकरण सभी से बहुत दूर हैं: कोई मास्क, सम्मिश्रण मोड नहीं हैं, लेकिन बिल्कुल फोटोरिअलिज़्म की आवश्यकता नहीं है।

मैंने नेट पर कुछ उदाहरणों की तलाश की। उन्होंने पहला सबक लिया जो सामने आया: "हम इनकैप्स ग्राफिक्स एडिटर में एक बटन खींचते हैं" साइट से "ड्रा करना आसान है। इस पाठ का बटन एक बटन की तुलना में प्रकाश बल्ब की तरह बहुत अधिक है, जो मुझे पूरी तरह से सूट करता है। मैं एक मसौदा बना रहा हूँ: Inkscape के बजाय, Qt में एक परियोजना।

पंख परीक्षण

मैं एक नया प्रोजेक्ट बना रहा हूं। मैं उस प्रोजेक्ट का नाम चुना गया हूं, क्योंकि (मैं आरजीबी एलईडी की तरह कुछ करना चाहता हूं) और उसके लिए रास्ता। मैं बेस क्लास QWidget और RgbLed नाम का चयन करता हूं, मैं फॉर्म फाइल बनाने से इनकार करता हूं। लॉन्च के बाद डिफ़ॉल्ट रूप से परियोजना एक खाली खिड़की बनाती है, यह अभी भी निर्बाध है।

ड्राइंग के लिए तैयारी

एक कोरा है। अब आपको कक्षा के निजी सदस्यों को प्राप्त करने की आवश्यकता है, जो तस्वीर की ज्यामिति का निर्धारण करेगा। वेक्टर ग्राफिक्स का एक अनिवार्य लाभ इसकी मापनीयता है, इसलिए न्यूनतम संख्या में निरंतरता होनी चाहिए, और वे केवल अनुपात निर्धारित करते हैं। आकार परिवर्तन () घटना में पुनर्गणना की जाएगी, जिसे फिर से परिभाषित करने की आवश्यकता होगी।

उपयोग किए गए ड्राइंग ट्यूटोरियल में, आयाम पिक्सेल में निर्दिष्ट होते हैं जैसे आप जाते हैं। मुझे पहले से यह निर्धारित करने की आवश्यकता है कि मैं क्या उपयोग करूंगा और कैसे पुनरावृत्ति करूंगा।

एक खींची गई तस्वीर में निम्नलिखित तत्व होते हैं:

• बाहरी रिंग (उत्कीर्ण, उत्तल रिम का हिस्सा)
• आंतरिक वलय (अंदर की ओर झुका हुआ)
• एलईडी लैंप आवास, "ग्लास"
• कांच के किनारे पर छाया
• शीर्ष पर प्रकाश डाला
• नीचे भड़कना

कंसेंट्रिक सर्कल, यानी चकाचौंध को छोड़कर सब कुछ केंद्र और त्रिज्या की स्थिति से निर्धारित होता है। चकाचौंध केंद्र, चौड़ाई और ऊंचाई द्वारा निर्धारित की जाती है, और चकाचौंध के एक्स केंद्रों की स्थिति पूरी तस्वीर के एक्स केंद्र की स्थिति के साथ मेल खाती है।

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

private: int height; int width; int minDim; int half; int centerX; int centerY; QRect drawingRect; int outerBorderWidth; int innerBorderWidth; int outerBorderRadius; int innerBorderRadius; int topReflexY; int bottomReflexY; int topReflexWidth; int topReflexHeight; int bottomReflexWidth; int bottomReflexHeight; 

तब मैं संरक्षित फ़ंक्शन को फिर से परिभाषित करता हूं जिसे विजेट के आकार बदलने पर कहा जाता है।

 protected: void resizeEvent(QResizeEvent *event); void RgbLed::resizeEvent(QResizeEvent *event) { QWidget::resizeEvent(event); this->height = this->size().height(); this->width = this->size().width(); this->minDim = (height > width) ? width : height; this->half = minDim / 2; this->centerX = width / 2; this->centerY = height / 2; this->outerBorderWidth = minDim / 10; this->innerBorderWidth = minDim / 14; this->outerBorderRadius = half - outerBorderWidth; this->innerBorderRadius = half - (outerBorderWidth + innerBorderWidth); this->topReflexY = centerY - (half - outerBorderWidth - innerBorderWidth) / 2; this->bottomReflexY = centerY + (half - outerBorderWidth - innerBorderWidth) / 2; this->topReflexHeight = half / 5; this->topReflexWidth = half / 3; this->bottomReflexHeight = half / 5; this->bottomReflexWidth = half / 3; drawingRect.setTop((height - minDim) / 2); drawingRect.setLeft((width - minDim) / 2); drawingRect.setHeight(minDim); drawingRect.setWidth(minDim); } 

यहां, जिस वर्ग में प्रकाश बल्ब खुदा हुआ है, उसकी गणना की जाती है, इस वर्ग का केंद्र, अधिकतम संभव क्षेत्र पर स्थित रिम की त्रिज्या, रिम की चौड़ाई, बाहरी भाग जिसका व्यास का 1/10 और आंतरिक 1/14 होना चाहिए। फिर चकाचौंध की स्थिति, जो ऊपरी और निचले रेडी के बीच में स्थित है, की गणना की जाती है, चौड़ाई और ऊंचाई आंखों के लिए चुनी जाती है।

इसके अलावा, संरक्षित क्षेत्रों में मैं तुरंत इस्तेमाल होने वाले रंगों का एक सेट जोड़ दूंगा।

  QColor ledColor; QColor lightColor; QColor shadowColor; QColor ringShadowDarkColor; QColor ringShadowMedColor; QColor ringShadowLightColor; QColor topReflexUpColor; QColor topReflexDownColor; QColor bottomReflexCenterColor; QColor bottomReflexSideColor; 

नामों से यह लगभग स्पष्ट है कि ये प्रकाश बल्ब के रंग, छाया का हल्का भाग, छाया का काला भाग, प्रकाश बल्ब के चारों ओर कांसुलर छाया के तीन रंग और चकाचौंध के रंग हैं।

रंग आरंभीकृत होने चाहिए, इसलिए मैं डिज़ाइनर की वर्कपीस को पूरक करूँगा।

 RgbLed::RgbLed(QWidget *parent) : QWidget(parent), ledColor(Qt::green), lightColor(QColor(0xE0, 0xE0, 0xE0)), shadowColor(QColor(0x70, 0x70, 0x70)), ringShadowDarkColor(QColor(0x50, 0x50, 0x50, 0xFF)), ringShadowMedColor(QColor(0x50, 0x50, 0x50, 0x20)), ringShadowLightColor(QColor(0xEE, 0xEE, 0xEE, 0x00)), topReflexUpColor(QColor(0xFF, 0xFF, 0xFF, 0xA0)), topReflexDownColor(QColor(0xFF, 0xFF, 0xFF, 0x00)), bottomReflexCenterColor(QColor(0xFF, 0xFF, 0xFF, 0x00)), bottomReflexSideColor(QColor(0xFF, 0xFF, 0xFF, 0x70)) { } 

इसके अलावा, हेडर फ़ाइल में सम्मिलित करने के लिए मत भूलना उन वर्गों के निष्कर्ष जो ड्राइंग करते समय आवश्यक होंगे।

 #include <QPainter> #include <QPen> #include <QBrush> #include <QColor> #include <QGradient> 

यह कोड सफलतापूर्वक संकलित करता है, लेकिन विजेट विंडो में कुछ भी नहीं बदला है। यह ड्राइंग शुरू करने का समय है।

ड्राइंग

मैं एक बंद फ़ंक्शन दर्ज करता हूं

  void drawLed(const QColor &color); 

और संरक्षित फ़ंक्शन को फिर से परिभाषित करें

  void paintEvent(QPaintEvent *event); 

Redraw घटना वास्तविक ड्राइंग का कारण बनेगी, जिसमें "ग्लास" का रंग एक पैरामीटर के रूप में पारित किया गया है।

 void RgbLed::paintEvent(QPaintEvent *event) { QWidget::paintEvent(event); this->drawLed(ledColor); } 

अब तक। और हम धीरे-धीरे ड्राइंग फ़ंक्शन में भरना शुरू करते हैं।

 void RgbLed::drawLed(const QColor &color) { QPainter p(this); QPen pen; pen.setStyle(Qt::NoPen); p.setPen(pen); } 

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

फिर पहला सर्कल वेक्टर ग्राफिक्स पर सबक के अनुसार अनुमानित रूप से तैयार किया गया है: एक बड़ा वृत्त, एक रेडियल ढाल से भरा हुआ। ग्रेडिएंट में शीर्ष पर एक हल्का लंगर बिंदु है, लेकिन बहुत किनारे पर नहीं है, और तल पर एक अंधेरा है, लेकिन बहुत किनारे पर नहीं है। एक ब्रश ग्रेडिएंट के आधार पर बनाया गया है, इस ब्रश के साथ चित्रकार एक सर्कल (यानी एक वर्ग में अंकित एक दीर्घवृत्त) पेंट करता है। यह ऐसे कोड का पता लगाता है

  QRadialGradient outerRingGradient(QPoint(centerX, centerY - outerBorderRadius - (outerBorderWidth / 2)), minDim - (outerBorderWidth / 2)); outerRingGradient.setColorAt(0, lightColor); outerRingGradient.setColorAt(1, shadowColor); QBrush outerRingBrush(outerRingGradient); p.setBrush(outerRingBrush); p.drawEllipse(this->drawingRect); qDebug() << "draw"; 

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

कोड का एक और बैच जोड़ें।

  QRadialGradient innerRingGradient(QPoint(centerX, centerY + innerBorderRadius + (innerBorderWidth / 2)), minDim - (innerBorderWidth / 2)); innerRingGradient.setColorAt(0, lightColor); innerRingGradient.setColorAt(1, shadowColor); QBrush innerRingBrush(innerRingGradient); p.setBrush(innerRingBrush); p.drawEllipse(QPoint(centerX, centerY), outerBorderRadius, outerBorderRadius); 

लगभग एक ही सर्कल, केवल आकार में छोटा और उल्टा। हम निम्नलिखित चित्र प्राप्त करते हैं:

तो आखिरकार आपको कांच के रंग की आवश्यकता है:

  QColor dark(color.darker(120)); QRadialGradient glassGradient(QPoint(centerX, centerY), innerBorderRadius); glassGradient.setColorAt(0, color); glassGradient.setColorAt(1, dark); QBrush glassBrush(glassGradient); p.setBrush(glassBrush); p.drawEllipse(QPoint(centerX, centerY), innerBorderRadius, innerBorderRadius); 

यहां, संचरित रंग से गहरे रंग के फ़ंक्शन का उपयोग करके, ढाल को व्यवस्थित करने के लिए समान रंग प्राप्त किया जाता है, लेकिन गहरा है। आँख द्वारा चयनित गुणांक 120। यहाँ परिणाम है:

कांच के चारों ओर एक कुंडलाकार छाया जोड़ें। यह वेक्टर ग्राफिक्स पर पाठ में किया जाता है, और इसमें वॉल्यूम और यथार्थवाद को जोड़ना चाहिए:

  QRadialGradient shadowGradient(QPoint(centerX, centerY), innerBorderRadius); shadowGradient.setColorAt(0, ringShadowLightColor); shadowGradient.setColorAt(0.85, ringShadowMedColor); shadowGradient.setColorAt(1, ringShadowDarkColor); QBrush shadowBrush(shadowGradient); p.setBrush(shadowBrush); p.drawEllipse(QPoint(centerX, centerY), innerBorderRadius, innerBorderRadius); 

एक तीन-चरण ढाल है, जिससे छाया किनारे तक मोटी होती है और केंद्र की ओर मुड़ जाती है। यह इस तरह से निकला:

हाइलाइट्स जोड़ें, दोनों एक ही बार में। ऊपरी हाइलाइट, निचले (और सभी अन्य तत्वों) के विपरीत, एक रैखिक ढाल बनाया जाता है। मेरा कलाकार ऐसा है, इसलिए मैं पाठ के लेखक के लिए अपनी बात रखता हूं। शायद इसके लिए कुछ सच्चाई है, मैं विभिन्न प्रकार के ग्रेडिएंट के साथ प्रयोग नहीं करूंगा।

  QLinearGradient topTeflexGradient(QPoint(centerX, (innerBorderWidth + outerBorderWidth)), QPoint(centerX, centerY)); topTeflexGradient.setColorAt(0, topReflexUpColor); topTeflexGradient.setColorAt(1, topReflexDownColor); QBrush topReflexbrush(topTeflexGradient); p.setBrush(topReflexbrush); p.drawEllipse(QPoint(centerX, topReflexY), topReflexWidth, topReflexHeight); QRadialGradient bottomReflexGradient(QPoint(centerX, bottomReflexY + (bottomReflexHeight / 2)), bottomReflexWidth); bottomReflexGradient.setColorAt(0, bottomReflexSideColor); bottomReflexGradient.setColorAt(1, bottomReflexCenterColor); QBrush bottomReflexBrush(bottomReflexGradient); p.setBrush(bottomReflexBrush); p.drawEllipse(QPoint(centerX, bottomReflexY), bottomReflexWidth, bottomReflexHeight); 

वास्तव में, केडीपीवी के रूप में यह सब एक तैयार प्रकाश बल्ब है।

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

नीचे एक प्रोग्राम विंडो में उपयोग का एक उदाहरण है।

शरारत

मज़े के लिए, आप फूलों के साथ खेल सकते हैं। उदाहरण के लिए, एक संरक्षित माउस क्लिक इवेंट को ओवरराइड करना

  void mousePressEvent(QMouseEvent *event); 

इस तरह से:

 void RgbLed::mousePressEvent(QMouseEvent *event) { static int count = 0; if (event->button() == Qt::LeftButton) { switch (count) { case 0: ledColor = Qt::red; count++; break; case 1: ledColor = Qt::green; count++; break; case 2: ledColor = Qt::blue; count++; break; case 3: ledColor = Qt::gray; count++; break; default: ledColor = QColor(220, 30, 200); count = 0; break; } this->repaint(); } QWidget::mousePressEvent(event); } 

हेडर में माउस ईवेंट जोड़ना न भूलें:

 #include <QMouseEvent> 

अब घटक पर एक माउस क्लिक से प्रकाश बल्ब का रंग बदल जाएगा: दीपक से लाल, हरा, नीला, ग्रे और कुछ यादृच्छिक प्रकाश।

उपसंहार

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

MousePressEvent का उपयोग यह दर्शाता है कि एक विजेट को न केवल एक संकेतक बनाया जा सकता है, बल्कि एक बटन भी बनाया जा सकता है, जिससे यह दबाया, जारी, मुड़ा हुआ, मुड़, रंगीन और जो कुछ भी आप इंगित करने, क्लिक करने और जारी करने की घटनाओं के लिए चाहते हैं।

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