মুখোশ, মিশ্রণ প্রভাব, এবং tints প্রয়োগ করুন

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

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

ক্লিপিং মাস্ক অর্জনের জন্য WFF এর ১ম সংস্করণে renderMode চালু করা হয়েছিল।

দৃশ্যের অনুক্রমের Group এবং Part* উপাদানগুলিতে renderMode প্রয়োগ করা যেতে পারে। ওয়াচফেস রেন্ডারার দৃশ্য ট্রি অতিক্রম করার সময় উপাদানগুলিকে ক্রমানুসারে আঁকে।

যখন 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 উভয় হিসাবেই বিবেচনা করা উচিত যা কিছু পরিস্থিতিতে কার্যকর হতে পারে।

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

দ্রষ্টব্য : এই ক্ষমতাটি ওয়াচ ফেস ফর্ম্যাটের ৩য় এবং উচ্চতর সংস্করণে উপলব্ধ।

ভার্সন ৩ থেকে, ওয়াচ ফেস ফর্ম্যাট Part* উপাদানগুলি রচনা করার সময় একটি ব্লেন্ড মোড প্রয়োগ করার ক্ষমতা প্রদান করে।

renderMode বিপরীতে, যা যথাক্রমে সোর্স এবং মাস্ক তৈরির জন্য একটি বিশেষ প্রক্রিয়া প্রবর্তন করে, blendMode সমস্ত অ্যান্ড্রয়েড গ্রাফিক্স ব্লেন্ড মোড ইফেক্টগুলিতে সাধারণ অ্যাক্সেস প্রদান করে এবং দৃশ্য গ্রাফে উপাদানগুলি যে ক্রমে প্রদর্শিত হয় সেই ক্রমে ইফেক্ট প্রয়োগ করে।

স্বাভাবিক ক্রিয়াকলাপে, যখন দুটি 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 উপাদান উভয়ই থাকে যা 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]" ।