Menerapkan masker, efek gabungan, dan tint

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

Menggunakan mask kliping dengan mode rendering

renderMode diperkenalkan di WFF versi 1 untuk mendapatkan clipping mask.

renderMode dapat diterapkan ke elemen Group dan Part* dalam hierarki adegan. Perender tampilan jam menggambar elemen secara berurutan saat melintasi hierarki adegan.

Jika renderMode diterapkan ke node, efeknya hanya berlaku dalam Group induk node tersebut. Node lain di tempat lain dalam grafik tidak terpengaruh.

Jika tidak ada renderMode yang ditentukan, defaultnya adalah SOURCE, yang berarti elemen 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 set SOURCE (yang merupakan default) akan digambar
1. Semua elemen turunan yang merupakan bagian dari mask (MASK, ALL) diterapkan ke kanvas untuk menggunting gambar yang dihasilkan.

Perhatikan bahwa 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 untuk membentuk lapisan masking
Elemen kedua adalah satu-satunya lapisan yang tidak menerapkan masking

<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

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 campuran

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

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

Tidak seperti renderMode, yang memperkenalkan mekanisme khusus untuk membuat sumber dan mask masing-masing, blendMode menyediakan akses umum ke semua efek mode campuran Grafis Android, dan menerapkan efek dalam urutan elemen muncul dalam grafik adegan.

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

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.

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

<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

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

Contoh penggabungan beberapa elemen Part* menggunakan mode campuran 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>watchface_effects.xml

Pertimbangan

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

Mode campuran diterapkan sebelum mode render

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

Sumber dikomposit, termasuk penerapan mode blendMode
Masker kemudian diterapkan dari elemen yang menentukan rendermode="MASK"

Misalnya, dengan mempertimbangkan contoh sebelumnya yang digunakan, dan menambahkan mask persegi panjang, perhatikan bahwa urutan elemen yang diberi mask tidaklah 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>watchface_effects.xml

Performa

Penggunaan renderMode dan blendMode memerlukan langkah komputasi dan penggambaran tambahan. Bergantung pada perangkat tempat tampilan jam berjalan, beberapa di antaranya 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 bijak dan perhatikan dampak yang mungkin ditimbulkan oleh penggunaannya terhadap performa keseluruhan tampilan jam.

Menggunakan tint

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

<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

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.