Halaman ini diterjemahkan oleh Cloud Translation API.

Menerapkan masker, efek gabungan, dan tint
Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Elemen Group dan Part* juga menyediakan atribut tintColor, renderMode dan blendMode yang merupakan cara efektif untuk menyesuaikan tampilan bagian tampilan jam Anda.

Menggunakan mask pemangkasan dengan mode render

renderMode diperkenalkan di WFF versi 1 untuk mendapatkan mask pemangkasan.

renderMode dapat diterapkan ke elemen Group dan Part* dalam hierarki adegan. Untuk lebih memahami cara kerjanya, pertimbangkan cara grafik tampilan dirender:

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

Perender tampilan jam menggambar elemen secara berurutan saat menjelajahi hierarki tampilan.

Saat renderMode diterapkan ke node, efek hanya berlaku dalam Group induk node tersebut. Node lain di bagian lain grafik tidak terpengaruh.

Jika tidak ada renderMode yang ditentukan, defaultnya adalah SOURCE, yang berarti elemen tersebut digambar langsung ke layar. Namun, jika satu atau beberapa elemen ada di node induk dengan MASK (atau ALL) yang ditentukan, maka pendekatan yang berbeda akan digunakan:

Kanvas di luar layar dibuat
Semua elemen turunan dengan SOURCE yang ditetapkan (yang merupakan default) digambar
1. Semua elemen turunan yang merupakan bagian dari mask (MASK, ALL) diterapkan ke kanvas untuk memotong gambar yang dihasilkan.

Perhatikan bahwa hal ini berarti urutan elemen di node induk tidak diperhitungkan.

Dalam contoh berikut, induk Scene berisi tiga turunan:

Elemen pertama dan ketiga adalah elemen MASK, sehingga digabungkan bersama untuk membentuk lapisan masking
Elemen kedua adalah satu-satunya lapisan non-masking

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

Opsi ketiga untuk renderMode selain SOURCE dan MASK adalah ALL. ALL menentukan bahwa elemen harus diperlakukan sebagai SOURCE dan sebagai MASK yang dapat berguna dalam beberapa skenario.

Menggunakan mode gabungan

Catatan: Kemampuan ini tersedia di Format Tampilan Jam versi 3 dan yang lebih tinggi.

Mulai versi 3, Format Tampilan Jam menawarkan kemampuan untuk menerapkan mode gabungan saat menyusun elemen Part*.

Tidak seperti renderMode, yang memperkenalkan mekanisme khusus untuk membuat sumber dan mask, blendMode menyediakan akses umum ke semua efek mode gabungan Grafik Android, dan menerapkan efek dalam urutan elemen muncul dalam grafik tampilan.

Dalam operasi normal, saat dua elemen Part* ditempatkan dalam tampilan, elemen paling atas akan mengaburkan atau mengaburkan sebagian elemen yang lebih rendah karena blendMode default adalah 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>

Sebagai demonstrasi penggunaan mode campuran, memilih SRC_ATOP akan menghapus piksel sumber yang tidak mencakup piksel tujuan. Yaitu, PartText adalah sumber, dan tujuannya adalah PartDraw.

Jadi, hasilnya, teks hanya digambar di atas persegi panjang, dan tidak di tempat lain pada tampilan jam:

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

Efek yang lebih kompleks dapat diterapkan, seperti menggunakan COLOR_DODGE, bukan SRC_ATOP, yang membuat tujuan lebih terang untuk mencerminkan sumber.

Contoh menggabungkan beberapa elemen Part* menggunakan mode gabungan HUE dan 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>

Tanpa efek blendMode

Dengan efek blendMode

Pertimbangan

Bagian berikut menjelaskan beberapa pertimbangan yang perlu diingat saat menggunakan efek pemangkasan dan gabungan.

Mode gabungan diterapkan sebelum mode render

Jika node berisi elemen Part yang menggunakan elemen blendMode dan Part yang menggunakan renderMode yang ditetapkan ke MASK (atau ALL), pendekatan berikut akan dilakukan.

Sumber digabungkan, termasuk penerapan mode blendMode
Topeng kemudian diterapkan dari elemen tersebut yang menentukan rendermode="MASK"

Misalnya, pertimbangkan contoh sebelumnya yang digunakan sebelumnya, dan tambahkan mask persegi panjang, dengan memperhatikan bahwa urutan elemen yang disamarkan tidak penting:

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

Performa

Penggunaan renderMode dan blendMode memerlukan langkah komputasi dan gambar tambahan. Bergantung pada perangkat tempat tampilan jam berjalan, beberapa hal ini dapat dieksekusi secara efisien di hardware yang didukung, meskipun hal ini mungkin tidak dapat dilakukan di perangkat lama.

Oleh karena itu, gunakan renderMode dan blendMode dengan cermat dan perhatikan dampak penggunaannya terhadap performa keseluruhan tampilan jam.

Menggunakan tint

tintColor dapat diterapkan ke seluruh elemen Part*, Group, atau setiap jarum seperti HourHand dan MinuteHand, misalnya:

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

Hal ini dapat berguna untuk menata gaya seluruh bagian tampilan jam, termasuk menerapkan gaya dari setelan pengguna, misalnya: tintcolor="[CONFIGURATION.myThemeColor.0]".

Menerapkan masker, efek gabungan, dan tint Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.