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

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

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

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

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>
watchface_effects.xml

گزینه سوم برای renderMode علاوه بر SOURCE و MASK ، 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

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

مثالی از ترکیب چندین عنصر 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>
watchface_effects.xml

ملاحظات

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

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

اگر یک گره شامل هر دو عنصر 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>
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]" .