मास्क, ब्लेंड इफ़ेक्ट, और टिन्ट लागू करना

Group और Part* एलिमेंट में tintColor, renderMode और blendMode एट्रिब्यूट भी होते हैं. इनकी मदद से, वॉच फ़ेस के सेक्शन की थीम को आसानी से बदला जा सकता है.

रेंडर मोड के साथ क्लिपिंग मास्क का इस्तेमाल करना

क्लिपिंग मास्क बनाने के लिए, WFF के वर्शन 1 में renderMode को लॉन्च किया गया था.

renderMode को सीन के क्रम में मौजूद Group और Part* एलिमेंट पर लागू किया जा सकता है. वॉच फ़ेस रेंडरर, सीन ट्री को ट्रैवर्स करते समय एलिमेंट को क्रम से दिखाता है.

जब किसी नोड पर renderMode लागू किया जाता है, तो इसका असर सिर्फ़ उस नोड के पैरंट Group पर पड़ता है. ग्राफ़ में मौजूद अन्य नोड पर इसका कोई असर नहीं पड़ता.

अगर कोई renderMode नहीं दी गई है, तो डिफ़ॉल्ट रूप से SOURCE का इस्तेमाल किया जाता है. इसका मतलब है कि एलिमेंट को सीधे स्क्रीन पर दिखाया जाता है. हालांकि, जब पैरंट नोड में MASK (या ALL) के साथ एक या उससे ज़्यादा एलिमेंट मौजूद होते हैं, तो अलग तरीका इस्तेमाल किया जाता है:

  1. स्क्रीन से बाहर एक कैनवस बनाया जाता है
  2. SOURCE सेट किए गए सभी चाइल्ड एलिमेंट (यह डिफ़ॉल्ट होता है) बनाए जाते हैं
    1. मास्क (MASK, ALL) का हिस्सा बनने वाले सभी चाइल्ड एलिमेंट, कैनवस पर लागू होते हैं. इससे इमेज को क्लिप किया जाता है.

ध्यान दें कि इसका मतलब है कि पैरंट नोड में मौजूद एलिमेंट के क्रम को ध्यान में नहीं रखा जाता.

यहां दिए गए उदाहरण में, Scene पैरंट में तीन चाइल्ड शामिल हैं:

  • पहले और तीसरे एलिमेंट, MASK एलिमेंट हैं. इसलिए, इन्हें एक साथ मिलाकर मास्किंग लेयर बनाई जाती है
  • दूसरा एलिमेंट, सिर्फ़ नॉन-मास्किंग लेयर है

<PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
    <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF" />
    </Ellipse>
</PartDraw>

<PartDraw x="0" y="0" width="450" height="450">
    <Rectangle x="0" y="0" width="450" height="450">
        <Fill color="#ff0000">
            <LinearGradient startX="0" startY="0" endX="450" endY="450"
                colors="#FFFF00 #00FFFF #FF00FF" positions="0.25 0.5 0.75" />
        </Fill>
    </Rectangle>
</PartDraw>

<PartText x="75" y="250" width="300" height="80" renderMode="MASK">
    <Text align="CENTER">
        <Font family="pacifico" size="72" weight="BOLD" color="#FFFFFF">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

SOURCE और MASK के अलावा, renderMode के लिए तीसरा विकल्प ALL है. ALL से पता चलता है कि एलिमेंट को SOURCE और MASK, दोनों के तौर पर इस्तेमाल किया जाना चाहिए. यह कुछ मामलों में फ़ायदेमंद हो सकता है.

ब्लेंड मोड का इस्तेमाल करना

ध्यान दें: यह सुविधा, वॉच फ़ेस फ़ॉर्मैट के वर्शन 3 और इसके बाद के वर्शन पर उपलब्ध है.

Watch Face Format के तीसरे वर्शन से, Part* एलिमेंट बनाते समय ब्लेंड मोड लागू किया जा सकता है.

renderMode, सोर्स और मास्क बनाने के लिए एक खास तरीके का इस्तेमाल करता है. वहीं, blendMode, Android Graphics के सभी ब्लेंड मोड इफ़ेक्ट का सामान्य ऐक्सेस देता है. साथ ही, सीन ग्राफ़ में एलिमेंट जिस क्रम में दिखते हैं उसी क्रम में इफ़ेक्ट लागू करता है.

सामान्य तौर पर, सीन में दो Part* एलिमेंट रखने पर, सबसे ऊपर वाला एलिमेंट, नीचे वाले एलिमेंट को पूरी तरह या कुछ हद तक छिपा देता है. ऐसा इसलिए होता है, क्योंकि डिफ़ॉल्ट blendMode, SRC_OVER होता है.

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

ब्लेंड मोड का इस्तेमाल करने के उदाहरण के तौर पर, SRC_ATOP चुनने पर, सोर्स पिक्सल को हटा दिया जाता है जो डेस्टिनेशन पिक्सल को कवर नहीं करते हैं. इसका मतलब है कि PartText सोर्स है और PartDraw डेस्टिनेशन है.

इसलिए, टेक्स्ट सिर्फ़ रेक्टैंगल पर दिखता है, वॉच फ़ेस पर कहीं और नहीं:

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120" blendMode="SRC_ATOP">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>
watchface_effects.xml

ज़्यादा जटिल इफ़ेक्ट लागू किए जा सकते हैं. जैसे, SRC_ATOP के बजाय COLOR_DODGE का इस्तेमाल करना. इससे सोर्स को दिखाने के लिए डेस्टिनेशन ज़्यादा चमकदार हो जाता है.

HUE और COLOR_BURN ब्लेंड मोड का इस्तेमाल करके, एक से ज़्यादा Part* एलिमेंट को एक साथ दिखाने का उदाहरण:

<Group name="container" x="75" y="100" width="300" height="300">
    <PartDraw x="25" y="15" width="150" height="150">
        <Rectangle x="0" y="0" width="150" height="150">
            <Fill color="#ffd3ba" />
        </Rectangle>
    </PartDraw>
    <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
        <Ellipse x="0" y="0" width="150" height="150">
            <Fill color="#219ebc" />
        </Ellipse>
    </PartDraw>
    <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
        <Text align="START">
            <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
        </Text>
    </PartText>
</Group>
watchface_effects.xml

ज़रूरी बातें

यहां दिए गए सेक्शन में, क्लिपिंग और ब्लेंड इफ़ेक्ट का इस्तेमाल करते समय ध्यान रखने वाली कुछ बातों के बारे में बताया गया है.

रेंडर मोड से पहले ब्लेंड मोड लागू होता है

अगर किसी नोड में blendMode का इस्तेमाल करने वाले Part एलिमेंट और renderMode का इस्तेमाल करने वाले Part एलिमेंट, दोनों मौजूद हैं और renderMode को MASK (या ALL) पर सेट किया गया है, तो यहां दिया गया तरीका अपनाया जाता है.

  1. सोर्स को कंपोज़ किया जाता है. इसमें blendMode मोड लागू करना भी शामिल है
  2. इसके बाद, मास्क को उन एलिमेंट पर लागू किया जाता है जिनमें rendermode="MASK" की जानकारी दी गई है

उदाहरण के लिए, पहले इस्तेमाल किए गए उदाहरण को ध्यान में रखते हुए, आयताकार मास्क जोड़ें. ध्यान दें कि मास्क किए गए एलिमेंट के क्रम से कोई फ़र्क़ नहीं पड़ता:

<Group name="container" x="75" y="100" width="300" height="300">
    <PartDraw x="25" y="15" width="150" height="150">
        <Rectangle x="0" y="0" width="150" height="150">
            <Fill color="#ffd3ba" />
        </Rectangle>
    </PartDraw>
    <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
        <Ellipse x="0" y="0" width="150" height="150">
            <Fill color="#219ebc" />
        </Ellipse>
    </PartDraw>
    <PartDraw x="100" y="15" width="150" height="150" renderMode="MASK">
        <Rectangle x="0" y="0" width="150" height="150">
            <Fill color="#ffffff" />
        </Rectangle>
    </PartDraw>
    <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
        <Text align="START">
            <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
        </Text>
    </PartText>
</Group>
watchface_effects.xml

परफ़ॉर्मेंस

renderMode और blendMode, दोनों का इस्तेमाल करने के लिए, अतिरिक्त कंप्यूटेशन और ड्राइंग के चरणों की ज़रूरत होती है. वॉच फ़ेस जिस डिवाइस पर चल रहा है उसके हिसाब से, इनमें से कुछ को बेहतर तरीके से काम करने वाले हार्डवेयर में इस्तेमाल किया जा सकता है. हालांकि, ऐसा पुराने डिवाइसों पर नहीं किया जा सकता.

इसलिए, renderMode और blendMode का इस्तेमाल सोच-समझकर करें. साथ ही, ध्यान रखें कि इनके इस्तेमाल से वॉच फ़ेस की परफ़ॉर्मेंस पर क्या असर पड़ सकता है.

टिंट का इस्तेमाल करना

tintColor को पूरे Part* एलिमेंट, Group या अलग-अलग हाथों, जैसे कि HourHand और MinuteHand पर लागू किया जा सकता है. उदाहरण के लिए:

<Group x="75" y="100" width="350" height="350" name="group1" tintColor="#ffd3ba">
    <PartDraw x="25" y="0" width="100" height="100">
        <Rectangle x="0" y="0" width="100" height="100">
            <Fill color="#ffffff" />
        </Rectangle>
    </PartDraw>
    <PartDraw x="150" y="0" width="100" height="100">
        <Ellipse x="25" y="0" width="100" height="100">
            <Fill color="#ffffff" />
        </Ellipse>
    </PartDraw>
    <PartText x="0" y="150" width="300" height="80">
        <Text align="CENTER">
            <Font family="pacifico" size="72" weight="BOLD" color="#ffffff">Hello!</Font>
        </Text>
    </PartText>
</Group>
watchface_effects.xml

यह वॉच फ़ेस के पूरे सेक्शन को स्टाइल करने के लिए काम आ सकता है. इसमें उपयोगकर्ता की सेटिंग से स्टाइल लागू करना भी शामिल है. उदाहरण के लिए: tintcolor="[CONFIGURATION.myThemeColor.0]".