החלת מסכות, אפקטים של שילוב צבעים וגוונים

הרכיבים Group ו-Part* מספקים גם את המאפיינים tintColor, renderMode ו-blendMode, שמאפשרים לשנות את המראה של חלקים בפני השעון.

שימוש במסכות חיתוך עם מצב עיבוד

התכונה renderMode נוספה בגרסה 1 של WFF כדי ליצור מסכת חיתוך.

אפשר להחיל את renderMode על רכיבי Group ו-Part* בהיררכיה של הסצנה. רכיב העיבוד של תצוגת השעון מצייר את הרכיבים לפי הסדר בזמן שהוא עובר על עץ הסצנה.

כשמחילים את renderMode על צומת, האפקט חל רק בתוך Group האב של הצומת הזה. הצמתים האחרים במקומות אחרים בתרשים לא מושפעים.

אם לא מציינים renderMode, ברירת המחדל היא SOURCE, כלומר הרכיב מצויר ישירות על המסך. עם זאת, אם יש אלמנט אחד או יותר בצומת האב עם MASK (או ALL), המערכת משתמשת בגישה אחרת:

  1. נוצר קנבס מחוץ למסך
  2. כל רכיבי הצאצא עם הערך SOURCE (שהוא ברירת המחדל) מוצגים
    1. כל רכיבי הצאצא שמהווים חלק מהמסכה (MASK, ALL) מוחלים על אזור הציור כדי לחתוך את התמונה שמתקבלת.

שימו לב: המשמעות היא שהסדר של הרכיבים בצומת ההורה לא נלקח בחשבון.

בדוגמה הבאה, תיקיית ההורה Scene מכילה שלוש תיקיות צאצא:

  • הרכיבים הראשון והשלישי הם רכיבי MASK, ולכן הם משולבים יחד ליצירת שכבת מיסוך.
  • הרכיב second הוא השכבה היחידה שלא משמשת כמסכה

<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, וזה יכול להיות שימושי בתרחישים מסוימים.

שימוש במצב מיזוג

הערה: היכולת הזו זמינה בגרסה 3 ומעלה של פורמט תצוגת השעון.

החל מגרסה 3, ב-Watch Face Format אפשר להחיל מצב מיזוג כשיוצרים רכיבי 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>
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, כדי להבהיר את היעד בהתאם למקור.

דוגמה לשילוב של כמה רכיבי 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]".