Áp dụng mặt nạ, hiệu ứng kết hợp và màu

Các phần tử Group và Part* cũng cung cấp các thuộc tính tintColor, renderMode và blendMode. Đây là những cách hiệu quả để điều chỉnh giao diện của các phần trên mặt đồng hồ.

Sử dụng mặt nạ cắt với chế độ kết xuất

renderMode được giới thiệu trong phiên bản 1 của WFF để đạt được mặt nạ cắt.

Bạn có thể áp dụng renderMode cho các phần tử Group và Part* trong hệ phân cấp cảnh. Trình kết xuất mặt đồng hồ vẽ các phần tử theo thứ tự trong khi di chuyển cây cảnh.

Khi renderMode được áp dụng cho một nút, hiệu ứng này sẽ chỉ áp dụng trong Group mẹ của nút đó. Các nút khác ở những nơi khác trong biểu đồ sẽ không bị ảnh hưởng.

Khi không có renderMode nào được chỉ định, giá trị mặc định là SOURCE, tức là phần tử được vẽ trực tiếp lên màn hình. Tuy nhiên, khi có một hoặc nhiều phần tử trong nút mẹ có MASK (hoặc ALL) được chỉ định, thì một phương pháp khác sẽ được sử dụng:

Một canvas ngoài màn hình sẽ được tạo
Tất cả các phần tử con có SOURCE được đặt (theo mặc định) đều được vẽ
1. Tất cả các phần tử con thuộc mặt nạ (MASK, ALL) đều được áp dụng cho canvas để cắt hình ảnh kết quả.

Xin lưu ý rằng điều này có nghĩa là thứ tự của các phần tử trong nút gốc sẽ không được tính đến.

Trong ví dụ sau, thành phần mẹ Scene chứa 3 thành phần con:

Phần tử thứ nhất và thứ ba là phần tử MASK, vì vậy, chúng được kết hợp với nhau để tạo thành một lớp che
Phần tử thứ hai là lớp không che duy nhất

<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

Ngoài SOURCE và MASK, lựa chọn thứ ba cho renderMode là ALL. ALL chỉ định rằng phần tử này phải được coi là cả SOURCE và MASK. Điều này có thể hữu ích trong một số trường hợp.

Sử dụng chế độ hoà trộn

Lưu ý: Chức năng này có trong phiên bản 3 trở lên của Định dạng mặt đồng hồ.

Từ phiên bản 3, Định dạng mặt đồng hồ cung cấp khả năng áp dụng một chế độ hoà trộn khi tạo các phần tử Part*.

Không giống như renderMode, lệnh này giới thiệu một cơ chế đặc biệt để lần lượt tạo nguồn và mặt nạ, blendMode cung cấp quyền truy cập chung vào tất cả hiệu ứng chế độ hoà trộn đồ hoạ Android và áp dụng hiệu ứng theo thứ tự xuất hiện của các phần tử trong biểu đồ cảnh.

Trong hoạt động bình thường, khi hai phần tử Part* được đặt trong cảnh, phần tử trên cùng sẽ che khuất hoặc che khuất một phần phần tử dưới cùng vì blendMode mặc định là 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

Để minh hoạ cách sử dụng chế độ hoà trộn, hãy chọn SRC_ATOP, loại bỏ các pixel nguồn không bao phủ pixel đích. Cụ thể, PartText là nguồn và đích đến là PartDraw.

Do đó, văn bản chỉ được vẽ trên hình chữ nhật chứ không được vẽ ở nơi khác trên mặt đồng hồ:

<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

Bạn có thể áp dụng các hiệu ứng phức tạp hơn, chẳng hạn như dùng COLOR_DODGE thay vì SRC_ATOP, giúp đích đến sáng hơn để phản chiếu nguồn.

Ví dụ về việc kết hợp nhiều phần tử Part* bằng cách sử dụng các chế độ hoà trộn HUE và 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

Những yếu tố nên cân nhắc

Các phần sau đây mô tả một số điểm cần cân nhắc khi sử dụng hiệu ứng cắt và hoà trộn.

Chế độ hoà trộn được áp dụng trước chế độ kết xuất

Nếu một nút chứa cả phần tử Part bằng cách sử dụng blendMode và phần tử Part bằng cách sử dụng renderMode được đặt thành MASK (hoặc ALL), thì phương pháp sau sẽ được áp dụng.

Nguồn được kết hợp, bao gồm cả việc áp dụng các chế độ blendMode
Sau đó, mặt nạ sẽ được áp dụng từ những phần tử chỉ định rendermode="MASK"

Ví dụ: xem xét ví dụ đã dùng trước đó và thêm vào một mặt nạ hình chữ nhật, lưu ý rằng thứ tự của phần tử được che không quan trọng:

<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

Hiệu suất

Việc sử dụng cả renderMode và blendMode đều đòi hỏi các bước tính toán và vẽ bổ sung. Tuỳ thuộc vào thiết bị mà mặt đồng hồ đang chạy, một số thao tác trong số này có thể được thực thi hiệu quả trong phần cứng được hỗ trợ, mặc dù điều này có thể không thực hiện được trên các thiết bị cũ.

Vì lý do này, hãy sử dụng renderMode và blendMode một cách thận trọng và lưu ý đến tác động mà việc sử dụng các thành phần này có thể gây ra đối với hiệu suất tổng thể của mặt đồng hồ.

Sử dụng tông màu

Bạn có thể áp dụng tintColor cho toàn bộ phần tử Part*, Group hoặc từng kim riêng lẻ như HourHand và MinuteHand, ví dụ:

<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

Điều này có thể hữu ích khi tạo kiểu cho toàn bộ phần của mặt đồng hồ, bao gồm cả việc áp dụng kiểu từ chế độ cài đặt của người dùng, ví dụ: tintcolor="[CONFIGURATION.myThemeColor.0]".

Áp dụng mặt nạ, hiệu ứng kết hợp và màu Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.