📡 ♥️ 🙅🏾 सामग्री पायथन। ओपन कार्ड प्रभाव के साथ कस्टम कार्ड ➿ 👨🏿 🕴🏼

प्यारे, प्यारे प्रेमियों और विशेषज्ञों में अजगर!

इस लेख में मैं आपको दिखाऊंगा कि आप अपने कस्टम कार्ड्स में OpenGL इफ़ेक्ट कैसे लागू करते हैं यदि आप अपने अनुप्रयोगों में किवी फ्रेमवर्क और इस फ्रेमवर्क के लिए मटीरियल डिज़ाइन लाइब्रेरी, किवीएमडीएम जैसे क्रॉस-प्लेटफ़ॉर्म टूल्स का उपयोग करते हैं । चलो चलते हैं!

KivyMD के पास एक मानक घटक MDCard है - विभिन्न कस्टम कार्ड ( सामग्री डिज़ाइन कल्पना, कार्ड ) बनाने के लिए आधार वर्ग । यदि आप विवरण में नहीं जाते हैं, तो MDCard के हुड के नीचे सामान्य BoxLayout है - एक कंटेनर जो आपको एक ऊर्ध्वाधर या क्षैतिज अभिविन्यास में अन्य विगेट्स लगाने की अनुमति देता है। यही है, अगर आपको किसी तरह का कार्ड बनाने की आवश्यकता है, उदाहरण के लिए, उपयोगकर्ता के बारे में जानकारी, आप इसे स्वयं करते हैं। MDCard केवल रिप्पल_बेहवियर , टच_बेहवियर और कास्ट शैडो लागू करता है:

एक प्रोग्राम का एक उदाहरण जो एक खाली कार्ड प्रदर्शित करता है, इस प्रकार है:

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
Screen:  #  

    MDCard:  # 
        #    
        size_hint: .6, .5
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class TestCard(MDApp):
    def build(self):
        return Builder.load_string(KV)

TestCard().run()

परिणाम:

यह बहुत सरल लगता है। लेकिन क्या होगा अगर हम फोकस प्राप्त करने की स्थिति में ब्लर इफेक्ट वाला एक सुंदर कार्ड चाहते हैं? जैसे, उदाहरण के लिए, फ़्लटर UI डिज़ाइन एप्लिकेशन में :

खुद ही करना पड़ेगा! इसके अलावा, इस बारे में कुछ भी जटिल नहीं है। सबसे पहले, भविष्य के नक्शे का आधार वर्ग बनाएं:

class RestaurantCard(MDCard):
    source = StringProperty()  #     
    shadow = StringProperty()  #    -
    text = StringProperty()  #

कार्ड की मुख्य छवि:

छाया चित्र:

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

<RestaurantCard>
    elevation: 12

    RelativeLayout:

        # ,       .
        FitImage:  #   
            source: root.source

        FitImage:  # -
            source: root.shadow
            size_hint_y: None
            height: "120dp"

        MDLabel:  #  
            text: root.text
            markup: True
            size_hint_y: None
            height: self.texture_size[1]
            x: "10dp"
            y: "10dp"
            theme_text_color: "Custom"
            text_color: 1, 1, 1, 1

हम नक्शे पर RelativeLayout विजेट डालते हैं , जो हमें घटकों को इस तरह से एक के ऊपर एक मिलाने की अनुमति देता है:

सबसे पहले, हमने मुख्य छवि रखी, शीर्ष पर एक छाया और पाठ रखा। अब अगर हम अपना कोड चलाते हैं:

from kivy.lang import Builder
from kivy.properties import StringProperty

from kivymd.app import MDApp
from kivymd.uix.card import MDCard

KV = """
<RestaurantCard>
    elevation: 12

    RelativeLayout:

        FitImage:
            source: root.source

        FitImage:
            source: root.shadow
            size_hint_y: None
            height: "120dp"

        MDLabel:
            text: root.text
            markup: True
            size_hint_y: None
            height: self.texture_size[1]
            x: "10dp"
            y: "10dp"
            theme_text_color: "Custom"
            text_color: 1, 1, 1, 1


Screen:

    RestaurantCard:
        text: "[size=23][b]Restaurant[/b][/size]\\nTuborg Havnepark 15, Hellerup 2900 Denmark"
        shadow: "shadow-black.png"
        source: "restourant.jpg"
        pos_hint: {"center_x": .5, "center_y": .5}
        size_hint: .7, .5
"""


class RestaurantCard(MDCard):
    source = StringProperty()
    text = StringProperty()
    shadow = StringProperty()


class BlurCard(MDApp):
    def build(self):
        return Builder.load_string(KV)

BlurCard().run()

... हमें इसका परिणाम मिलता है:

और परिणाम, निश्चित रूप से, अपेक्षित से बहुत दूर है, क्योंकि हम कार्ड पर कोई धब्बा प्रभाव या गोल किनारों को नहीं देखेंगे। चलो धुंधले प्रभाव से शुरू करते हैं। किवी के पास एक मानक EffectWidget विजेट है जो अपने बच्चों को विभिन्न ग्राफिक प्रभाव लागू कर सकता है। यह कस्टम OpenGL shaders का उपयोग करके Fbo इंस्टेंसेस को रेंडर करके काम करता है। हमें मुख्य छवि और कार्ड पर छाया छवि पर धब्बा प्रभाव लागू करने की आवश्यकता है। इसलिए, हमें उनके घटकों को EffectWidget विजेट में रखना चाहिए:

#:import effect kivy.uix.effectwidget.EffectWidget
#:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect

<RestaurantCard>

    ...

    RelativeLayout:
        
        #   ,      .
        EffectWidget:
            #  .
            effects: (HorizontalBlurEffect(size=root.blur),)

            FitImage:
                source: root.source

            FitImage:
                source: root.shadow
                size_hint_y: None
                height: "120dp"

    ...

धुंधला प्रभाव की डिग्री के मूल्य के लिए एक फ़ील्ड जोड़ें:

class RestaurantCard(MDCard):
    ...
    blur = NumericProperty(8)

हम शुरू करते हैं और देखते हैं:

जब आप ओवर हो (यदि यह एक डेस्कटॉप है) या टैप करें (यदि यह मोबाइल है) तो कुछ भी नहीं होता है। कार्ड के लिए on_focus घटना का जवाब देने के लिए, हमें इस घटना को रेस्तरांकार्ड नियम के गुणों में पढ़ने और उन तरीकों को निर्दिष्ट करने में सक्षम करना होगा जिन्हें इस घटना के पंजीकृत होने पर निष्पादित किया जाएगा:

#:import Animation kivy.animation.Animation

<RestaurantCard>
    focus_behavior: True  #    on_focus
    # ,       .
    #   Animation,    .
    on_enter: Animation(blur=0, d=0.3).start(self)
    on_leave: Animation(blur=8, d=0.3).start(self)

पहले से बेहतर:

कार्ड के कोनों को ट्रिम करने के लिए, मैंने EffectWidget विजेट पर एक स्टैंसिल (स्टैंसिल) लगाने का फैसला किया:

#:import Stencil kivymd.uix.graphics.Stencil


#   ,   EffectWidget  Stencil.
<Effect@EffectWidget+Stencil>
    radius: [20,]


<RestaurantCard>
    ...

    RelativeLayout:

        Effect:
            ...

और अब सब कुछ काम करता है जैसा हमने योजना बनाई थी:

पूर्ण उदाहरण कोड

from kivy.lang import Builder
from kivy.properties import StringProperty, NumericProperty

from kivymd.app import MDApp
from kivymd.uix.card import MDCard

KV = """
#:import Stencil kivymd.uix.graphics.Stencil
#:import Animation kivy.animation.Animation
#:import effect kivy.uix.effectwidget.EffectWidget
#:import HorizontalBlurEffect kivy.uix.effectwidget.HorizontalBlurEffect


<Effect@EffectWidget+Stencil>
    radius: [20,]


<RestaurantCard>
    md_bg_color: 0, 0, 0, 0
    elevation: 12
    focus_behavior: True
    on_enter: Animation(blur=0, d=0.3).start(self)
    on_leave: Animation(blur=8, d=0.3).start(self)
    radius: [20,]

    RelativeLayout:

        Effect:
            effects: (HorizontalBlurEffect(size=root.blur),)

            FitImage:
                source: root.source

            FitImage:
                source: root.shadow
                size_hint_y: None
                height: "120dp"

        MDLabel:
            text: root.text
            markup: True
            size_hint_y: None
            height: self.texture_size[1]
            x: "10dp"
            y: "10dp"
            theme_text_color: "Custom"
            text_color: 1, 1, 1, 1


FloatLayout:

    RestaurantCard:
        text: "[size=23][b]Restaurant[/b][/size]\\nTuborg Havnepark 15, Hellerup 2900 Denmark"
        shadow: "shadow-black.png"
        source: "restourant.jpg"
        pos_hint: {"center_x": .5, "center_y": .5}
        size_hint: .7, .5
"""


class RestaurantCard(MDCard):
    source = StringProperty()
    text = StringProperty()
    shadow = StringProperty()
    blur = NumericProperty(8)


class BlurCard(MDApp):
    def build(self):
        return Builder.load_string(KV)


BlurCard().run()

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

सामग्री पायथन। ओपन कार्ड प्रभाव के साथ कस्टम कार्ड

More articles: