ماسک ها را اعمال کنید، جلوه ها و رنگ ها را ترکیب کنید

عناصر Group و Part* همچنین ویژگی‌های tintColor, renderMode و blendMode را ارائه می‌کنند که روش‌های قدرتمندی برای تنظیم ظاهر بخش‌های صفحه ساعت شما هستند.

از ماسک های برش با حالت رندر استفاده کنید

renderMode در نسخه 1 WFF برای دستیابی به یک ماسک برش معرفی شد.

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>

گزینه سوم برای renderMode علاوه بر SOURCE و MASK ALL است. ALL مشخص می کند که عنصر باید هم به عنوان یک SOURCE و هم به عنوان یک MASK در نظر گرفته شود که می تواند در برخی سناریوها مفید باشد.

از حالت ترکیبی استفاده کنید

توجه : این قابلیت در نسخه 3 و بالاتر از فرمت Watch Face موجود است.

از نسخه 3، Watch Face Format توانایی اعمال یک حالت ترکیبی را هنگام ترکیب عناصر Part* ارائه می دهد.

برخلاف renderMode که به ترتیب مکانیزم خاصی را برای ساخت منبع و ماسک معرفی می‌کند، blendMode دسترسی کلی به تمام جلوه‌های حالت ترکیبی گرافیک اندروید را فراهم می‌کند و افکت‌ها را به ترتیبی که عناصر در نمودار صحنه ظاهر می‌شوند اعمال می‌کند.

در عملکرد عادی، زمانی که دو عنصر 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>

می‌توان جلوه‌های پیچیده‌تری را اعمال کرد، مانند استفاده از COLOR_DODGE به جای SRC_ATOP ، که مقصد را برای انعکاس منبع روشن‌تر می‌کند .

نمونه ای از ترکیب چندین عنصر Part* با استفاده از حالت های ترکیبی HUE و COLOR_BURN :

<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>

ملاحظات

بخش‌های زیر برخی از ملاحظات را توضیح می‌دهند که باید هنگام استفاده از افکت‌های برش و ترکیب به خاطر داشت.

حالت ترکیبی قبل از حالت رندر اعمال می شود

اگر یک گره دارای هر دو عنصر Part با استفاده از blendMode و عناصر 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>

عملکرد

استفاده از هر دو حالت 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]" مفید باشد.