Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Group ve Part* öğeleri, kadranınızın bölümlerinin görünümünü ayarlamak için güçlü yöntemler olan tintColor, renderMode ve blendMode özelliklerini de sağlar.

Oluşturma moduyla kırpma maskelerini kullanma

renderMode, kırpma maskesi oluşturmak için WFF'nin 1. sürümünde kullanıma sunulmuştur.

renderMode, sahne hiyerarşisindeki Group ve Part* öğelerine uygulanabilir. Bunun nasıl işlediğini daha iyi anlamak için sahne grafiğinin nasıl oluşturulduğunu düşünün:

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

Kadran oluşturma aracı, sahne ağacında gezinirken öğeleri sırayla çizer.

renderMode bir düğüme uygulandığında, etki yalnızca söz konusu düğümün üst Group içinde geçerli olur. Grafiğin diğer kısımlarındaki diğer düğümler bu durumdan etkilenmez.

renderMode belirtilmezse varsayılan değer SOURCE olur. Bu, öğenin doğrudan ekrana çizildiği anlamına gelir. 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 (MASK, ALL) parçası olan tüm alt öğeler, ortaya çıkan resmi kırpmak için kanvas üzerine uygulanır.

Bunun, üst düğümdeki öğelerin sırasının dikkate alınmadığı anlamına geldiğini unutmayın.

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

İlk ve üçüncü öğeler MASK öğeleri olduğundan maskeleme katmanı oluşturmak için birlikte birleştirilir.
İkinci öğe, maskeleme yapmayan tek katmandır.

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

SOURCE ve MASK'ye ek olarak renderMode için üçüncü seçenek ALL'tır. ALL, öğenin hem SOURCE hem de MASK olarak ele alınması gerektiğini belirtir. Bu, bazı senaryolarda yararlı olabilir.

Karışım modunu kullanma

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

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

Sırasıyla kaynak ve maskeyi oluşturmak için özel bir mekanizma sunan renderMode'in aksine blendMode, tüm Android Graphics karışım 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ğu için en üstteki öğe, alt öğeyi tamamen veya kısmen gizler.

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

Karışım modlarının kullanımını gösteren bir örnek olarak, SRC_ATOP seçildiğinde hedef pikselleri kaplamayan kaynak pikseller atılır. Yani PartText kaynak, PartDraw ise hedeftir.

Sonuç olarak, metin yalnızca dikdörtgenin üzerine çizilir ve kadran üzerinde başka bir yere çizilmez:

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

SRC_ATOP yerine COLOR_DODGE kullanmak gibi daha karmaşık efektler de uygulanabilir. Bu, kaynağı yansıtmak için hedefi daha parlak hale getirir.

HUE ve COLOR_BURN harmanlama modlarını kullanarak birden fazla Part* öğesini bir araya getirme ö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>

blendMode efektleri olmadan

blendMode efektleri

Dikkat edilmesi gereken noktalar

Aşağıdaki bölümlerde, kırpma ve karışım 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 kullanan Part öğeleri hem de MASK (veya ALL) olarak ayarlanmış renderMode kullanan Part öğeleri içeriyorsa aşağıdaki yaklaşım uygulanır.

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

Örneğin, daha önce kullanılan önceki örneği ele alıp maskelenmiş öğenin sırasının önemli olmadığını göz önünde bulundurarak bir dikdörtgen maske ekleyin:

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

Performans

renderMode ve blendMode'ü kullanmak için ek hesaplama ve çizim adımları gerekir. Kadranın çalıştığı cihaza bağlı olarak, bunların bir kısmı desteklenen donanımlarda verimli bir şekilde yürütülebilir ancak bu, eski cihazlarda mümkün olmayabilir.

Bu nedenle, renderMode ve blendMode'u dikkatli bir şekilde kullanın ve bunların kullanımının kadran genel performansı üzerindeki etkisine dikkat edin.

Tonları kullanma

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

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

Bu, kullanıcı ayarlarından stil uygulamak da dahil olmak üzere kadranın bir bölümünün tamamını biçimlendirmek için yararlı olabilir. Örneğin: 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.