ใช้มาสก์ เอฟเฟกต์การผสม และการปรับสี

นอกจากนี้ เอลิเมนต์ Group และ Part* ยังมีแอตทริบิวต์ tintColor, renderMode และ blendMode ซึ่งเป็นวิธีที่มีประสิทธิภาพในการปรับลักษณะที่ปรากฏของส่วนต่างๆ ของหน้าปัด

ใช้มาสก์การตัดกับโหมดการแสดงผล

renderMode เปิดตัวใน WFF เวอร์ชัน 1 เพื่อใช้มาสก์การครอบตัด

renderMode ใช้ได้กับองค์ประกอบ Group และ Part* ในลําดับชั้นของฉาก ลองดูวิธีแสดงผลกราฟฉากเพื่อให้เข้าใจวิธีการทำงานของฟีเจอร์นี้ได้ดียิ่งขึ้น

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

โปรแกรมแสดงผลหน้าปัดจะวาดองค์ประกอบตามลําดับขณะที่ไปยังส่วนต่างๆ ของต้นไม้ฉาก

เมื่อใช้ renderMode กับโหนด ผลจะมีผลภายใน Group หลักของโหนดนั้นเท่านั้น ส่วนโหนดอื่นๆ ในกราฟจะไม่ได้รับผลกระทบ

หากไม่ได้ระบุ renderMode ค่าเริ่มต้นจะเป็น SOURCE ซึ่งหมายความว่าระบบจะวาดองค์ประกอบบนหน้าจอโดยตรง อย่างไรก็ตาม เมื่อองค์ประกอบอย่างน้อย 1 รายการอยู่ในโหนดหลักที่ระบุ MASK (หรือ ALL) ระบบจะใช้วิธีการอื่นดังนี้

  1. ระบบจะสร้างภาพพิมพ์แคนวาสนอกหน้าจอ
  2. ระบบจะวาดองค์ประกอบย่อยทั้งหมดที่มีการตั้งค่า SOURCE (ซึ่งเป็นค่าเริ่มต้น)
    1. ระบบจะนำองค์ประกอบย่อยทั้งหมดที่เป็นส่วนหนึ่งของมาสก์ (MASK, ALL) ไปใช้กับผืนผ้าใบเพื่อตัดรูปภาพที่ได้

โปรดทราบว่าการดำเนินการนี้จะไม่พิจารณาลําดับขององค์ประกอบในโหนดหลัก

ในตัวอย่างต่อไปนี้ รายการหลัก Scene มีรายการย่อย 3 รายการ

  • องค์ประกอบที่ 1 และ 3 เป็นองค์ประกอบ MASK จึงรวมเข้าด้วยกันเพื่อสร้างเลเยอร์การมาสก์
  • องค์ประกอบที่ 2 เป็นเลเยอร์เดียวที่ไม่ได้มาสก์
<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>

ตัวเลือกที่ 3 สำหรับ renderMode นอกเหนือจาก SOURCE และ MASK คือ ALL ALL ระบุว่าควรถือว่าองค์ประกอบเป็นทั้ง SOURCE และ MASK ซึ่งจะมีประโยชน์ในบางสถานการณ์

ใช้โหมดผสม

หมายเหตุ: ความสามารถนี้มีให้ใช้งานใน Watch Face Format เวอร์ชัน 3 ขึ้นไป

ตั้งแต่เวอร์ชัน 3 เป็นต้นไป Watch Face Format ให้คุณใช้โหมดการผสมเมื่อเขียนองค์ประกอบ Part*

ซึ่งแตกต่างจาก renderMode ที่ใช้กลไกพิเศษในการสร้างแหล่งที่มาและหน้ากากตามลำดับ blendMode ให้สิทธิ์เข้าถึงทั่วไปสำหรับเอฟเฟกต์โหมดการผสมกราฟิก Android ทั้งหมด และใช้เอฟเฟกต์ตามลำดับที่องค์ประกอบปรากฏในกราฟฉาก

ในการทํางานตามปกติ เมื่อวางองค์ประกอบ Part* 2 รายการไว้ในฉาก องค์ประกอบที่อยู่ด้านบนสุดจะบดบังหรือบดบังบางส่วนขององค์ประกอบที่ต่ำกว่าเนื่องจาก 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 ทั้ง 2 รายการที่ใช้ 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]"