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

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

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

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

renderMode была введена в первой версии 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 и выше программы Watch Face Format.

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

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

В обычном режиме работы, когда в сцену помещаются два элемента 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><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> te-github-link nocode no-select">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]" .

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