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

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

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

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

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

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>
 INSERT ALT TEXT HERE

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

כשמחילים את 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 ואילך של פורמט מסך השעון.

החל מגרסה 3, ב-Watch Face Format יש אפשרות להחיל מצב מיזוג כשמרכיבים רכיבי Part*.

בניגוד ל-renderMode, שמציג מנגנון מיוחד ליצירת המקור והמסכה, blendMode מספק גישה כללית לכל האפקטים של שיטות המיזוג של Android Graphics, ומחיל את האפקטים לפי הסדר שבו הרכיבים מופיעים בתרשים הסצינה.

במצב עבודה רגיל, כששני רכיבי 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>
INSERT ALT TEXT HERE

ללא אפקטים של blendMode

 INSERT ALT TEXT HERE

עם אפקטים של blendMode

שיקולים

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

מצב המיזוג מיושם לפני מצב הרינדור

אם צומת מכיל גם אלמנטים של 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]".