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

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

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

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

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

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>

स्मार्टवॉच की होम स्क्रीन रेंडरर, सीन ट्री को ट्रैवर्स करते समय एलिमेंट को क्रम में ड्रॉ करता है.

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

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

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

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

नीचे दिए गए उदाहरण में, Scene पैरंट में तीन बच्चे हैं:

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

<WatchFace width="450" height="450">
  <Scene>
    <PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
      <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF"></Fill>
      </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="..." positions="..." />
        </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>
  </Scene>
</WatchFace>

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

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

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

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

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

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

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

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

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

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120" blendMode="SRC_ATOP">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

ज़्यादा जटिल इफ़ेक्ट भी लागू किए जा सकते हैं. जैसे, 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>

ज़रूरी बातें

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

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

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

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>

परफ़ॉर्मेंस

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

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

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

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

<WatchFace width="450" height="450">
  <Scene>
    <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>
  </Scene>
</WatchFace>

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