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

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" he>igh<t=&qu>ot;45<0"
  Scene
    PartDraw x="175" y="50" wi>dth=&qu<ot;100" height="100" renderMo>de="<MASK"
      Ell><ipse >x="<;0"> y=&q<uot;0&quo>t; wid<th="100" height="100"
   >     Fi<ll color="#FFFFFF"/Fill
      /Ellip>se
    /P<artDraw

    PartDra>w x="0<" y="0" width="450" height="450"
      Rectangle x="0" y>="0&<quot;> width=<"450&>quot;< height=&>quot;4<50"
        Fill color="#ff0000"
          LinearG>radient< startX="0&quo>t; startY<="0" endX="450" endY="450"
     >      < colors=&quo<t;...>"<; positio>ns=<">.<.." />
        /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 এবং উচ্চতর সংস্করণে উপলব্ধ।

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

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

স্বাভাবিক ক্রিয়াকলাপে, যখন একটি দুটি Part* উপাদান দৃশ্যে স্থাপন করা হয়, তখন উপরের-সবচেয়ে অস্পষ্ট বা আংশিকভাবে নিম্ন উপাদানটিকে অস্পষ্ট করে কারণ ডিফল্ট blendMode হল SRC_OVER ।

<PartDraw x="25" y="15" widt>h=&<quot;150" height="150"
  Rectan>gle x<="0" y=">;0&<quot; widt>h<="15>0<" height="150"
    Fill color=&q>uot<;#ffd3ba" /
 > /Rec<tangle
/PartDraw
PartText x="35" y="60" wi>dth=&q<uot;3>00&<quot;> <height=&q>uot;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" widt>h=&<quot;150" height="150"
  Rectan>gle x<="0" y=">;0&<quot; widt>h<="15>0<" height="150"
    Fill color="#ffd3ba" /
 > /R<ectangle
/PartDraw>
Part<Text x="35" y="60" width="300" h>eight=<">;12<0&quo>t<; blendMo>de="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&>quo<t; width="300" height="300">
  Pa<rtDraw x="25" y="15" width>="<150" height=">;150&<quot;
    >Rec<tangle x=>&qu<ot;0" y="0" width="150" height="15>0&quo<t;
      Fill color="#ffd3ba" /
  >  /Rect<angle
  /PartDraw
  Pa>rtDra<w x=&quo>t;1<00" >y=&<quot;15" width="150" height="150" blendMode=&>quot;<HUE"
    Elli>pse x=&<quot;0" y="0" width="150" height=&quo>t;150&<quot;>
    <  Fill c<olor=&quo>t<;#219e>bc" /
    /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 ব্যবহার করে MASK (বা ALL ) উভয় Part উপাদান থাকে, তাহলে নিম্নলিখিত পদ্ধতিটি নেওয়া হয়।

  1. blendMode মোডের প্রয়োগ সহ উৎসটি সংমিশ্রিত
  2. rendermode="MASK " নির্দিষ্ট করে সেই উপাদানগুলি থেকে মুখোশটি প্রয়োগ করা হয়।

উদাহরণস্বরূপ, পূর্বে ব্যবহৃত পূর্ববর্তী উদাহরণ বিবেচনা করে এবং একটি আয়তক্ষেত্র মাস্ক যোগ করা, উল্লেখ্য যে মুখোশযুক্ত উপাদানের ক্রম কোন ব্যাপার নয়:

<Group name="container" x="75" y="100&>quo<t; width="300" height="300">
  Pa<rtDraw x="25" y="15" width>="<150" height=">;150&<quot;
    >Rec<tangle x=>&qu<ot;0" y="0" width="150" height="15>0&quo<t;
      Fill color="#ffd3ba" /
  >  /Rect<angle
  /PartDraw
  Pa>rtDra<w x=&quo>t;1<00" >y=&<quot;15" width="150" height="150" blendMo>de=&q<uot;HUE"
    Ellipse x="0" y=&q>uot;0&q<uot; width="150&q>uot; <height=&qu>ot;<150">
  <    Fill color="#219ebc" /
    /Ellipse
  /PartDraw
  PartDr>aw x=<"100" y=>"1<5" width="150" height="150" renderMod>e=&quo<t;MAS>K&quo<t;
  >  R<ectangle >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" he>igh<t=&qu>ot;45<0"
  Scene
    Group x="75" y="100" width="350&qu>ot; hei<ght="350" name="group1" ti>ntColor=&<quot;#ffd3ba"
      PartDraw x="25&q>uot; y=&quo<t;0" width=">100"< height=&q>uot;100<"
  >      R<ectangle x="0" y="0" width=>"100<" height="100"
          Fill >color="<;#ffffff" /
     >   /Recta<ngle
   >   /Par<tDraw
   >   Part<Draw x="150" y="0" width=&>quot;100&<quot; height=">100"
 <       Ellipse x="25" y="0" width="10>0"<; hei>ght="<;100&>quot;
 <         >Fill <color=>&qu<ot;#ff>f<fff" >/
        /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]" ।