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

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

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

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

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

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

توجه: این قابلیت در نسخه ۳ و بالاتر «قالب صفحه ساعت» دردسترس است.

از نسخه ۳، «قالب صفحه ساعت» امکان اعمال حالت ترکیب هنگام ترکیب عناصر Part* را ارائه می‌دهد.

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

در عملکرد عادی، وقتی دو عنصر 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 استفاده کرد که مقصد را روشن‌تر می‌کند تا منبع را منعکس کند.

نمونه‌ای از ترکیب چندین عنصر 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 اعمال کرد، برای مثال:

<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]".