মাস্ক, ব্লেন্ড এফেক্ট ও টিন্ট প্রয়োগ করা

এছাড়াও, Group এবং Part* এলিমেন্ট tintColor, renderMode এবং blendMode অ্যাট্রিবিউট প্রদান করে, যা আপনার ওয়াচ ফেসে সেকশনের চেহারা অ্যাডজাস্ট করার শক্তিশালী উপায়।

রেন্ডার মোডের সাথে ক্লিপিং মাস্ক ব্যবহার করা

ক্লিপিং মাস্ক পাওয়ার জন্য WFF-এর ভার্সন ১-এ 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>

SOURCE ও MASK ছাড়াও renderMode-এর জন্য তৃতীয় বিকল্প হল ALL। ALL নির্দিষ্ট করে যে এলিমেন্টটিকে SOURCE ও MASK হিসেবে বিবেচনা করতে হবে, যা কিছু কিছু ক্ষেত্রে কাজে লাগতে পারে।

ব্লেন্ড মোড ব্যবহার করা

মনে রাখবেন: এই সুবিধাটি Watch Face Format-এর ভার্সন ৩ ও তার পরবর্তী যেকোনও ভার্সনে উপলভ্য।

ভার্সন ৩ থেকে, Part* এলিমেন্ট কম্পোজ করার সময়, Watch Face Format ব্লেন্ড মোড প্রয়োগ করার সুবিধা দেয়।

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>

ব্লেন্ড মোড ব্যবহারের ডেমোনস্ট্রেশন হিসেবে, 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>

আরও জটিল এফেক্ট প্রয়োগ করা যেতে পারে, যেমন 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 এলিমেন্ট এবং renderMode ব্যবহার করে Part এলিমেন্ট 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>

পারফর্ম্যান্স

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>

এটি ওয়াচফেসের সম্পূর্ণ অংশকে স্টাইল করার জন্য কাজে লাগতে পারে, এর মধ্যে ব্যবহারকারীর সেটিংস থেকে স্টাইল প্রয়োগ করা অন্তর্ভুক্ত, যেমন: tintcolor="[CONFIGURATION.myThemeColor.0]"।