Эта страница переведена с помощью Cloud Translation API.

Применяйте маски, смешивайте эффекты и оттенки

Элементы Group и Part* также предоставляют атрибуты tintColor, renderMode и blendMode которые являются эффективными способами настройки внешнего вида разделов циферблата часов.

Используйте маски обрезки с режимом рендеринга

renderMode был представлен в версии 1 WFF для создания маски отсечения.

renderMode может быть применен к элементам Group и Part* в иерархии сцены. Чтобы лучше понять, как это работает, рассмотрим, как визуализируется граф сцены:

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

Визуализатор циферблата отрисовывает элементы по порядку, перемещаясь по дереву сцены.

Когда renderMode применяется к узлу, эффект применяется только в родительской Group этого узла. Другие узлы в других местах графика не затрагиваются.

Если не указано renderMode , значением по умолчанию является SOURCE , что означает, что элемент рисуется непосредственно на экране. Однако, когда в родительском узле присутствует один или несколько элементов с указанным MASK (или ALL ), то используется другой подход:

Создается закадровый холст
Все дочерние элементы с установленным SOURCE (который используется по умолчанию) отрисовываются
1. Все дочерние элементы, являющиеся частью маски ( MASK, ALL ), применяются к холсту для обрезки результирующего изображения.

Обратите внимание, что это означает, что порядок элементов в родительском узле не учитывается.

В следующем примере родительский элемент Scene содержит трех дочерних элементов:

Первый и третий элементы — это элементы MASK , поэтому они объединяются вместе, образуя маскирующий слой.
Второй элемент — единственный немаскирующий слой.

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

Третий параметр renderMode в дополнение к SOURCE и MASK — ALL . ALL указывает, что элемент следует рассматривать и как SOURCE , и как MASK , что может быть полезно в некоторых сценариях.

Использовать режим смешивания

Примечание : эта возможность доступна в формате циферблата версии 3 и выше.

Начиная с версии 3, формат циферблата часов позволяет применять режим смешивания при компоновке элементов Part* .

В отличие от renderMode , который вводит специальный механизм для построения источника и маски соответственно, blendMode предоставляет общий доступ ко всем эффектам режима наложения Android Graphics и применяет эффекты в том порядке, в котором элементы появляются в графе сцены.

При нормальной работе, когда на сцене размещены два элемента Part* , самый верхний из них закрывает или частично закрывает нижний элемент, поскольку blendMode по умолчанию — 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>

В качестве демонстрации использования режимов смешивания, выбор SRC_ATOP отбрасывает исходные пиксели, которые не покрывают целевые пиксели . А именно, PartText является источником, а назначением является PartDraw .

В результате текст отображается только поверх прямоугольника, а не где-либо еще на циферблате:

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

Можно применять более сложные эффекты, например, использовать COLOR_DODGE вместо SRC_ATOP , что делает конечный объект ярче, отражая источник .

Пример объединения нескольких элементов Part* с использованием режимов наложения HUE и 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>

Соображения

В следующих разделах описываются некоторые соображения, которые следует учитывать при использовании эффектов обрезки и наложения.

Режим смешивания применяется перед режимом рендеринга.

Если узел содержит как элементы Part , использующие blendMode , так и элементы Part , использующие renderMode установленный на MASK (или ALL ), то применяется следующий подход.

Источник является составным, включая применение режимов blendMode
Затем маска применяется из тех элементов, указывающих rendermode="MASK "

Например, рассмотрим предыдущий пример, использованный ранее, и добавим прямоугольную маску, отметив, что порядок маскируемого элемента не имеет значения:

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

Производительность

Использование renderMode и blendMode требует дополнительных вычислений и этапов рисования. В зависимости от устройства, на котором запущен циферблат, часть этого может быть эффективно выполнена на поддерживаемом оборудовании, хотя это может быть невозможно на старых устройствах.

По этой причине используйте renderMode и blendMode разумно и помните о влиянии, которое их использование может оказать на общую производительность циферблата.

Используйте оттенки

Цвет tintColor можно применить ко всему элементу Part* , Group или отдельным стрелкам, таким как HourHand и MinuteHand , например:

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

Это может быть полезно для стилизации целого раздела циферблата, включая применение стиля из пользовательских настроек, например: tintcolor="[CONFIGURATION.myThemeColor.0]" .