Поделиться через

Основные понятия

  • Статья

Примечание

Для приложений на Windows 10 рекомендуется использовать API Windows.UI.Composition вместо DirectComposition. Дополнительные сведения см. в статье Модернизация классического приложения с помощью визуального слоя.

В этом разделе представлен обзор основных понятий Microsoft DirectComposition. Он содержит следующие подразделы:

Компоновка

DirectComposition определяет композицию как коллекцию растровых изображений, которые объединяются и обрабатываются путем применения различных преобразований, эффектов и анимаций для получения визуального результата в пользовательском интерфейсе приложения. DirectComposition работает только с содержимым растрового изображения; он не поддерживает векторы или текст. DirectComposition не предоставляет содержимое растрового изображения. Вместо этого он предоставляет интерфейсы, в которых пользователи могут рисовать с помощью D2D, DXGI или загружать собственное содержимое текстур.

Приложение DirectComposition создает два набора объектов для создания сцены: точечные изображения, которые объединяются, и визуальные элементы, определяющие пространственные связи между растровыми изображениями. Дополнительные сведения о точечных объектах, поддерживаемых DirectComposition, см. в разделе Объекты растровых рисунков.

Визуальные элементы

Визуальные элементы (или визуальные объекты) являются основными элементами DirectComposition. Это основные стандартные блоки, которые используются для создания композиций и анимаций в пользовательском интерфейсе приложения.

С точки зрения программирования визуальный элемент — это объект, имеющий набор свойств и предоставляющий интерфейс, который используется для задания значения свойств. Свойство Content визуального элемента связывает определенное растровое изображение с визуальным элементом, в то время как другие свойства управляют расположением и обработкой визуального элемента при отображении на экране.

Дополнительные сведения см. в разделе Свойства визуального элемента.

Визуальное дерево

DirectComposition создает композицию из иерархической коллекции визуальных объектов, называемой визуальным деревом. Визуальный элемент в корне дерева называется корневым визуальным элементом , и с ним может быть связан один или несколько дочерних визуальных элементов . Дочерний визуальный элемент может иметь один или несколько собственных дочерних визуальных элементов. Любой визуальный элемент, имеющий связанные дочерние визуальные элементы, называется родительским визуальным элементом, а все дочерние визуальные элементы, которые совместно используют один и тот же родительский элемент, называются одноуровневые визуальные элементы. Конкретный визуальный элемент вместе со всеми его дочерними и дочерними визуальными элементами называется поддеревом визуального элемента.

Расположение визуального элемента в дереве помогает определить его положение на экране и z-порядок относительно других визуальных элементов в композиции. Корневой визуальный элемент расположен относительно левого верхнего угла клиентской области целевого окна, в котором отрисовывается композиция. Все дочерние визуальные элементы расположены относительно левого верхнего угла родительского визуального элемента (или визуального элемента, заданного свойством TransformParent), и всегда отображаются перед родительским элементом в z-порядке.

На следующем рисунке показана композиция визуальных элементов и структура визуального дерева, используемого для создания композиции. Визуальный элемент 1 — это корневой визуальный элемент, а также родительский элемент дочерних визуальных элементов 2 и 3, которые являются одноуровневыми визуальными элементами. В Visual 3 есть два собственных дочерних визуальных элемента: Визуальные элементы 4 и 5. Вместе визуальные элементы с 3 по 5 составляют визуальное поддеревое.

композиция визуальных элементов и соответствующее визуальное дерево

Родительский визуальный элемент поддерживает упорядоченный список своих дочерних визуальных элементов. Если одноуровневые визуальные элементы расположены таким образом, что они перекрываются друг с другом, DirectComposition задает z-порядок одноуровневых элементов в зависимости от того, в каком порядке они отображаются в списке дочерних элементов родительского визуального элемента. Одноуровневый элемент, который появится позже в списке, помещается перед всеми братьями и сестрами, которые отображаются ранее в списке. На следующем рисунке показан z-порядок перекрывающихся дочерних визуальных элементов.

Z-порядок перекрывающихся дочерних визуальных элементов

Свойства визуального объекта

Визуальный объект предоставляет набор свойств, позволяющих задать содержимое растрового изображения для визуального элемента, а также управлять положением и управлением визуальным содержимым DirectComposition. В следующих разделах подробно описано каждое свойство.

Свойство содержимого

Свойство Content визуального элемента указывает содержимое растрового изображения, связанное с визуальным элементом. Это растровое изображение, которое DirectComposition использует при включении визуального элемента в композицию.

Свойство Content визуального элемента задается путем вызова метода IDCompositionVisual::SetContent .

Дополнительные сведения о типах растрового содержимого, поддерживаемых DirectComposition, см. в разделе Растровые объекты.

Свойство clip

Свойство Клип визуального элемента задает прямоугольную область, называемую областью обрезки (или прямоугольником обрезки). При отрисовки визуального элемента отображается только часть визуального элемента, которая находится в области обрезки, а все содержимое, которое выходит за пределы области обрезки, обрезается (то есть не отображается). DirectComposition поддерживает обрезку областей с скругленными или квадратными углами.

Свойство Clip визуального элемента задается путем вызова метода IDCompositionVisual::SetClip .

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

Свойство BorderMode

Свойство BorderMode указывает, как составить края растровых изображений и клипов, связанных с этим визуальным элементом, или с визуальными элементами в поддереве, корнями которых является этот визуальный элемент.

Режим границы влияет на то, как границы растрового рисунка составляются при преобразовании растрового изображения таким образом, чтобы края не выровняли по оси по целочисленным координатам. Это также влияет на то, как содержимое обрезается по углам клипа со скругленными углами, а также на краю клипа, преобразованного таким образом, что края не выровнены по оси по целочисленным координатам.

Дополнительные сведения см. в разделе IDCompositionVisual::SetBorderMode.

BitmapInterpolationMode, свойство

Свойство BitmapInterpolationMode сообщает DirectComposition, как создать растровое изображение при его преобразовании таким образом, чтобы между пикселями в растровом рисунке и пикселями на экране не было единого соответствия.

Свойство BitmapInterpolationMode визуального элемента задается путем вызова метода IDCompositionVisual::SetBitmapInterpolationMode .

Свойство CompositeMode

Свойство CompositeMode сообщает DirectComposition, как смешивать растровое содержимое визуального элемента с целевым объектом отрисовки. Описание поддерживаемых составных режимов см. в разделе DCOMPOSITION_COMPOSITE_MODE.

Свойство CompositeMode визуального элемента задается путем вызова метода IDCompositionVisual::SetCompositeMode .

Свойства OffsetX и OffsetY

Свойства OffsetX и OffsetY сообщают DirectComposition, где следует расположить визуальный элемент по горизонтали и вертикали. Они определяют двумерное фиксированное положение, из которого вычисляются все преобразования и эффекты для визуального элемента.

Для корневого визуального элемента свойства OffsetX и OffsetY определяют координаты X и Y точки относительно левого верхнего угла окна, в котором размещен визуальный элемент. Для дочернего визуального элемента координаты находятся относительно верхнего левого угла родительского элемента или, если указано свойство TransformParent , верхнего левого угла указанного визуального элемента. При отрисовки визуальный элемент размещается таким образом, чтобы верхний левый угол визуального элемента совпадал с указанными координатами.

Свойства OffsetX и OffsetY визуального элемента задаются путем вызова методов IDCompositionVisual::SetOffsetX и SetOffsetY .

Свойство effect

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

Свойство Effect визуального элемента задается путем вызова метода IDCompositionVisual::SetEffect .

Дополнительные сведения см. в статье Эффекты.

Transform - свойство

Свойство Transform указывает двумерное (двухмерное) преобразование или группу двухмерных преобразований для DirectComposition для выполнения в визуальном элементе. Преобразование (или преобразование) — это операция, которая изменяет систему координат визуального элемента относительно его родительского элемента или относительно визуального элемента, заданного свойством TransformParent. Преобразования можно использовать для изменения положения, размера или характера визуального элемента, перемещая его в другое место (преобразование), делая его больше или меньше (масштабирование), поворачивая его (поворот), искажая его форму (перекос) и т. д.

Свойство Transform визуального элемента задается путем вызова метода IDCompositionVisual::SetTransform .

Дополнительные сведения см. в статье Преобразования.

Свойство TransformParent

Система координат визуального элемента изменяется свойствами OffsetX, OffsetY и Transform. Как правило, эти свойства определяют систему координат визуального элемента относительно его непосредственного родительского элемента. Чтобы использовать визуальный элемент, отличный от родительского, в качестве основы для системы координат дочернего визуального элемента, используйте свойство TransformParent, чтобы указать другой визуальный элемент в качестве "родительского" для целей преобразования.

Свойство TransformParent визуального элемента задается путем вызова метода IDCompositionVisual::SetTransformParent .

Объект устройства

Чтобы использовать DirectComposition, необходимо создать и управлять различными объектами модели com. Первый объект, который необходимо создать, — это объект устройства DirectComposition, так как он служит фабрикой для создания всех других объектов, используемых в композиции.

Объект устройства создается путем вызова функции DCompositionCreateDevice , которая возвращает указатель интерфейса IDCompositionDevice . Этот интерфейс предоставляет набор методов, которые используются для создания визуальных объектов, объектов обрезки, объектов анимации, преобразования объектов, объектов эффектов и т. д.

Объект устройства служит еще одной цели, помимо того, что является фабрикой для создания других объектов. Он предоставляет метод с именем Commit , который передает визуальное дерево в DirectComposition для обработки. Дополнительные сведения см. в разделе Транзакционная композиция.

Помните, что хотя в приложении можно создать несколько экземпляров объекта устройства, все объекты, используемые в определенной композиции, должны быть созданы одним и тем же объектом устройства с одним исключением: визуальные объекты из разных объектов устройств можно объединять в одном визуальном дереве. При этом DirectComposition обрабатывает визуальное дерево как обычно, за исключением того, что изменения в определенном визуальном объекте в дереве вступают в силу только при вызове метода Commit для объекта устройства, создавшего визуальный объект.

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

Окно целевого объекта композиции

Визуальное дерево должно быть привязано к окну, прежде чем какие-либо визуальные элементы дерева можно будет отобразить на экране. Окно, называемое окном целевого объекта композиции, может быть окном верхнего уровня или дочерним окном. Кроме того, целевое окно композиции может быть многослойным; то есть он может иметь WS_EX_LAYERED стиле окна.

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

концептуальные слои окна

Транзакционная композиция

В DirectComposition используется транзакционная модель, в которой создается пакетный набор изменений визуального элемента, а затем выполняется "фиксация" набора в DirectComposition для одновременной обработки всех элементов. Вы можете изменить один и тот же визуальный объект DirectComposition и зафиксировать изменения любое количество раз. Когда диспетчер окон рабочего стола (DWM) получает пакеты, он выбирает все ожидающие пакеты и применяет их к следующему кадру в порядке их фиксации.

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

Методы IDCompositionSurface::BeginDraw и IDCompositionSurface::EndDraw позволяют синхронизировать обновления отрисовки с обновлениями визуальных элементов. Например, можно вызвать МЕТОД IDCompositionSurface::BeginDraw, обновить свойства OffsetX и Clip визуального элемента, вызвать метод IDCompositionDevice::Commit, отрисовать содержимое с помощью Microsoft DirectX, а затем вызвать МЕТОД IDCompositionSurface::EndDraw. В этом случае Microsoft DirectComposition гарантирует, что содержимое точечных рисунков и свойства визуальных элементов обновляются одновременно.

Пакетная обработка

В одном кадре можно зафиксировать несколько изменений в одном визуальном элементе или несколько изменений в разных визуальных элементах. При внесении нескольких изменений в один и тот же визуальный элемент в одном кадре учитывайте следующее:

  • При внесении нескольких изменений в одно и то же свойство визуального элемента применяется только последнее изменение. Например, если для непрозрачности задано значение 0, затем значение 0,5 и, наконец, значение 1,0, к визуальному элементу применяется только непрозрачность 1,0.

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

    1. Offset
    2. Преобразование
    3. Отсечение
    4. Действие

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

    результат применения всех четырех свойств к визуальному элементу

    Помните, что все изменения применяются к визуальному элементу одновременно в контексте одного кадра. Это означает, что с точки зрения пользователя изменения визуального элемента происходят мгновенно.

  • Для свойства Transform можно использовать IDCompositionDevice::CreateTransformGroup , чтобы создать группу преобразований, которые будут применяться к визуальному элементу одновременно. DirectComposition применяет преобразования в указанном порядке.

  • Для свойства Effect можно использовать IDCompositionEffectGroup , чтобы применить группу эффектов. DirectComposition применяет эффекты в указанном порядке. Кроме того, преобразования трехмерной перспективы приводят к преобразованию визуального дерева в плоскую структуру после применения всех трехмерных преобразований в текущем визуальном элементе. Это гарантирует, что полученный визуальный элемент будет выглядеть как можно ближе к трехмерной.

Синхронизация

Приложение может вызывать DirectComposition из нескольких потоков одновременно. Порядок выполнения гарантируется для последовательных вызовов, но не для параллельных вызовов. Например, если поток A изменяет визуальный элемент, а поток B одновременно фиксирует пакет, то не определяется, включено ли это визуальное изменение в зафиксированный пакет или запускается новый пакет. С другой стороны, если приложение использует другие механизмы синхронизации, чтобы гарантировать, что один метод вызывается раньше другого, DirectComposition учитывает порядок вызовов и обрабатывает их так, как если бы оба вызова были выданы в этом порядке из одного потока.

Визуальные деревья между устройствами

Объекты DirectComposition не привязаны к потоку; Для изменения одного и того же набора объектов можно использовать несколько потоков. Однако при совместном использовании одного и того же объекта устройства следует учитывать следующие проблемы.

  • Оба потока должны иметь возможность вызывать IDCompositionDevice::Commit. Если только один из потоков вызывает IDCompositionDevice::Commit, другой поток не может зафиксировать изменения в DirectComposition.
  • Поведение транзакции может быть потеряно, если один поток вызывает IDCompositionDevice::Commit , в то время как другой поток по-прежнему вносит изменения, которые должны быть частью одной транзакции.

Если необходимо зафиксировать несколько одновременных транзакций в DirectComposition, необходимо использовать несколько объектов устройств, возможно, из нескольких потоков. В этом сценарии одно и то же визуальное дерево совместно используется обоими объектами устройства, и каждый объект устройства фиксирует свои собственные транзакции.

На следующем рисунке показано визуальное дерево, совместно используемое двумя объектами устройства. Визуальные элементы 1, 2, 4 и 5 принадлежат одному или другому устройству, но визуальный элемент 3 совместно используется обоими устройствами и поэтому может использоваться для соединения двух вложенных деревьев в одно, более крупное визуальное дерево. Совместное использование визуального дерева позволяет асинхронно управлять двумя устройствами из двух разных потоков.

визуальное дерево, совместно используемое двумя устройствами

Чтобы проиллюстрировать полезность совместного использования визуального дерева между двумя устройствами, рассмотрим архитектуру, которая обеспечивает низкую задержку сенсорного ввода. Архитектура может использовать два потока: один, который обрабатывает большинство задач пользовательского интерфейса, и второй поток, предназначенный для обработки событий сенсорного ввода. Сенсорный поток обновляет преобразование определенного визуального элемента на основе жеста ввода пользователем. Обновив преобразование, сенсорный поток может заставить все поддеревье под этим визуальным элементом следовать за пальцем пользователя, увеличивать или уменьшать масштаб по мере выполнения мультисенсорного жеста и т. д. Поток пользовательского интерфейса сохраняет право собственности на большую часть дерева композиции, при этом сенсорный поток владеет только несколькими визуальными элементами, помеченными для асинхронного сенсорного отклика. На следующем рисунке показана упрощенная версия такого дерева композиции:

визуальное дерево, совместно используемое потоком пользовательского интерфейса и сенсорным потоком

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

IDCompositionSurface::BeginDraw

IDCompositionSurface::EndDraw

IDCompositonDevice::Commit

Основные понятия DirectComposition