SwiftUI Academy · पाठ

Stroke, Fill और overlay

बैज और कार्ड के लिए आकृतियों की रूपरेखा बनाएँ और उनमें रंग भरें।

पाठ 4, कुल 4 में से13 चरण

Stroke, Fill और overlay, CoddyKit पर SwiftUI Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह SwiftUI Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। SwiftUI Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Fill और Stroke की तुलना

किसी आकार के अंदर fill से रंग भरा जा सकता है या stroke से उसकी रूपरेखा बनाई जा सकती है। दोनों मिलकर बैज और कार्ड बनाने देते हैं।

आकार में रंग भरना

किसी आकार के पूरे अंदरूनी भाग को रंग या ग्रेडिएंट से भरने के लिए fill का उपयोग करें। आकार में रंग भरने का यह सबसे सामान्य तरीका है। 🎨

Circle()
    .fill(.blue)

stroke से रूपरेखा बनाना

stroke संशोधक केवल आकार की सीमा बनाता है और बीच का भाग खाली छोड़ता है। खोखले छल्लों और रूपरेखाओं के लिए यह बिल्कुल सही है।

Circle()
    .stroke(.blue)

रेखा की चौड़ाई नियंत्रित करना

रूपरेखा को मोटा या पतला करने के लिए stroke को lineWidth दें। बड़ी संख्या से सीमा अधिक मोटी दिखाई देती है।

Circle()
    .stroke(.blue, lineWidth: 4)

टूटी हुई सीमाएँ

टूटी हुई रूपरेखा के लिए dash pattern के साथ StrokeStyle का उपयोग करें। UI में स्थान-धारकों और छोड़ने वाले क्षेत्रों के लिए यह बहुत उपयोगी है।

RoundedRectangle(cornerRadius: 12)
    .stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))

Fill और Stroke साथ-साथ

क्या आपको अंदर रंग और बाहर सीमा दोनों चाहिए? एक ही कॉल में अंदर रंग भरने और रूपरेखा बनाने के लिए fill को stroke तर्क के साथ उपयोग करें।

Circle()
    .fill(.yellow)
    .stroke(.orange, lineWidth: 3)

overlay से परिचय

overlay संशोधक एक दृश्य को दूसरे दृश्य के ऊपर रखता है। इसका उपयोग मौजूदा सामग्री पर सीमा, बैज या आइकन जोड़ने के लिए करें।

overlay से सीमाएँ

एक सामान्य तरीका है: पहले किसी आकार में रंग भरें, फिर overlay से उसकी stroke वाली प्रति जोड़ें। आपको साफ़ भरा हुआ कार्ड और स्पष्ट सीमा मिल जाएगी।

RoundedRectangle(cornerRadius: 12)
    .fill(.white)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(.gray, lineWidth: 1))

आइकन को ऊपर रखना

आप केवल आकारों को ही नहीं, किसी भी दृश्य को ऊपर रख सकते हैं। नई या महत्वपूर्ण वस्तुओं को उभारने के लिए कार्ड पर छोटा बैज या आइकन रखें।

Circle()
    .fill(.blue)
    .overlay(Text("3").foregroundStyle(.white))

overlay बनाम background

परतों को याद रखें: overlay किसी दृश्य के ऊपर रहता है, जबकि background उसके पीछे। सजावट किस ओर चाहिए, उसके अनुसार चुनें।

बैज बनाना

सुघड़ बैज, अवतार और कार्ड बनाने के लिए fill, stroke और overlay को मिलाएँ। सजावट के अधिकांश कामों के लिए ये तीन औज़ार पर्याप्त हैं। ✨

त्वरित जाँच

आप किसी भरे हुए आकार के ऊपर stroke वाली सीमा रखना चाहते हैं। कौन-सा संशोधक दृश्य को ऊपर रखता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Stroke, Fill और overlay

आपने fill से आकारों में रंग भरना, stroke से उनकी रूपरेखा बनाना और overlay से अतिरिक्त तत्व ऊपर रखना सीखा। अब आप वास्तविक बैज और कार्ड बना सकते हैं!

शुरुआत निःशुल्क

एआई शिक्षक के साथ Swift सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Stroke, Fill और overlay” पाठ निःशुल्क है?

हाँ—“Stroke, Fill और overlay” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और SwiftUI Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। SwiftUI Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Stroke, Fill और overlay” में मैं क्या सीखूँगा?

बैज और कार्ड के लिए आकृतियों की रूपरेखा बनाएँ और उनमें रंग भरें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ SwiftUI Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या SwiftUI Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर SwiftUI Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Stroke, Fill और overlay” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस SwiftUI Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर SwiftUI Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← SwiftUI Academy पर वापस जाएँ