Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Как применять маски, смешивать эффекты и оттенки

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

Как использовать маски обтравки с режимом отрисовки

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

Элемент renderMode можно применить к элементам Group и Part* в иерархии сцены. При отрисовке циферблата элементы добавляются в порядке обхода дерева сцены.

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

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

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

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

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

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

<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

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

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

Примечание. Эта функция доступна в версии 3 и более поздних версиях формата циферблата.

В версии 3 формата Watch Face Format появилась возможность применять режим наложения при создании элементов Part*.

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

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

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

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

<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 вместо 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>watchface_effects.xml

Что нужно учесть

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

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

Если узел содержит элементы 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>watchface_effects.xml

Эффективность

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

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

Как использовать оттенки

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

<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

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

Как применять маски, смешивать эффекты и оттенки Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.