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

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

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

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

renderMode ใช้ได้กับองค์ประกอบ Group และ Part* ในลำดับชั้นของฉาก ตัวแสดงผลหน้าปัดจะวาดองค์ประกอบตามลำดับขณะที่เคลื่อนผ่าน โครงสร้างฉาก

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

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

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

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

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

  • องค์ประกอบแรกและสามคือองค์ประกอบ MASK ดังนั้นระบบจะรวมองค์ประกอบเหล่านี้เข้าด้วยกันเพื่อสร้างเลเยอร์มาสก์
  • องค์ประกอบที่ 2 เป็นเลเยอร์ที่ไม่ใช่มาสก์เพียงเลเยอร์เดียว

<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

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

ใช้โหมดผสม

หมายเหตุ: ความสามารถนี้พร้อมให้บริการในเวอร์ชัน 3 ขึ้นไปของรูปแบบหน้าปัดนาฬิกา

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

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

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