Maske, karışım efekti ve ton uygulama

Group ve Part* öğeleri, kadranınızın bölümlerinin görünümünü ayarlamanın etkili yolları olan tintColor, renderMode ve blendMode özelliklerini de sağlar.

Kırpma maskelerini oluşturma moduyla kullanma

Kırpma maskesi elde etmek için WFF'nin 1. sürümünde renderMode tanıtıldı.

renderMode, sahne hiyerarşisindeki Group ve Part* öğelerine uygulanabilir. Kadran oluşturucu, sahne ağacında gezinirken öğeleri sırayla çizer.

renderMode bir düğüme uygulandığında efekt yalnızca o düğümün üst Group öğesi içinde geçerli olur. Grafikteki diğer düğümler etkilenmez.

renderMode belirtilmediğinde varsayılan değer SOURCE olur. Bu durumda öğe doğrudan ekrana çizilir. Ancak üst düğümde MASK (veya ALL) belirtilmiş bir veya daha fazla öğe varsa farklı bir yaklaşım kullanılır:

Ekran dışı bir tuval oluşturulur
SOURCE ayarlanmış (varsayılan) tüm alt öğeler çizilir.
1. Maskenin parçası olan tüm alt öğeler (MASK, ALL), ortaya çıkan resmi kırpmak için tuvale uygulanır.

Bu durumda, üst düğümdeki öğelerin sırasının dikkate alınmadığını unutmayın.

Aşağıdaki örnekte, Scene üst öğesi üç alt öğe içeriyor:

Birinci ve üçüncü öğeler MASK öğeleridir. Bu nedenle, maskeleme katmanı oluşturmak için birlikte birleştirilirler.
İkinci öğe, maskelenmeyen tek katmandır.

<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

SOURCE ve MASK'ye ek olarak renderMode için üçüncü seçenek ALL'dir. ALL, öğenin hem SOURCE hem de MASK olarak değerlendirilmesi gerektiğini belirtir. Bu, bazı senaryolarda faydalı olabilir.

Harmanlama modunu kullanma

Not: Bu özellik, Watch Face Format'ın 3. ve sonraki sürümlerinde kullanılabilir.

Saat Kadranı Formatı, 3. sürümden itibaren Part* öğelerini oluştururken karıştırma modu uygulama olanağı sunar.

Kaynak ve maske oluşturmak için özel bir mekanizma sunan renderMode'nın aksine, blendMode tüm Android Graphics karıştırma modu efektlerine genel erişim sağlar ve efektleri öğelerin sahne grafiğinde göründüğü sırayla uygular.

Normal çalışmada, sahneye iki Part* öğesi yerleştirildiğinde varsayılan blendMode SRC_OVER olduğundan en üstteki öğe, alttaki öğeyi kapatır veya kısmen kapatır.

<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

Karıştırma modlarının kullanımını göstermek için SRC_ATOP seçildiğinde hedef pikselleri kapsamayan kaynak pikseller atılır. Yani PartText kaynak, PartDraw ise hedeftir.

Bu nedenle, metin yalnızca dikdörtgenin üzerine çizilir ve saat yüzünün başka hiçbir yerinde gösterilmez:

<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 yerine SRC_ATOP kullanmak gibi daha karmaşık efektler uygulanabilir. Bu efekt, kaynağı yansıtmak için hedefi daha parlak hale getirir.

HUE ve COLOR_BURN harmanlama modlarını kullanarak birden fazla Part* öğesini birleştirme örneği:

<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

Dikkat edilmesi gereken noktalar

Aşağıdaki bölümlerde, kırpma ve karıştırma efektlerini kullanırken dikkat edilmesi gereken bazı noktalar açıklanmaktadır.

Karıştırma modu, oluşturma modundan önce uygulanır.

Bir düğüm hem blendMode kullanılarak Part öğelerini hem de MASK (veya ALL) olarak ayarlanmış renderMode kullanılarak Part öğelerini içeriyorsa aşağıdaki yaklaşım uygulanır.

Kaynak, blendMode modlarının uygulanması da dahil olmak üzere birleştirilmiştir.
Ardından, maske rendermode="MASK belirten bu öğelerden uygulanır.

Örneğin, daha önce kullanılan örneği göz önünde bulundurarak ve dikdörtgen maske ekleyerek, maskelenen öğenin sırasının önemli olmadığını belirterek:

<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

Performans

renderMode ve blendMode'nin kullanılması için ek hesaplama ve çizim adımları gerekir. Saat yüzünün çalıştığı cihaza bağlı olarak, desteklenen donanımlarda bu işlemlerin bazıları verimli bir şekilde yürütülebilir. Ancak bu, eski cihazlarda mümkün olmayabilir.

Bu nedenle, renderMode ve blendMode öğelerini dikkatli bir şekilde kullanın ve bunların kullanımının saat yüzünün genel performansı üzerindeki etkisini göz önünde bulundurun.

Renk tonlarını kullanma

tintColor, Part* öğesinin tamamına, Group'ye veya HourHand ve MinuteHand gibi ayrı ellere uygulanabilir. Örneğin:

<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

Bu, kadranın tamamına stil uygulamak için faydalı olabilir. Örneğin, kullanıcı ayarlarındaki stili uygulamak gibi: tintcolor="[CONFIGURATION.myThemeColor.0]".

Maske, karışım efekti ve ton uygulama Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.