Á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ạo 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. Để hiểu rõ nhất cách hoạt động của tính năng này, hãy xem xét cách kết xuất biểu đồ cảnh:

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>

Trình kết xuất mặt đồng hồ vẽ các phần tử theo thứ tự trong khi duyệt qua cây cảnh.

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

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

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

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 mẹ sẽ không được tính đến.

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

  • Các phần tử đầu tiên và thứ ba là các phần tử MASK, vì vậy, các phần tử này đượ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 duy nhất không che
<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>

Ngoài SOURCE và MASK, ALL là tuỳ chọn thứ ba cho renderMode. 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ế độ kết hợp

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

Kể từ phiên bản 3, Định dạng mặt đồng hồ có thể áp dụng chế độ phối khi kết hợp các phần tử Part*.

Không giống như renderMode, giới thiệu một cơ chế đặc biệt để tạo nguồn và mặt nạ tương ứng, blendMode cung cấp quyền truy cập chung vào tất cả hiệu ứng chế độ kết hợp Đồ hoạ Android và áp dụng hiệu ứng theo thứ tự các phần tử xuất hiện 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 vì blendMode mặc định là 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>

Để minh hoạ cách sử dụng chế độ kết hợp, hãy chọn SRC_ATOP, bỏ qua 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="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>

Bạn có thể áp dụng các hiệu ứng phức tạp hơn, chẳng hạn như sử dụng COLOR_DODGE thay vì SRC_ATOP. Hiệu ứng này làm cho đích đến sáng hơn để phản ánh nguồn.

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

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à hiệu ứng kết hợp.

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 sử dụng phần tử blendMode và Part sử dụng phần tử renderMode được đặt thành MASK (hoặc ALL), thì phương pháp sau sẽ được áp dụng.

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

Ví dụ: hãy xem xét ví dụ trước đã sử dụng và thêm 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>

Hiệu suất

Việc sử dụng renderMode và blendMode đòi hỏi thêm các bước tính toán và vẽ. Tuỳ thuộc vào thiết bị đang chạy mặt đồng hồ, một số tính năng 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 của việc sử dụng các thành phần này đối với hiệu suất tổng thể của mặt đồng hồ.

Sử dụng màu phủ

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ụ:

<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>

Đ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]".